Javascriptのforについて。

Question

早速ですがコードを記載します。

let array = [
"apple",
"banana",
"grape",
"orange",
];

for(let i = 0; i < array.length; i++){
console.log( array[i] );
}

for(let i of array){
console.log(i);
}

Rubyから最近javascriptを勉強しているものです。
「of」を使ったほうが圧倒的にラクだと思います。Rubyの「each」のようです。

上記のコードはどのような違いがありますか？メリット、デメリットがあるのでしょうか？
お忙しいところ恐れ入りますが、ご確認宜しくお願い致します。

Answer 1

メリット、デメリットがあるのでしょうか？

古いブラウザはfor-ofに対応していません（MDN）。

---

第3の選択肢として、Array.prototypeに存在するメソッドを使う方法もあります。

array.forEach(item => console.log(item));

Comments

[maisumakun]

あと、「1つの配列を回す」よりひねったことをしたい場合（同じ要素数の配列が複数あって、両方参照したい場合など）には、添字が直接出てくるforを使うほうが便利かもしれません。

[say4hatii8]

「添字が直接出てくるforを使うほうが便利かもしれません。」そうですね。入れ子したりする場合に利用することがあるかもしれません。気が付かなかったです。ありがとうございます。

Answer 2

過去にまとめました。
https://qiita.com/think49/items/0c5ea1c9e2545fa2eed2

※MDNのリファレンスをそ読んで違いを読み取るぐらいのことはやりましょう。

Re: say4hati8 さん

Answer 3

ofを使うパターンは要素は、すぐ取れますが、インデックスをすぐとってこれません。
ofじゃないパターンは、インデックスはすぐとれますが、要素の取得は、質問のコードのように、
配列[インデックス]という風に取得せねばなりません。
他にも違いがあるかもしれませんが、（処理速度とか）
基本的には、インデックスをとるかとらないかの違いです。

あと、現代だと気にする必要がありませんが、
ofを使えない古いブラウザが存在します。

Comments

[maisumakun]

ちなみに、forEachメソッドで書いた場合、コールバック関数への引数が「値, インデックス, 配列」のようになるので、両方取れます。

[miyabi_pudding]

ありがとうございます。
ひとまず、for構文での質問だったので、
forEachには言及しない方向で回答でした。

Answer 4

どのような違いがありますか？メリット、デメリットがあるのでしょうか？

for ... ofの方が早いらしいです。
forの方が早いらしいです。

Firefoxのfor速度比較が遅すぎると思ったので試してみた（2019/05版） - noxi雑記

Comments

[miyabi_pudding]

> for ... ofの方が早いらしいです。

なんと。今度からそっち使おう・・・。

[Lhankor_Mhy]

実装依存ですからなんとも言い難いですね。
ここでは、ブラウザシェア2割弱の iOS Safari のベンチがないですし、そもそも forEach と map の方が早いですし……

[Zuishin]

逆じゃないですか？

[Lhankor_Mhy]

おっしゃるとおりでした。あの不等号はms単位だったのか……
修正します。

[miyabi_pudding]

検証してみましたが、ブラウザにても少し違いがあるようです。

Chromeは、
for > for of > forEach
（速 > 遅）
とほぼ確実になり、速さ安定しているのですが、
FireFoxの場合は、
実行させた順によって、微妙に結果が違い、なんともいえない結果になりました。
1. for
2. for of
3. forEach
の順で実行すると、
forEach > for of > for
になりますが、
1. forEach
2. for
3. for of
とすると、
for > for of > forEach
の結果になってしまいます。
検証の仕方が悪いかもしれませんが・・・。

[Lhankor_Mhy]

同じ配列を触っているなら、もしかしたらメモリへの展開とかが影響しているかもしれませんね。
Chromeはインタプリタが予測的にメモリを確保しているのか、プリコンパイルの段階で確保しているのか、な？

[miyabi_pudding]

うぉ、同じ配列から計測してるので、それありそうですね・・・。
規模が大きい実装になると、処理速度バカにならないので、
どれが正解なのかはすごく気になりますね。

[miyabi_pudding]

使用配列を分けた場合、
FireFoxでは、
for > forEach > for of
で安定しましたね・・・。
（実行順変えても同様の結果）
Chromeでは変わらずです。

FireFoxの場合、
forが速いのは納得できたのですが、
for ofより、forEachが速いのは意外でした。

[Lhankor_Mhy]

>forEachが速いのは意外

ですねえ。

Answer 5

ofはイテラブルなオブジェクトにしか実行できません。
一般的な{}のようなオブジェクトを走査できないので
使い分けが必要です

Comments

[yambejp]

単純にこれでよい気がします
array.forEach(x=>console.log(x));