処理概要
forEach
- 配列中のそれぞれの要素について関数を実行する
const numbers = [1, 2, 3, 4];
numbers.forEach(num=> console.log(num));
// 出力
// 1
// 2
// 3
// 4
map
- 配列内のすべての要素に指定した関数を実行する
- 関数の結果を格納した新しい配列を生成する
const numbers = [1, 2, 3, 4];
const squares = numbers.map((num) => {
return num * num;
});
console.log(numbers); // [1, 2, 3, 4]
console.log(squares); // [1, 4, 9, 16]
filter
- 指定した関数の結果が
trueを返す配列中の要素を格納した新しい配列を生成する
const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(numbers); // [1, 2, 3, 4]
console.log(evenNumbers); // [2, 4]
find
- 指定した関数を満たす配列内の最初の要素の値を返す
const numbers = [1, 2, 3, 4];
const firstEvenNumber = numbers.find((num) => num % 2 === 0);
console.log(numbers); // [1, 2, 3, 4]
console.log(firstEvenNumber); // 2
- 1つも見つからない場合は
undefinedを返す
const numbers = [1, 3, 9];
const firstEvenNumber = numbers.find((num) => num % 2 === 0);
console.log(numbers); // [1, 3, 9]
console.log(firstEvenNumber); // undefined
some
- 指定した関数を配列中の少なくとも1つの要素が満たした場合に
trueを返す
const numbers = [1, 2, 3, 4];
const isEvenNumbers = numbers.some((num) => num % 2 === 0);
console.log(numbers); // [1, 2, 3, 4]
console.log(isEvenNumbers); // true
const numbers = [1, 3, 9];
const isEvenNumbers = numbers.some((num) => num % 2 === 0);
console.log(numbers); // [1, 3, 9]
console.log(isEvenNumbers); // false
reduce
- 配列のすべての要素に対して指定した関数を（左から右の順で）実行し、単一の出力値を生成する
const numbers = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(numbers.reduce(reducer)); // 10
// 5 + 1 + 2 + 3 + 4
console.log(numbers.reduce(reducer, 5)); // 15
上記を全て forEach で実現するのはだめなのか
結論
-
forEachは極力使用しない
理由
- 適切なメソッドを選択することで可読性が上がるため