• JavaScript

JavaScriptで連想配列をループで取り出す方法

JavaScriptで連想配列の要素をループで取り出したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

for-in文を使って連想配列を取り出す

// 連想配列
const array = { リンゴ: "100円", メロン: "1000円", ブドウ: "500円" };
// for in
for (var key in array) {
  // キー
  console.log(key);
  // 値
  console.log(array[key]);
}
// 出力結果
// リンゴ
// 100円
// メロン
// 1000円
// ブドウ500円

for-in文を使って連想配列から要素を取り出すコード例です。

for in文の使い方は以下の通りです。

for (変数 in 連想配列) {取り出す処理}

forの条件分岐にある変数には連想配列のキーが入ります。

for-in文の処理内で配列変数【キー】を指定する事で連想配列の値を取り出せます。

forEach文を使って連想配列を取り出す

// forEach
Object.keys(array).forEach((element) => {
  // キー
  console.log(element);
  // 値
  console.log(array[element]);
});

// 出力結果
// リンゴ
// 100円
// メロン
// 1000円
// ブドウ500円

forEachで連想配列から要素を取り出すコード例です。

使い方は以下の通りです。

Object.keys(配列).forEach((変数) => {取り出す処理});

連想配列の場合、forEachをそのまま使ったらエラーとなります。

forEachの前にObject.keys(配列)を指定して、キーを配列にする処理を実行する必要があります。

以上で連想配列から要素を取り出せます。

まとめ

JavaScriptで連想配列をループで取り出す方法について紹介しました。

以上で解説を終わります。