Help us understand the problem. What is going on with this article?

JavaScriptにおける連想配列のforループ操作

概要

変数を連想配列に入れるのが大好きで、使用頻度がめちゃくちゃ高い割に毎回忘れる連想配列のforループ操作。

連想配列のkey-valueを順番に取得する

let hash = {
  key0: "value0",
  key1: "value1"
};

for (let key in hash) {
  alert('key:' + key + ' value:' + hash[key]);
}

追記: コメント欄より

このエントリは上記の短い記述に対し、本当にやりたかったことを汲んだ知見が寄せられ大変勉強になりました。このエントリを参照するエントリもじわじわ増えており、(実である)コメント欄がスルーされてしまうのは勿体ないのでコメント欄の内容を再掲?します(2019.06.20)

このエントリに連想配列の値参照・操作の方法を求めて辿り着いた方は是非コメント欄に目を通してください。

Consoleにコピペすればすぐ実行結果を確認できるよう、動作確認用の変数宣言を残し、出力形式をconsole.log()に変更しています。

誤り・もっと良い記述がありましたら編集リクエストを送るかコメント欄までお願いします。

map()を使う

@yoichiro6642 さんのコメントより、map()を使う方法

{
  let hash = {
    key0: "value0", key1: "value1"
  };

  Object.keys(hash).map(key => console.log('key:' + key + ' value:' + hash[key]));
  // [undefined, undefined]が出てしまうが内容を確認したいだけなら十分
}

forEach()を使う

↑を受けた @le_panda_noir さんのコメントよりforEach()を使う方法

{
  let hash = {
    key0: "value0", key1: "value1"
  };

  Object.keys(hash).forEach(key => console.log('key:' + key + ' value:' + hash[key]));
}

Map.prototype.forEach()を使う

@think49 さんのコメントよりMap.prototype.forEach()を使う方法

Map.prototype.forEach() - JavaScript | MDN

{
  let map = new Map([['key0', 'value0'], ['key1', 'value1']]);

  map.forEach(function (value, key) {
    console.log('key:' + key + ' value:' + value);
  });
}

Object.entries()を使う

@hikaru_oao さんのコメントよりObject.entries()を使う方法

{
  let hash = {
    key0: "value0", key1: "value1"
  };

  for (let [key, value] of Object.entries(hash)) {
    console.log('key:' + key + ' value:' + value);
  }
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした