JavaScript 速習チュートリアル

JavaScript 配列の反復処理

1. 配列イテレーションメソッドの概要

配列のイテレーション（反復処理）メソッドは、配列の各要素に対して特定の操作を実行するために使用されます。以下に主要なメソッドを挙げます。

  • Array forEach
  • Array map()
  • Array flatMap()
  • Array filter()
  • Array reduce()
  • Array reduceRight()
  • Array every()
  • Array some()
  • Array from()
  • Array keys()
  • Array entries()
  • Array with()
  • Array Spread (...)
  • Array Rest (...)

2. JavaScript Array forEach()

forEach() メソッドは、配列の要素ごとに一度ずつ関数（コールバック関数）を呼び出します。

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt += value + "<br>";
}

このコールバック関数は 3 つの引数を受け取ることができます。

  1. value: 要素の値
  2. index: 要素のインデックス
  3. array: 配列自体

上記の例では value パラメータのみを使用していますが、以下のように書き換えることも可能です。

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  txt += value + "<br>";
}

3. JavaScript Array map()

map() メソッドは、各配列要素に対して関数を実行し、その結果から新しい配列を生成します。

  • map() は、値のない要素に対しては関数を実行しません。
  • map() は、元のオリジナル配列を変更しません。

以下の例では、配列の各値を 2 倍にします。

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

value パラメータのみを使用する場合、index と array は省略可能です。

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

4. JavaScript Array flatMap()

ES2019 で追加された flatMap() メソッドは、まず配列の全要素に対してマップ処理を行い、その後、結果をフラット化（平坦化）して新しい配列を作成します。

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);

4.1 ブラウザのサポート状況

flatMap() は ECMAScript 2019 の機能です。2020年1月以降、すべてのモダンブラウザでサポートされています。

5. JavaScript Array filter()

filter() メソッドは、提供されたテスト（条件）をパスした要素のみで構成される新しい配列を作成します。

以下の例では、18 より大きい値を持つ要素から新しい配列を作成します。

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

他のメソッドと同様に、index と array は省略できます。

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}

6. JavaScript Array reduce()

reduce() メソッドは、各配列要素に対して関数を実行し、単一の値（集約された値）を生成します。

  • 配列を左から右へと処理します。
  • 元の配列は変更されません。

以下の例では、配列内のすべての数値の合計を求めます。

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

この関数は 4 つの引数を取ります。

  1. total: 初期値、または前回返された計算結果
  2. value: 要素の値
  3. index: 要素のインデックス
  4. array: 配列自体

reduce() は初期値を引数として受け取ることもできます。

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100); // 初期値として 100 を設定

function myFunction(total, value) {
  return total + value;
}

7. JavaScript Array reduceRight()

reduceRight() メソッドも reduce() と同様に単一の値を生成しますが、配列を右から左へと処理する点が異なります。

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

8. JavaScript Array every()

every() メソッドは、配列のすべての要素が指定したテストに合格するかどうかをチェックします。

const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction); // 全て 18 より大きいか？

function myFunction(value) {
  return value > 18;
}

9. JavaScript Array some()

some() メソッドは、配列の一部の要素がテストに合格するかどうかをチェックします。

const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction); // 18 より大きいものが 1 つでもあるか？

function myFunction(value) {
  return value > 18;
}

10. JavaScript Array.from()

Array.from() メソッドは、以下のものから Array オブジェクトを作成して返します。

  • 任意の反復可能（iterable）オブジェクト
  • length プロパティを持つ任意のオブジェクト

例（文字列から配列を作成）

let text = "ABCDEFG";
Array.from(text); // ["A", "B", "C", "D", "E", "F", "G"]

また、第 2 引数で新しい配列の各要素に対して実行する関数を指定できます。

例（配列から新しい配列を作成）

const myNumbers = [1, 2, 3, 4];
const myArr = Array.from(myNumbers, (x) => x * 2);

11. JavaScript Array keys()

keys() メソッドは、配列のキー（インデックス）を含む Array Iterator オブジェクトを返します。

const fruits = ["バナナ", "オレンジ", "アップル", "マンゴー"];
const keys = fruits.keys();

for (let x of keys) {
  text += x + "<br>";
}

12. JavaScript Array entries()

entries() メソッドは、キー/値ペアを含む Array Iterator オブジェクトを返します。

const fruits = ["バナナ", "オレンジ", "アップル", "マンゴー"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x;
}

entries() は以下のようなペアを返します。

  • [0, "バナナ"]
  • [1, "オレンジ"]
  • [2, "アップル"]
  • [3, "マンゴー"]

13. JavaScript Array with() メソッド

ES2023 で追加された with() メソッドは、元の配列を変更せずに特定のインデックスの要素を更新するための安全な方法です。

const months = ["1月", "2月", "3月", "4月"];
const myMonths = months.with(2, "3月(更新)"); // インデックス 2 を書き換え

14. JavaScript Array Spread (...)

スプレッド（Spread）演算子 ... は、配列を個々の要素に展開します。これを利用して配列の結合が容易に行えます。

例 1（配列の結合）

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];

例 2（コピーの作成）

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

例 3（関数への引数渡し）

const numbers = [23, 55, 21, 87, 56];
let minValue = Math.min(...numbers);
let maxValue = Math.max(...numbers);

15. JavaScript Array Rest (...)

レスト（Rest）演算子 ... は、配列をデストラクト（分割代入）し、残りの要素を新しい配列として収集するために使用されます。

例 1

let a, rest;
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];

[a, ...rest] = arr1;
// a は 1, rest は [2, 3, 4, 5, 6, 7, 8]

例 2

let a, b, rest;
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];

[a, b, ...rest] = arr1;
// a は 1, b は 2, rest は [3, 4, 5, 6, 7, 8]