配列をループする方法

JavaScript/TypeScriptで配列をループするには、主にfor文、for-of文、配列のメソッドの3つの方法があります。

for文

for文は古くからある配列をループする方法です。

ts
const arr = ["a", "b", "c"];
for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
  // 0 a
  // 1 b
  // 2 c の順で出力される
}

ts
const arr = ["a", "b", "c"];
for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
  // 0 a
  // 1 b
  // 2 c の順で出力される
}

breakでループを中断できます。

ts
const arr = ["a", "b", "c"];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
  if (arr[i] === "b") {
    break;
  }
}
// a b が順に出力されて終了する

ts
const arr = ["a", "b", "c"];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
  if (arr[i] === "b") {
    break;
  }
}
// a b が順に出力されて終了する

continueで次のループにスキップできます。

ts
const arr = ["a", "b", "c"];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] === "a") {
    continue;
  }
  console.log(arr[i]);
  // b c が順に出力される
}

ts
const arr = ["a", "b", "c"];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] === "a") {
    continue;
  }
  console.log(arr[i]);
  // b c が順に出力される
}

for-of文

for-of文は、配列の要素をひとつひとつ処理する場合、for文よりもシンプルに書けるのが特徴です。

ts
const arr = ["a", "b", "c"];
for (const value of arr) {
  console.log(value);
  // a b cの順で出力される
}

ts
const arr = ["a", "b", "c"];
for (const value of arr) {
  console.log(value);
  // a b cの順で出力される
}

for-of文もfor文と同様に、breakやcontinueが使えます。

📄️ for-of文 - 拡張for文

JavaScriptで配列をループするのに使えるのがfor-of構文です。PHPのforeachやPythonのfor inと使い勝手が似ている構文です。

Arrayのメソッド

Arrayには要素ごとに処理を行うメソッドがいくつかあります。

forEachメソッドに渡したコールバック関数が、要素ごとに実行されます。forEachには戻り値がありません。for文などと異なり、breakやcontinueは使えません。

ts
const arr = ["a", "b", "c"];
arr.forEach((value, i) => {
  console.log(value, i);
  // a 0
  // b 1
  // c 2 の順で出力される
});

ts
const arr = ["a", "b", "c"];
arr.forEach((value, i) => {
  console.log(value, i);
  // a 0
  // b 1
  // c 2 の順で出力される
});

mapメソッドも要素ごとにコールバック関数を実行します。コールバック関数の戻り値が、mapには戻り値になります。配列要素の値を加工して、別の配列を作るときに便利です。mapではbreakやcontinueは使えません。

ts
const arr = ["a", "b", "c"];
const arr2 = arr.map((value) => value + value);
console.log(arr2);
[ 'aa', 'bb', 'cc' ]

ts
const arr = ["a", "b", "c"];
const arr2 = arr.map((value) => value + value);
console.log(arr2);
[ 'aa', 'bb', 'cc' ]

for-in文は使わない

for-in文で配列をループすることもできます。しかし、for-in文は配列をループするのには使わないほうがよいです。配列は順番が重要なことが多いですが、for-in文は順番どおりになる保証がないためです。

また、配列オブジェクトに追加のプロパティがある場合、for-in文はそれも反復処理に含めます。これが予期しない不具合につながる危険性もあります。

js
const arr = ["a", "b", "c"];
arr.foo = "bar"; // 追加のプロパティ
for (const x in arr) {
  console.log(x, arr[x]);
  // 0 a
  // 1 b
  // 2 c
  // foo bar が順に出力される
}

js
const arr = ["a", "b", "c"];
arr.foo = "bar"; // 追加のプロパティ
for (const x in arr) {
  console.log(x, arr[x]);
  // 0 a
  // 1 b
  // 2 c
  // foo bar が順に出力される
}

学びをシェアする

・TypeScript/JavaScriptで配列をループするには主に3つの方法がある。
① for文
② for-of文
③ 配列のメソッド
・for文は古くからある構文
・for-of文はfor文よりもループをシンプルに書ける
・配列にはforEachやmapメソッドがある

『サバイバルTypeScript』より

この内容をツイートする

関連情報

📄️ オブジェクトをループする方法

JavaScript・TypeScriptでオブジェクトのプロパティをループする方法を説明します。