配列に対して繰り返し処理を行う場合、for・for of・for in・forEach などが使用できます。
それぞれの特徴についてまとめました。
それぞれの特徴
for
特に制限なし。
|
1 2 3 4 5 |
var array = [1,2,3,4,5]; for( var i = 0; i < array.length; i++ ){ console.log( array[i] ); } // 1 2 3 4 5 |
for of
IEに対応していない。Edgeには対応している。
|
1 2 3 4 5 |
var array = [1,2,3,4,5]; for( var val of array ){ console.log(val); } // 1 2 3 4 5 |
for in
インデックス順で処理が行われる保証がない。（順不同）
|
1 2 3 4 5 6 |
var array = [1,2,3,4,5]; for( var idx in array ){ console.log(idx); } // 0 1 2 3 4 // 値ではなく、インデックス |
forEach
例外以外でループを抜けることができない。
|
1 2 3 4 5 6 7 |
var array = [1,2,3,4,5]; array.forEach(function(val, idx){ console.log("index:%s、value：%s", idx, val) }); // index:0、value：1 // ・・・ // index:4、value：5 |
例外でループを抜ける場合の例
|
1 2 3 4 5 6 7 8 9 10 11 |
var array = [1,2,3,4,5]; try{ array.forEach(function(val, idx){ if( idx === 2 ){ throw "forEachをぬける"; } console.log("index:%s、value：%s", idx, val) }); }catch{ console.log("例外発生時の処理"); } |
各構文で若干の制限があります。
じゃあ、for でいいのではないか？
for of を使って、IE でエラーが・・・
for in を使って、ん？順番が保証されていない・・・
と思わぬ不具合を埋め込むなら、シンプルに for でいいのでは？
配列の全ての要素に対して処理を行う場合、他の構文の方が若干楽に書けるけど、不具合を埋め込むよりはマシ！
という考えもあるかと思います。
もし自分が、コーディングルールを作るなら
forEach
全配列要素に対して必ず処理を行う場合に使用。
for
forEachを使用しない場合に使用。
for of
使用しない。
まだ IE を使用しているユーザーも 2019/12 時点で 約12%程度いるから。
ただし、IEを意識しない場合、 for of 一本でいい気がする。
for in
使用しない。
順不同な動作が、思わぬ不具合を埋め込む恐れがあるから。
というところでしょうか。