JavaScript for…in文とfor…of文のサンプル

JavaScriptのfor...in文とfor...of文のサンプルです。

for...in文
for...in文で連想配列のキーと値を取得
for...of文
for...of文で配列の値を取得

for...in文

for (変数 in オブジェクト){
実行される処理 (変数を使用する)
}

オブジェクトに含まれる全てのプロパティの分ループします。
想定していないプロパティも取得しまう場合があるので注意が必要です。
(対象オブジェクト自身とそのオブジェクトがプロトタイプから継承しているすべての列挙可能なプロパティ)
順序の保証がないため、インデックスの順序が重要である配列の繰り返しには使うべきではありません。
主に連想配列に使用します。
以下はMDNのfor...in文のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in

for...in文で連想配列のキーと値を取得

for...in文で連想配列のキーと値を取得するサンプルです。

<script>
const color1 = {c1:'赤',c2:'黄',c3:'青'};

for(const c in color1){
	console.log("キー:"+ c); //c1 c2 c3
	console.log("値:"+ color1[c]); //赤 黄 青
}
</script>

2行目は、連想配列です。
4-7行目は、for...in文でキーと値を取得しています。

for...of文

for (変数 of オブジェクト){
実行される処理 (変数を使用する)
}

iterableオブジェクトに対してループ処理を行います。
iterableオブジェクトとは、Array,Stringなどです。
IE11は対応していません。(2018/9時点)
以下はMDNのfor...of文のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of

for...of文で配列の値を取得

for...of文で配列の値を取得するサンプルです。

<script>
const color1 = ["赤","黄","青"];

for(const c of color1){
	console.log(c); //赤 黄 青
}
</script>

2行目は、配列です。Arrayオブジェクトです。
4-7行目は、for...of文で値を取得しています。