JS で配列をループする 4 つの方法のまとめ

この記事では、配列を走査する 4 つの方法を比較してまとめます。

for ループ:

for (let index=0; index < someArray.length; index++) {
 const elem = someArray[インデックス];
 // ···
}

for-in ループ:

for (constキーin someArray) {
 console.log(キー);
}

配列メソッド .forEach():

someArray.forEach((要素, インデックス) => {
 console.log(要素、インデックス);
});

for-of ループ:

for (const 要素のsomeArray) {
 console.log(要素);
}

通常は for-of が最善の選択です。理由を見てみましょう。

forループ [ES1]

JavaScript の for ループは非常に古く、ECMAScript 1 の頃から存在しています。 for ループは、arr の各要素のインデックスと値を記録します。

定数 arr = ['a', 'b', 'c'];
arr.prop = 'プロパティ値';

for (let index=0; index < arr.length; index++) {
 const elem = arr[インデックス];
 console.log(インデックス、要素);
}

// 出力:
// 0, 'a'
// 1, 'b'
// 2, 'c'

for ループの利点と欠点は何ですか?

これは非常に汎用性が高いですが、配列を反復処理したい場合には面倒になることもあります。
これは、他のループメカニズムでは難しい、配列の最初の要素からループを開始したくない場合にも役立ちます。

for-in ループ [ES1]

for-in ループは for ループと同じくらい古く、ECMAScript 1 にも存在しています。次のコードでは、for-in ループを使用して arr のキーを出力します。

定数 arr = ['a', 'b', 'c'];
arr.prop = 'プロパティ値';

for (const キー in arr) {
 console.log(キー);
}

// 出力:
// '0'
// '1'
// '2'
// 'プロップ'

for-in は配列をループするのに良い方法ではありません。

値ではなくプロパティキーにアクセスします。
プロパティキーとして、配列要素のインデックスは数値ではなく文字列です。
配列要素のキーだけでなく、列挙可能なすべてのプロパティキー (独自のキーと継承されたキー) にアクセスします。

継承されたプロパティに for-in でアクセスする実際の目的は、オブジェクトのすべての列挙可能なプロパティを反復処理することです。

配列メソッド .forEach() [ES5]

for も for-in も配列のループには特に適していないため、ECMAScript 5 ではヘルパーメソッド Array.prototype.forEach() が導入されました。

定数 arr = ['a', 'b', 'c'];
arr.prop = 'プロパティ値';

arr.forEach((要素, インデックス) => {
 console.log(要素、インデックス);
});

// 出力:
// 'a', 0
// 'b', 1
// 'c', 2

このアプローチは非常に便利です。多くの操作を実行しなくても、配列の要素とインデックスにアクセスできます。矢印関数 (ES6 で導入) を使用すると、構文がよりエレガントになります。

.forEach() の主な欠点は次のとおりです。

ループ本体では await を使用できません。
.forEach() ループを途中で終了することはできません。また、break は for ループ内でも使用できます。

.forEach() ソリューションを中止する

.forEach() のようなループを中止したい場合は、回避策があります。 .some() もすべての配列要素をループし、コールバックが true 値を返すと停止します。

const arr = ['赤', '緑', '青'];
arr.some((要素, インデックス) => {
 （インデックス >= 2）の場合{
 true を返す; // ループを終了する}
 console.log(要素);
 // このコールバックは暗黙的に `undefined` を返しますが、これは偽値です。 そしてサイクルは続きます。
});

// 出力:
// '赤'
// '緑'

これは .some() の乱用とも言え、for-of や break と比較すると、このコードを理解するのは簡単ではありません。

for-of ループ [ES6]

for-of ループは ECMAScript 6 でサポートされています。

定数 arr = ['a', 'b', 'c'];
arr.prop = 'プロパティ値';

(arrのconst要素) {
 console.log(要素);
}
// 出力:
// 'あ'
// 'b'
// 'c'

for-of は配列をループするのに非常に効果的です。

配列要素を反復処理するために使用されます。

awaitを使うことができます

必要に応じて、for-await-of に移行するのは簡単です。

外部スコープでも break と continue を使用できます。

for-of と反復可能

for-of は配列を走査できるだけでなく、Map などの反復可能なオブジェクトを反復処理することもできます。

const myMap = 新しい Map()
 .set(false, 'いいえ')
 .set(true, 'はい')
;
for (const [キー, 値] of myMap) {
 console.log(キー、値);
}

// 出力:
// 偽、'いいえ'
// 真、'はい'

myMap を反復処理すると、[キー、値] のペアが生成され、それぞれを分解することで直接アクセスできます。

for-of と配列のインデックス

配列メソッド .entries() は、[インデックス、値] ペアの反復可能オブジェクトを返します。このメソッドで for-of と構造化分解を使用すると、配列のインデックスに簡単にアクセスできます。

const arr = ['チョコレート', 'バニラ', 'ストロベリー'];

for (const [index, elem] of arr.entries()) {
 console.log(インデックス、要素);
}
// 出力:
// 0, 'チョコレート'
// 1, 'バニラ'
// 2, 'イチゴ'