javascript メソッド関連

配列

const array = [10,20,30]

• 要素の追加
  • unshift():先頭に追加
  • push():末尾に追加
• 要素の削除(1つずつしか削除できない)
  • shift():先頭から削除
  • pop();末尾から削除
• 配列の操作
  • splice(変化が開始する位置,削除数)
  • splice(変化が開始する位置,削除数,追加する要素)
• 参照渡し
  • 配列とオブジェクトは参照渡しである。
  • スプレッド構文を使うと値渡しとなる。

スプレッド構文

配列を展開してくれる。

  const otherScores = [10, 11];
  const scores = [6, 7, 8, 9, ...otherScores];
  // console.log(scores);

  function sum(a, b) {
    console.log(a + b);
  }

  sum(...otherScores);
  // sum(10, 11);
と同じ意味

分割代入　レスト構文　値の交換

//分割代入
  const [a, b, c, d] = scores;
//レスト構文
  const [a, b, ...others] = scores;
//値の交換
  let x = 10;
  let y = 20;
  [x, y] = [y, x];

forEach

• 配列の要素数を気にする必要が無い
• オブジェクトには使えない
• breakやcontinueは使えない
• 3つの引数を与えられる。
  • 第一引数:配列データの値
  • 第二引数:配列のインデックス番号
  • 第三引数:現在処理している配列

  const scores = [10, 20, 30, 40];
  scores.forEach((score, index) => {
    console.log(`Score ${index}: ${score}`);
  });
  //Score 0: 10...
  //Score 1: 20...

map

• 返り値:処理後の配列

  const prices = [180, 190, 200];

  const updatedPrices = prices.map((price) => {
     return price + 20;
   });

  console.log(updatedPrices); //[200,210,220]

filter

• 返り値:フィルター後の配列
• trueの値だけが残る

  const numbers = [1, 4, 7, 8, 10];

  const evenNumbers = numbers.filter(number => {
     return number % 2 === 0;
   });

  console.log(evenNumbers); //[4,8,10]

オブジェクト

• []ではなく{}を使う。
• 最後のカンマはあってもなくてもエラーにならない。
• 要素の削除にはdeleteを使う

 
  // const point = {x: 100, y: 180};
  const point = {
    x: 100,
    y: 180,
  };
  point.x = 120;
  console.log(point.x); //120
  console.log(point.['y']); //180

  point.z = 90;
  delete point.y;
  console.log(point); //{x :120,z:90}

• スプレッド構文　分割代入　レスト構文も使用可
• 分割代入ではオブジェクトのキーと同じ定数名を使えば、そのキーの値が代入される。

 
 const others = {
    r: 4,
    color: 'red',
  };

  const point = {
    x: 100, 
    y: 180,
    ...others,
  };

  const {x, r, ...others} = point;
  console.log(x); //100
  console.log(r); //4
  console.log(others); // {y:180,color:red}

文字列,配列の操作

• length:長さ取得
• substring(開始位置,終了位置):一部の文字列を取得
• join(区切り文字):配列を区切り文字でつないで文字列として返す
• split(区切り文字):文字列を区切り文字で分割して配列として返す

数値の操作

let score = 7.33333; 
Math.floor(score) // 7 小数点切り捨て
Math.ceil(score) // 8 小数点切り上げ
Math.round(score) // 7 四捨五入
score.toFixed(3) // 7.333 小数点3桁まで表示
Math.random() // 0以上1未満のランダムな数値を生成

日時

• Dateクラスを使う
  • 引数を使う場合は、年と月は必須。

const d = new Date();

d.getFullYear(); //2020
d.getMonth; //0-11 (Jan:0,Feb:1)
d.getDate(); // 1-31
d.getDay(); //0-6 (Sun:0,Mon:1)
d.getHours(); //0-23
d.getMinutes(); //0-59
d.getSeconds(); //0-59
d.getMilliseconds(); 0-999 1000ミリ秒=1秒

const d = new Date(2019, 10); // 2019/11/01 00:00:00
d.setHours(10, 20, 30); // 2019/11/01 10:20:30
d.setDate(31); // 2019/12/01 10:20:30
d.setDate(d.getDate() + 3); // 2019/12/04 10:20:30

タイマー機能

• setInterval(関数名,ミリ秒)
  • ミリ秒ごとに関数を実行する。
  • 関数を引数に設定するときは()は不要。setInterval(func)
  • 返り値はインターバルを一意に識別するインターバルID
• clearInterval(インターバルID)
  • 処理を止める。
• setTimeout(関数,ミリ秒)
  • ミリ秒後に一回だけ実行する
  • 返り値は一意に識別するタイムアウトID

let i = 0;

const id = setInterval(() => {
    const d = new Date();
    console.log(d);
    i++;
    if (i > 3) {
        clearInterval(id);
    }
}, 1000);

setIntervalとsetTimeoutの違い

• 前者はインターバルの時間を超える処理であってもインターバルの時間間隔で実行されるため処理が重なることがあり、システムに負荷がかかる場合がある
• 後者は処理が終わってからを起点に次の処理になるため、負荷がかからない。

クラス

• 静的メソッド内でthisを使うことはできない
  • クラス内で使われるthisはそのクラスから作られるインスタンスである。
  • 静的メソッドはインスタンスを作らずに呼び出せるためthisを使うことができない。
• 子クラスのconstructorでthisを使うにはsuper()を記述
• 親クラスのメソッドを使うにはsuperを頭につける(super.関数名();)