二つの配列をそれぞれkeyとvalueにして一つの連想配列にする方法

Question

組み込み関数があれば楽だなと思ったのですが、どうやら無いようなので。

keys = ["name", "address", "tell" ];

values = ["東京都庁舎", "東京都新宿区歌舞伎町1-7-1", "03-5321-1111"];

こうしたい↓

about = [{"name":"東京都庁舎", "address":"東京都新宿区歌舞伎町1-7-1", "tell":"03-5321-1111"}];

一番楽な方法ってどんなのでしょうか。

参考：Qiita - jQueryで使える配列系便利関数
参考：Webkaru - 2つの配列から連想配列を作成 - array_combine()

---

修正

すみません、肝心の部分が抜けておりました。以下が修正後の質問です。

keys = ["name", "address", "tell" ];

values = [
["東京都庁舎", "東京都新宿区歌舞伎町1-7-1", "03-5321-1111"],
["埼玉県庁舎", "埼玉県さいたま市浦和区高砂3-15-1", "048-824-2111"]
];

こうしたい↓

about = [
{"name":"東京都庁舎", "address":"東京都新宿区歌舞伎町1-7-1", "tell":"03-5321-1111"},
{"name":"埼玉県庁舎", "address":"埼玉県さいたま市浦和区高砂3-15-1", "tell":"048-824-2111"}
];

Comments

[think49]

コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[退会済みユーザー]

修正を行いました。ただ、個人的にはコードブロックは線でエリアが表現されるので可読性が悪いように思います。

[think49]

そうですか…。個人的にはボーダーでコードブロックと本文が区切られるので視認性が高く、シンタックスハイライトで分かりやすく、固定幅フォントでインデントも揃うのでコードブロックを使っています。

Answer 1

要素数が必ず1になる

keys = ["name", "address", "tell" ];
values = ["東京都庁舎", "東京都新宿区歌舞伎町1-7-1", "03-5321-1111"];

こうしたい↓

about = [{"name":"東京都庁舎", "address":"東京都新宿区歌舞伎町1-7-1", "tell":"03-5321-1111"}];

その前提条件ですと配列の要素数が必ず1になるので配列を使う意義が見いだせません。
元となるデータに更に条件があるのでは…。

var keys = ["name", "address", "tell" ],
    values = ["東京都庁舎", "東京都新宿区歌舞伎町1-7-1", "03-5321-1111"],
    array = [];

for (var i = 0, l = keys.length, obj = Object.create(null); i < l; ++i) {
  if (values.hasOwnProperty(i)) {
    obj[keys[i]] = values[i];
  }
}

array[0] = obj;
console.log(JSON.stringify(array)); // [{"name":"東京都庁舎","address":"東京都新宿区歌舞伎町1-7-1","tell":"03-5321-1111"}]

Array.prototype.map

(2016/11/09 13:54追記)

追記された条件を元にコードを書き換えました。

'use strict';
var arrayToMap = (function () {
  function mapfn (values) {
    for (var i = 0, l = this.length, obj = Object.create(null); i < l; ++i) {
      if (values.hasOwnProperty(i)) {
        obj[this[i]] = values[i];
      }
    }

    return obj;
  }

  return function arrayToMap (array, keys) {
    return array.map(mapfn, keys);
  }
}());

var keys = ['name', 'address', 'tell' ],
    values = [
      ['東京都庁舎', '東京都新宿区歌舞伎町1-7-1', '03-5321-1111'],
      ['埼玉県庁舎', '埼玉県さいたま市浦和区高砂3-15-1', '048-824-2111']
    ];

var about = arrayToMap(values, keys);
console.log(JSON.stringify(about)); // [{"name":"東京都庁舎","address":"東京都新宿区歌舞伎町1-7-1","tell":"03-5321-1111"},{"name":"埼玉県庁舎","address":"埼玉県さいたま市浦和区高砂3-15-1","tell":"048-824-2111"}]

(2016/11/09 20:47 追記)

変な質問なのですが、なぜそのコードにされたのですか。

まず、私は「短いコード」よりも「可読性」「保守性」「厳密性」を重視しています。

• for 文では存在しないプロパティを走査する事がある為、hasOwnProperty を入れました
• {} では意図せず [[Prototype]] 上のプロパティを拾う事がある為、Object.create(null) を使いました
• テストした結果を確認する為に JSON.stringify() を使いました(console.log や console.dir でも確認可能ですが、出力結果をここに張り付けるなら JSON.stringify は重宝します)
• Array.prototype.map の第一引数に関数式を指定するとGCの扱いが微妙かつ、関数呼び出しする度に関数オブジェクトが生成される為、パフォーマンスを考慮してクロージャにコールバック関数を閉じ込めました

それぞれに意味があって書いているコードですので私はそれを「必要なもの」と考えています。
逆に言えば、例外処理を甘くしてキャッシュする変数を減らせば短く書く事は可能ですが、そういうコードは思わぬところで想定外の動作を引き起こし、混乱を生むので良くないと思ってます。
良いコードは想定外の値が与えられたときに動かない、か原因に気が付きやすい設計をしています。

配列を回す手段は主に4つあります。

• while 文
• for 文
• for-of 文
• Array.prototype 系メソッド

自身の嗜好を重んずるなら私は for or while 文のネストを採用しますが、この手のコードは敬遠される傾向があるように思います。
ですので、万人受けするであろう Array.prototype.map を採用しました。
一通りの手段を熟知している人であれば、どの技術を採用するかは個人の好みだと思います。
k-s さんにとって for 文のネストが読みやすかったのであれば、for 文が最も k-s さんに親しみ深い使い慣れたものだったのでしょう。

new Map (ES6)

完全に私の好みで書いていいのなら私は Map を使います。

'use strict';
var arrayToMap = (function (isArray, Map) {
  return function arrayToMap (array, keys) {
    var results = [];

    for (var i = 0, l = array.length, values; i < l; ++i) {
      values = array[i];

      if (isArray(values)) {
        for (var j = 0, m = values.length, entries = []; j < m; ++j) {
          if (values.hasOwnProperty(j) && keys.hasOwnProperty(j)) {
            entries.push([keys[j], values[j]]);
          }
        }

        results.push(new Map(entries));
      }
    }

    return results;
  };
}(Array.isArray, Map));

var keys = ['name', 'address', 'tell' ],
    values = [['東京都庁舎', '東京都新宿区歌舞伎町1-7-1', '03-5321-1111'],['埼玉県庁舎', '埼玉県さいたま市浦和区高砂3-15-1', '048-824-2111']],
    about = arrayToMap(values, keys),
    array = [];

for (let map of about) {
  array.push([...map]);
}
console.log(JSON.stringify(array)); // [[["name","東京都庁舎"],["address","東京都新宿区歌舞伎町1-7-1"],["tell","03-5321-1111"]],[["name","埼玉県庁舎"],["address","埼玉県さいたま市浦和区高砂3-15-1"],["tell","048-824-2111"]]]

基本的に new Map はオブジェクト初期化子の上位互換ですので、値を取りだすときにも扱いやすいです。
後々、JSON 化する予定があるのなら Map からオブジェクト初期化子に変換するコードを書きます。

Re: k-s さん

Comments

[退会済みユーザー]

色々と説明を端折ってしまい申し訳ございません。
実際には複数件のデータを扱います。今気付いたのですがこの質問だと若干まずそうです。
質問を修正いたします。

[think49]

親記事を編集しました。
質問文のコードですが、markdownで書いて頂けますようお願いします。
https://teratail.com/help

[退会済みユーザー]

今のところ個人的にはyambejpのコードの方が短くて良いなと思っています。
ただ、think49さんはjavascriptで総合1位の方で、評価も現時点で3となっているのが気になりました。
変な質問なのですが、なぜそのコードにされたのですか。特にJSON.stringify(about)の部分は、実は私の質問の背景にとってものすごく重要なコードでした。なぜその一文を入れたのか、後学のために教えていただけないでしょうか。

[think49]

親記事に追記しました。

> コードの方が短くて良い
これについては https://teratail.com/questions/50611 の LLman さんと同様の考えを持っています。
同じことを実装する為により短くできるなら意味がありますが、何らかの意図があってコードが長くなっているのならそれは無駄ではなく、必要なものだと考えます。
とはいえ、「その部分に必要性を感じるか」は個人の考え方の違いがあるとは思います。

[退会済みユーザー]

丁寧な回答ありがとうございます。正直に言うとthink49さんのコードは自分にはまだ早いようで、半分も理解できていません。質問して返ってくる量と質が半端じゃないです。
今後理解できるようにします。
本当にありがとうございます。

Answer 2

こういう書き方をしてよいのかちょっと微妙ですがどうでしょう？

var keys = ["name", "address", "tell" ];
var values = [
["東京都庁舎", "東京都新宿区歌舞伎町1-7-1", "03-5321-1111"],
["埼玉県庁舎", "埼玉県さいたま市浦和区高砂3-15-1", "048-824-2111"]
];
var about =[];
for(var i=0;i<values.length;i++){
  about.push({});
  for(var j=0;j<keys.length;j++){
    about[i][keys[j]]=values[i][j];
  }
}
console.log(about);

Comments

[退会済みユーザー]

ほぼ同じコードになりました。自分的にはfor文の入れ子ってあまり好きではないのですが、これが一番わかりやすいです。

[退会済みユーザー]

ちなみになんですが、自分は
for(var i=0;i<values.length;i++){
about[i] = {};
for(var j=0;j<keys.length;j++){
about[i][keys[j]]=values[i][j];
}
}
と書いていました。これでも特に問題なく動いたのですが、後になって「そういえばpushしてるわけでもないのにabout[i]={}としただけでどんどん追加されていくんだ」と思いました。何故なんでしょうか。

[yambejp]

about配列ですから未設定のabout[i]に値（今回はオブジェクト）を代入すれば
新しい要素が追加になります。
pushは明示的に追加している感をだしたいだけなので
結果的には同じです