【JavaScript】配列④ 〜配列を反復処理するメソッド〜

概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。

この記事で理解できること

• 配列の反復処理方法およびメソッド

配列の反復処理でよく利用されるメソッド

• foreach、map、filter、reduce メソッド。

Array.prototype.forEach

• 配列の要素を先頭から順番にコールバック関数へ渡し、反復処理を行う。
• コールバック関数へ要素、渡された要素のインデックス、反復処理対象の配列を引数として渡す。

const array = ["One", "Two", "Three"];

// forEachでの反復処理
array.forEach((val, index, array) => {
  console.log(`渡された要素の値は${val}で、要素のインデックスは${index}です。配列の各要素は${array}です。`);
});
// => 渡された要素の値はOneで、要素のインデックスは0です。配列の各要素はOne,Two,Threeです
// => 渡された要素の値はTwoで、要素のインデックスは1です。配列の各要素はOne,Two,Threeです
// => 渡された要素の値はThreeで、要素のインデックスは2です。配列の各要素はOne,Two,Threeです

// 要素の値のみコールバック関数へ渡す
array.forEach(val => {
  console.log(`渡された要素の値は${val}です。`);
});
// => 渡された要素の値はOneです。
// => 渡された要素の値はTwoです。
// => 渡された要素の値はThreeです。

Array.prototype.map

• 配列の要素を先頭から順番にコールバック関数へ渡し、コールバック関数が返した値から新しい配列を作成する。
• コールバック関数へ要素、渡された要素のインデックス、反復処理対象の配列を引数として渡す。

const array = ["One", "Two", "Three"];

// mapでの反復処理
const newArray = array.map((val, index, array) => {
  const description = index + 1;
  return `${val}: ${description}`;
});
console.log(newArray); // => [ 'One: 1', 'Two: 2', 'Three: 3' ]

// 要素の値のみコールバック関数へ渡す
const otherArray = array.map(val => val );
console.log(otherArray); // => [ 'One', 'Two', 'Three' ]

// 新しい配列オブジェクトを作成されるため、比較しても一致しない
console.log(otherArray === array);

Array.prototype.filter

• 配列から不要な要素を取り除いた配列を作成したい場合に利用する。
• 配列の要素を先頭から順番にコールバック関数へ渡し、コールバック関数がtrueを返した要素だけを集めた新しい配列を作成する。
• コールバック関数へ要素、渡された要素のインデックス、反復処理対象の配列を引数として渡す。

const numbers = [2, 5, 7, 20, 21];

const newArray = numbers.filter((val, index, array) => {
  return val % 2 === 0;
});
console.log(newArray);    // => [ 2, 20 ]

// こちらも要素だけコールバック関数に渡すことができる
const overElevens = numbers.filter(val => {
  return val > 11;
});
console.log(overElevens); // => [ 2, 21 ]

Array.prototype.reduce

• 累積値（アキュムレータ）と配列の要素を順番にコールバック関数へ渡し、1つの累積値を返す。
• コールバック関数へ累積値、要素、渡された要素のインデックス、反復処理対象の配列を引数として渡す。
• reduceメソッドの第二引数には累積値の初期値となる値を渡せます。(省略時は0を指定したのと同じ)

const numbers = [1, 2, 3, 4];

// reduceの第二引数として初期値0を指定
const result = numbers.reduce((totalVal, val, index, array) => {
  return totalVal + val;
}, 0);
console.log(result); // => 10