配列の展開 for-in , for-of, forEach

jintajavascript

JavaScriptにおける配列の展開：for-in, for-of, forEach の違いと使い方

1. for-in ループ

for-in はオブジェクトの プロパティ名（キー） を反復処理する。配列に対して使うと インデックス（キー） を取得できる。

使い方

const arr = ['apple', 'banana', 'cherry'];
for (const index in arr) {
    console.log(index); // 0, 1, 2
    console.log(arr[index]); // 'apple', 'banana', 'cherry'
}

注意点

  • for-in は オブジェクト用 であり、配列には推奨されない。
  • プロトタイプに追加されたプロパティも列挙される可能性がある。
  • 配列の要素の順番が保証されない。

配列の反復には for-in ではなく、for-of や forEach を使うのが一般的。

🔸 オブジェクトの展開（Object spread）

javascriptコピーする編集するconst user = {
  name: "太郎",
  age: 30
};

const extendedUser = {
  ...user,
  job: "エンジニア"
};

console.log(extendedUser);
// 出力: { name: "太郎", age: 30, job: "エンジニア" }

...user で、オブジェクトの中身を展開して、新しいオブジェクトに組み込んでいる

for-in が配列に非推奨な理由の例

javascriptコピーする編集するArray.prototype.customProp = "これは配列に追加されたプロパティ";

const arr = [10, 20, 30];

for (const key in arr) {
  console.log(`${key}: ${arr[key]}`);
}

🔹 出力結果：

0: 10
1: 20
2: 30
customProp: これは配列に追加されたプロパティ

❌ 問題点：

  • customProp のように プロトタイプに追加されたプロパティ も列挙される。
  • 配列なのに「要素」以外も出てしまうため、意図しない挙動につながる。

2. for-of ループ

for-of は 配列の要素 を順番に取得できるループ。

使い方

const arr = ['apple', 'banana', 'cherry'];
for (const fruit of arr) {
    console.log(fruit); // 'apple', 'banana', 'cherry'
}

特徴

  • for-of は 配列の値 を直接取得できる。
  • for-in のようにインデックスを意識する必要がない。
  • break や continue を使ってループ制御が可能。
  • Map や Set などの イテラブルオブジェクト も反復できる。
const set = new Set([1, 2, 3]);
for (const num of set) {
    console.log(num); // 1, 2, 3
}

✅ **Map（大文字）というのは、JavaScriptにある「イテラブルオブジェクトの一種」**

そして、

🔁 配列の .map()（小文字）は高階関数で、これは別物！

3. forEach メソッド

forEach は 配列メソッド で、コールバック関数を実行しながら要素を順番に処理する。

使い方

const arr = ['apple', 'banana', 'cherry'];
arr.forEach((fruit, index) => {
    console.log(index, fruit);
});
// 0 'apple'
// 1 'banana'
// 2 'cherry'

特徴

  • forEach は コールバック関数 を使う。
  • 途中で break や continue が使えない（すべての要素を処理する）。
  • 非同期処理には向かない（await が使えない）。
  • 配列のインデックスも取得できる。
const arr = ['apple', 'banana', 'cherry'];
arr.forEach((fruit, index, array) => {
    console.log(`Index: ${index}, Fruit: ${fruit}, Array: ${array}`);
});

4. 使い分けのポイント

ループ方法主な用途注意点
for-inオブジェクトのプロパティを反復配列に使うと予期しない動作の可能性
for-of配列・イテラブルオブジェクトの要素を反復インデックスが必要な場合は不向き
forEach配列をメソッド形式で処理break や await が使えない

結論：

  • オブジェクトのキーを取得 → for-in
  • 配列の値をループ → for-of
  • 配列のメソッドで処理 → forEach

5. まとめ

for-in、for-of、forEach にはそれぞれの特性があります。適切な場面で正しく使い分けることで、より分かりやすく効率的なコードが書けるようになります。

ポイントをおさらい

  • for-in はオブジェクト向け（配列には推奨されない）。
  • for-of は配列の要素を取得するのに適している。
  • forEach は配列の各要素に対して関数を実行する。

https://qiita.com/wifeofvillon/items/15359535a834832e08ea

【JavaScript入門】配列処理をするmap()の使い方とMapオブジェクトの解説！

https://swallow-incubate.com/archives/blog/20191023/

 

タグ: