19/5/5 Javascript学習記録4

Progate Javascript学習コースⅥ『配列を操作するメソッドを学ぼう』より

◯pushメソッド
配列の最後に新しい要素を追加する。

// 設定
const hoge = [1,2,3];
// method
hoge.push(4);
// 処理
console.log(hoge)
// 表示結果
[1,2,3,4]

◯forEachメソッド
配列内の要素を一つずつ全て取り出して、全ての要素に同じ処理をする。

// 設定
const hoges = [1,2,3]
// method
hoges.forEach((hoge) => {  ←アロー関数を使う。
  console.log(hoge);
} 
// 表示結果
1
2
3

◯findメソッド
アロー関数の処理部分に記述した条件式に、最初に合致する要素を配列の中から取り出す。
オブジェクトにも使える。

// 設定
const hoges = [1,2,3,4,5,6]

// findメソッドで、最初の３の倍数を取り出す
const hoge = hoges.find((hoge) => {
  return hoges % 3 === 0;
});
console.log(hoge);

// 表示結果
3

◯filterメソッド
記述した条件式に合う要素を取り出して新たな配列を作る。

// 設定
const hoges = [1,2,3,4,5,6]

// filterメソッドで偶数を全て取り出す
const hoge = hoges.filter((hoge) => {
  return hoges % 2 === 0;
});
console.log(hoge);

// 表示結果
[2,4,6]

◯mapメソッド
配列内の全ての要素に処理を行い、その戻り値から新たな配列を作る。

// 設定
const hoges = [1,2,3]

// mapメソッドで、要素の数を全て倍にした配列を作る
const doubledhoge = hoges.find((hoge) => {
  return hoges * 2;
});
console.log(doubledhoge);

// 表示結果
[2,4,6]