【Javascript】forEachを使用する前に検討する3つの処理

概要

Array.prototype.forEachの処理を使う前に検討するべき3つの処理についてまとめる

対応内容

結論filter,find,map
上記が使用することで、可読性があがる可能性がある。以下に3つの処理についてまとめる

filter (Array.prototype.filter)

配列sportsのうち、特定の条件に合致した要素のみ取得するようfilterをかけることができる

const soccer = sports.filter(sport => {
  return sport.type === 'soccer';
});

find (Array.prototype.find)

配列sportsから特定の要素を抜き出す

const mySport = sports.find(sport => sport.member === '11人');

findを使うことで、配列から特定の要素1つを検索して抜き出すという意図がわかりやすくなる
findで取得しておくことで、mySport[0]のように記述する必要がなくなる

map (Array.prototype.map)

配列sportsの各要素を参照し、別の配列を作成する

const sportNames = sports.map(sport => sport.name);

特定の要素のみを加工して新たな配列を作成するパターンにとても有効

参考サイト

https://qiita.com/diescake/items/70d9b0cbd4e3d5cc6fce