配列の操作（forEach・map・filter・find）

この四つの違いがよく分からないので復習を兼ねて自分なりにまとめてみた。

#forEach

• 配列内の要素を指定したコールバック関数で順に処理する（配列の各要素に対して一度ずつ実行する）ためのメソッド。

const array = ['北海道','青森','岩手','秋田','宮城'];
array.forEach(function(pref){
  console.log(pref);
});
//北海道
//青森
//岩手
//秋田
//宮城

コールバック関数の引数にprefと設定しているが、この変数に配列の値が1つずつ代入される。

#map

• 配列を指定したコールバック関数で加工した結果をコールバック関数の戻り値として返し、新たな配列を作成するためのメソッド。

const array = [10,20,30,40,50];
let result = array.map(function(num){
  return num * num;
});

console.log(result);
// [ 100, 400, 900, 1600, 2500 ]

#filter

• 指定されたコールバック関数で個々の要素を判定し、条件に合致した要素を取り出すためのメソッド。

const array = [10,20,30,40,50];
let result = array.filter(function(num){
  return num % 3 === 0;
});

console.log(result);
// [ 30 ]

#find

• 配列の要素にしていされたコールバック関数を適用していき、条件に合致した最初の要素の値を取り出すメソッド。見つからない場合はundefinedを返す。

const boat = [
    {name: '蒲郡', code: 7},
    {name: '平和島', code: 4},
    {name: '住之江', code: 12},
    {name: '平和島', code: 44}
];

const result = boat.find( race => race.name === '平和島' );

console.log(result) // { name: '平和島', code: 4 }

以下、見つからない場合。

const boat = [
    {name: '蒲郡', code: 7},
    {name: '平和島', code: 4},
    {name: '住之江', code: 12},
    {name: '平和島', code: 44}
];

const result = boat.find( race => race.name === '園田' );

console.log(result) // undefined

アロー関数の書き方も入っているが、当初raceって宣言してないのになんで使えるんだと
とても気持ち悪かった。

#最後に

もっとわかりやすくまとめられるようになろう汗

#参考文献・サイト

• 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
• https://developer.mozilla.org/ja/