かなぽんのブログ

フロントエンドエンジニアの雑記

JavaScript配列操作まとめ(forEach, map, filter, every, some, find, findIndex, reduce)

JavaScript配列操作まとめ(forEach, map, filter, every, some, find, findIndex, reduce)

forEach

  • 与えられた関数を、配列の各要素に対して一度ずつ実行します。
  • 戻り値はundefined
const numbers = [1, 4, 2, 5, 2, 5];
numbers.forEach((number) => {
  console.log(number)
});
// 1 4 2 5 2 5

// 省略記法
console.log(numbers.forEach(number => console.log(number)));
// 1 4 2 5 2 5

map

  • 与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
const numbers = [1, 4, 2, 5, 2, 5];
const newNumbers = numbers.map((number) => {
  return number * 2;
});
console.log(newNumbers);
// [2, 8, 4, 10, 4, 10]

// 省略記法、returnも省略できる
console.log(numbers.map(number => number * 2));
// [2, 8, 4, 10, 4, 10]

filter

  • コールバック関数を各要素に実行し、trueとなった要素を返却し、その結果からなる新しい配列を生成します。
const numbers = [1, 4, 2, 5, 2, 5];
const newNumbers = numbers.filter((number) => {
  return number < 3;
});
console.log(newNumbers);
// [1, 2, 2]
// 省略記法
console.log(numbers.filter(number => number < 3));
// [1, 2, 2]

every

  • 配列のすべての要素が条件を満たすかを判定する。
  • すべての要素が条件を満たせばtrue。
  • ひとつでも満たさないならfalseを返却。
const numbers = [1, 4, 2, 5, 2, 5];
const isEvenNumbers = numbers.every(number => number % 2);
console.log(isEvenNumbers);
// false

some

  • 配列の中に条件を満たした要素があるかを判定する。
  • ひとつでも条件を満たせばtrue, すべて違う場合はfalse。
const numbers = [1, 4, 2, 5, 2, 5];
const hasEvenNumbers = numbers.some(number => number % 2);
console.log(hasEvenNumbers);
// true

find

  • 配列の要素から、条件を満たした最初の要素を返却する。
const numbers = [1, 4, 2, 5, 2, 5];
const newNumber = numbers.find(number => number === 5);
console.log(newNumber);
// 5

findIndex

  • 配列の要素から、条件を満たした最初の要素のindexを返却する。
const numbers = [1, 4, 2, 5, 2, 5];
const newNumberIndex = numbers.findIndex(number => number === 5 )
console.log(newNumberIndex);
// 3

reduce

  • 配列の各要素に対して(左から右へ)関数を適用し、単一の値にします。
  • 初期値0が最初のprevの値で、returnされた値が次のprevの値になる
const numbers = [1, 4, 2, 5, 2, 5];
const sumNumber = numbers.reduce((prev, current) => {
  return prev + current;
}, 0);
console.log(sumNumber);
// 19