205
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

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);
  }
}

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
205
Help us understand the problem. What are the problem?