配列系メソッド（forEach, map, filter, find）をfor文で説明

JavaScriptの配列系メソッドについて、for文で書き直して説明するための記事

forEach

「繰り返しの処理」をするときに使う

const list = ["apple", "orange", "banana"];

for(let i = 0; i < list.length; i++) {
  const item = list[i];
  console.log(i);
  console.log(item); // 何がしか任意の処理
}

これをforEachで書き直すと

const list = ["apple", "orange", "banana"];

list.forEach((item, i)) => {
  console.log(i);
  console.log(item); // 何がしか任意の処理
})

map

「配列の1つ1つの要素を加工した新しい配列を作る」ときに使う

const list = ["apple", "orange", "banana"];
const newList = [];

for(let i = 0; i < list.length; i++) {
  const item = list[i];
  console.log(i);
  newList[i] = item.length; // 何がしか任意の処理
}

console.log(newList); // > [5, 6, 6]

これをmapで書き直すと

const list = ["apple", "orange", "banana"];

const newList = list.map((item, i) => {
  console.log(i);
  return item.length; // 何がしか任意の処理。returnした値で新しい配列を生成する
})

console.log(newList); // > [5, 6, 6]

filter

「配列をフィルターして新しい配列を作る」ときに使う

const list = ["apple", "orange", "banana"];
const newList = []

for(let i = 0; i < list.length; i++) {
  const item = list[i];

  // 任意のフィルター条件
  if(item.length === 6) {
    newList.push(item);
  }
}

console.log(newList); // > ["orange", "banana"]

これをfilterで書き直すと

const list = ["apple", "orange", "banana"];

const newList = list.filter(item => {
  return item.length === 6; // 任意のフィルター条件。trueのものだけで新しい配列を生成する
})

console.log(newList); // > ["orange", "banana"]

find

「配列の中から条件に合致する要素を探す」ときに使う

const list = ["apple", "orange", "banana"];
let result;

for(let i = 0; i < list.length; i++) {
  const item = list[i];

  // 最初に条件にマッチしたitemをresultに入れてbreakして終了する
  if(item.length === 6){
    result = item;
    break;
  }
}

console.log(result); // > "orange"

これをfindで書き直すと

const list = ["apple", "orange", "banana"];

const result = list.find(item => {
  return item.length === 6; // trueの条件になるitemを返す
})

console.log(result); // > "orange"