LoginSignup
244
217

More than 3 years have passed since last update.

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

Last updated at Posted at 2016-02-19

概要

変数を連想配列に入れるのが大好きで、使用頻度がめちゃくちゃ高い割に毎回忘れる連想配列の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);
  }
}
244
217
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
244
217