for(;;)
- 昔からあるループ文
- eslintにも怒られない。
- breakやcontinueも使える。
filter
特徴
breakが使えないので場合によっては計算量が増える。
find
特徴
map
特徴
breakが使えないので場合によっては計算量が増える。
reduce
特徴
breakが使えないので場合によっては計算量が増える。
forEach
特徴
- forEachの引数はコールバック関数であり必ず配列の全要素に対してコールバック関数が呼び出されます。
- forEachの引数はコールバック関数なので、forやfor in、for ofのようにbreakやcontinueはできない。(continueの代用としてはreturnを使えます。breakの代用はないので計算量が増える。)
用途
filter、find、map、reduceでどうにもならない場合に使う。
理由は以下の2点
- filterやfindの方がコードの意図が伝わりやすいため。
- コードが短くなるため。
forEachが妥当なケース
forEachで回している配列自身に対してのみ作用させるケース。
for キー in オブジェクト
オブジェクトのループの場合に使います。
|
1 2 3 4 5 |
const obj = { key1: 'val1', key2: 'val2', key3: 'val3' }; for (let key in obj) { console.log(key + ' ' + obj[key]); } |
一応、配列のループにも使用できますが、値を取得するにはいちいち「obj[key]」などと指定しなければならないので配列の使用には不向きです。
また、オブジェクトを回す場合にもプロトタイプ(__proto__)まで取得できてしまいますので基本は使わない方が良いです。
for of とObject.keysを組み合わせてループさせるようにしましょう。
for/ofループ(ECMA2015より)
Airbnb の「JavaScript Style Guide」では使わないように警告が出ます。
babelで変換後のコードは「regenerator-runtime」が必要になりコード量が膨大になるのでできるだけmapやforEachなどの目的にあった構文を使うことが推奨されている。
for/ofループを使用する事でイテレーターを保持している変数からキーと値を順番に取り出す事が可能になります。イテレーターについては下記の記事をご確認ください。
「バリュー」のみ扱う。
ECMA2015より配列の中の値の列挙が可能になりました。普通に配列の変数のみ指定するとバリューのみを取得する事が可能です。
|
1 2 3 4 |
let array = [10, 20, 30]; for (num of array) { console.log(num); //10,20,30 } |
ループの「キー」や「インデックス」を取得する。
keysメソッドを合わせて使う事でループのインデックス数を合わせて取得する事ができます。
|
1 2 3 4 |
let array = [10, 20, 30]; for (num of array.keys()) { console.log(num); //0,1,2 } |
「キー」と「バリュー」のどちらも取得する。
entriesメソッドを使うとループのキーとインデックスどちらも取得する事が可能になります。
|
1 2 3 4 |
let array = [10, 20, 30]; for (num of array.entries()) { console.log(num); //[0,10]、[0,20]、[0,30] } |
この記事へのコメントはありません。