Written by Kasumi

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で連想配列をループで取り出す方法について紹介しました。

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

目次

関連記事

JavaScript

【JavaScript】Local Storageに複数のデータをJSON形式で保存。配列で取得する方法

2022.11.20
3678
JavaScript

Failed to execute ‘insertBefore’ on ‘Node’ The node before which the new node is to be inserted is not a child of this node.の原因・対処方法

2022.12.03
3491
JavaScript

HTMLのformでsubmitした時、ページ遷移させない方法【JavaScript】

2022.10.09
8412
JavaScript

【簡単】videoタグの再生速度を調整(早く・遅く)する方法

更新日:2022.09.09
3495