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

JavaScriptのfor...in文と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 オブジェクト){
  実行される処理 (変数を使用する)
}

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

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

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

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

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

関連の記事

JavaScript 配列を作成するサンプル
JavaScript if文で配列を比較するサンプル
JavaScript 配列のメソッドのサンプル(Arrayオブジェクト)
JavaScript 連想配列のサンプル

△上に戻る