2025.12.29

【JavaScript】連想配列・配列を順に処理するには？（for…in・for…of）

takahide

おはようございます。タカヒデです。

本日は、「JavaScriptにおける、『連想配列・配列を順に処理する方法』及び、『for…in文』『for…of文』」を紹介します。

こんな人にオススメ

JavaScriptにおける『連想配列・配列を順に処理する方法』が理解できない
『for…in文』『for…of文』の記載方法と記載例を知りたい

ぜひ本記事を参考にしてください。

Contents

連想配列の中身を順に処理（for…in文）
配列の要素を順に処理（for…of文）
補足：配列の時には「for…of」を利用すべし
まとめ

連想配列の中身を順に処理（for…in文）

「連想配列の中身を取り出して順に処理」する場合には『for…in文』を使用します。

ここでは、「fruitPrice」という連想配列の中身を取り出し、格納されている、「apple:200」,「grape:300」,「orange:100」を順に実行します。

「まてまて、そもそも連想配列って何だっけ？」という方は以下の例で思い出してくださいね。

連想配列とは？

キーと値がセットとなった配列

例）商品と価格⇒orange/100

では、『for…in文』の記載方法を見ていきましょう。

// for...in文の記載方法
for(仮変数 in 連想配列){
　ループ内で実行する命令
}

// for...in文の記載方法
for(仮変数 in 連想配列){
　ループ内で実行する命令
}

具体的にどのように記載するのか、記載例も見ていきます。

let fruitPrice = {
  apple: 200,
  grape: 300,
  orange: 100
};

for (let key in fruitPrice) {
  console.log(key + ":" + fruitPrice[key]);
}

//実行結果：apple:200,grape:300,orange:100

let fruitPrice = {
  apple: 200,
  grape: 300,
  orange: 100
};

for (let key in fruitPrice) {
  console.log(key + ":" + fruitPrice[key]);
}

//実行結果：apple:200,grape:300,orange:100

連想配列「fruitPrice」のキーを取り出し、仮変数keyにセットしながらループを繰り返していることが分かります。

配列の要素を順に処理（for…of文）

続けて、「配列の要素を順に処理」する場合には『for…of文』を使用します。

ここでは、「fruit」という配列の中身を取り出し、格納されている、「apple」,「grape」,「orange」を順に実行します。

まずは『for…of文』の記載方法です。

// for...of文の記載方法
for(仮変数 of 反復可能なオブジェクト){
　ループ内で実行する命令
}

// for...of文の記載方法
for(仮変数 of 反復可能なオブジェクト){
　ループ内で実行する命令
}

こちらも記載例を見ていきます。

let fruit = ["apple", "grape", "orange"];

for (let value of fruit) {
  console.log(value);
}

//実行結果：apple,grape,orange

let fruit = ["apple", "grape", "orange"];

for (let value of fruit) {
  console.log(value);
}

//実行結果：apple,grape,orange

配列「fruit」の要素である、「apple」,「grape」,「orange」が順に出力できているのがわかりますね。

補足：配列の時には「for…of」を利用すべし

ここまで、『for…in文』『for…of文』の説明をしてきました。

しかし、
「わざわざ『for…in文』と『for…of文』を分けなくても連想配列も配列も『for…in文』でいいんじゃね？」
と思われている方はいらっしゃいませんか？

あなたは非常に鋭いです。
しかし、配列の時には「for…of文」を利用すべきなのです。

試しに、配列に「test」オブジェクト
「Array.prototype.test = function () { };」
を追加する場合を見ていきます。

■「for…in」で実行した場合

let fruit = ["apple", "grape", "orange"];
Array.prototype.test = function () { };

for (let key in fruit) {
  console.log(fruit[key]);
}

//実行結果：apple,grape,orange,ƒ () { }

let fruit = ["apple", "grape", "orange"];
Array.prototype.test = function () { };

for (let key in fruit) {
  console.log(fruit[key]);
}

//実行結果：apple,grape,orange,ƒ () { }

■「for…of」で実行

let fruit = ["apple", "grape", "orange"];
Array.prototype.test = function () { };

for (let value of fruit) {
  console.log(value);
}

//実行結果：apple,grape,orange

let fruit = ["apple", "grape", "orange"];
Array.prototype.test = function () { };

for (let value of fruit) {
  console.log(value);
}

//実行結果：apple,grape,orange