配列 ループ処理の使い分け forEach、for、for～in

Question

var c = new Array('A','B','C','D');

    for (var i in c ) {
	document.write(c[i]);　//ABCD
}

c.forEach((e) => {
  document.write(e);　//ABCD
});

for (let i = 0; i < c.length; i++) {
  document.write(c[i]);　//ABCD
}

配列の要素に対しての繰り返し処理なのですが、for～in文とforEach、for文どれでも結果は同じですが使い分けはどのようにしたらよいですか。

for～in文はオブジェクトに対してと記載があり、配列の場合使用できますがMDNではforEach() か for...ofをお勧めしていました。
皆様のご意見、その他Javascriptの貴重な知識頂ければ幸いでございます<(_ _)>

Answer 1

配列にプロパティが生やしてあると応答が異なります。
また、MDNに書いていないこととして、疎な配列を参照する際に違いがありますので、気を付けた方がいいです。

var c = [, 'A',, 'B',, 'C',, 'D'];
c.prop = "プロパティ"


for (var x of c) {
  console.log(x); //undefinedAundefinedBundefinedCundefinedD
}

for (var i in c) {
  console.log(c[i]); //ABCDプロパティ
}

c.forEach(x=>console.log(x)) //ABCD

Comments

[cal_1]

今後の参考になります。
ありがとう御座います<(_ _)>

Answer 2

いずれにしてもdocument.writeは悪手なのでやめたほうがいいでしょう
DOMで処理してください

なお表示するだけならjoinして一度に表示するのが妥当でしょう

Comments

[cal_1]

ご教授ありがとう御座います<(_ _)>
DOM操作で書く癖をつけていきたいと思います。

Answer 3

MDNの解説通りです。

for～in文はオブジェクトに対してと記載があり、配列の場合使用できますがMDNではforEach() か for...ofをお勧めしていました。

いずれにしてもチームやプロジェクトのルールがあるので、どれも使えるようにしておいた上で、柔軟に対応できるようにしておいたほうで良いでしょう。
実装がぶれないように、ですね。

ただ、forEachは注意点が多い印象です。
Array.prototype.forEach()

Comments

[cal_1]

貴重なご意見有難う御座います<(_ _)>

[m.ts10806]

1日くらいは待ってみても良いのでは。
「意見を聞きたい」ならもっと出るはずです。

[cal_1]

そうですね、もう少し皆さんの意見をお聞きしてからにしてみます<(_ _)>
焦ってしまいました。