teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問二つの配列をそれぞれkeyとvalueにして一つの連想配列にする方法

編集履歴

回答編集履歴

3

そのコードを書いた理由、new Mapのコード

2016/11/09 11:47

投稿

think49
think49

スコア18166

test CHANGED
@@ -1,3 +1,7 @@
1
+ ### 要素数が必ず1になる
2
+
3
+
4
+
1
5
  > ```JavaScript
2
6
 
3
7
  > keys = ["name", "address", "tell" ];
@@ -6,11 +10,11 @@
6
10
 
7
11
  > ```
8
12
 
9
- >
13
+ >
10
14
 
11
15
  > こうしたい↓
12
16
 
13
- >
17
+ >
14
18
 
15
19
  > ```JavaScript
16
20
 
@@ -22,7 +26,7 @@
22
26
 
23
27
  その前提条件ですと**配列の要素数が必ず1になる**ので配列を使う意義が見いだせません。
24
28
 
25
- 元となるデータにさらに条件があるのでは…。
29
+ 元となるデータに更に条件があるのでは…。
26
30
 
27
31
 
28
32
 
@@ -56,6 +60,10 @@
56
60
 
57
61
 
58
62
 
63
+ ### Array.prototype.map
64
+
65
+
66
+
59
67
  **(2016/11/09 13:54追記)**
60
68
 
61
69
 
@@ -120,4 +128,142 @@
120
128
 
121
129
 
122
130
 
131
+ **(2016/11/09 20:47 追記)**
132
+
133
+
134
+
135
+ > 変な質問なのですが、なぜそのコードにされたのですか。
136
+
137
+
138
+
139
+ まず、私は「短いコード」よりも「可読性」「保守性」「厳密性」を重視しています。
140
+
141
+
142
+
143
+ - `for` 文では存在しないプロパティを走査する事がある為、`hasOwnProperty` を入れました
144
+
145
+ - `{}` では意図せず `[[Prototype]]` 上のプロパティを拾う事がある為、`Object.create(null)` を使いました
146
+
147
+ - テストした結果を確認する為に `JSON.stringify()` を使いました(`console.log` や `console.dir` でも確認可能ですが、出力結果をここに張り付けるなら `JSON.stringify` は重宝します)
148
+
149
+ - `Array.prototype.map` の第一引数に関数式を指定するとGCの扱いが微妙かつ、関数呼び出しする度に関数オブジェクトが生成される為、パフォーマンスを考慮してクロージャにコールバック関数を閉じ込めました
150
+
151
+
152
+
153
+ それぞれに意味があって書いているコードですので私はそれを「必要なもの」と考えています。
154
+
155
+ 逆に言えば、例外処理を甘くしてキャッシュする変数を減らせば短く書く事は可能ですが、そういうコードは思わぬところで想定外の動作を引き起こし、混乱を生むので良くないと思ってます。
156
+
157
+ 良いコードは想定外の値が与えられたときに動かない、か原因に気が付きやすい設計をしています。
158
+
159
+
160
+
161
+ 配列を回す手段は主に4つあります。
162
+
163
+
164
+
165
+ - `while` 文
166
+
167
+ - `for` 文
168
+
169
+ - `for-of` 文
170
+
171
+ - `Array.prototype` 系メソッド
172
+
173
+
174
+
175
+ 自身の嗜好を重んずるなら私は `for` or `while` 文のネストを採用しますが、この手のコードは敬遠される傾向があるように思います。
176
+
177
+ ですので、万人受けするであろう `Array.prototype.map` を採用しました。
178
+
179
+ 一通りの手段を熟知している人であれば、どの技術を採用するかは個人の好みだと思います。
180
+
181
+ k-s さんにとって `for` 文のネストが読みやすかったのであれば、`for` 文が最も k-s さんに親しみ深い使い慣れたものだったのでしょう。
182
+
183
+
184
+
185
+ ### new Map (ES6)
186
+
187
+
188
+
189
+ 完全に私の好みで書いていいのなら私は `Map` を使います。
190
+
191
+
192
+
193
+ ```JavaScript
194
+
195
+ 'use strict';
196
+
197
+ var arrayToMap = (function (isArray, Map) {
198
+
199
+ return function arrayToMap (array, keys) {
200
+
201
+ var results = [];
202
+
203
+
204
+
205
+ for (var i = 0, l = array.length, values; i < l; ++i) {
206
+
207
+ values = array[i];
208
+
209
+
210
+
211
+ if (isArray(values)) {
212
+
213
+ for (var j = 0, m = values.length, entries = []; j < m; ++j) {
214
+
215
+ if (values.hasOwnProperty(j) && keys.hasOwnProperty(j)) {
216
+
217
+ entries.push([keys[j], values[j]]);
218
+
219
+ }
220
+
221
+ }
222
+
223
+
224
+
225
+ results.push(new Map(entries));
226
+
227
+ }
228
+
229
+ }
230
+
231
+
232
+
233
+ return results;
234
+
235
+ };
236
+
237
+ }(Array.isArray, Map));
238
+
239
+
240
+
241
+ var keys = ['name', 'address', 'tell' ],
242
+
243
+ values = [['東京都庁舎', '東京都新宿区歌舞伎町1-7-1', '03-5321-1111'],['埼玉県庁舎', '埼玉県さいたま市浦和区高砂3-15-1', '048-824-2111']],
244
+
245
+ about = arrayToMap(values, keys),
246
+
247
+ array = [];
248
+
249
+
250
+
251
+ for (let map of about) {
252
+
253
+ array.push([...map]);
254
+
255
+ }
256
+
257
+ console.log(JSON.stringify(array)); // [[["name","東京都庁舎"],["address","東京都新宿区歌舞伎町1-7-1"],["tell","03-5321-1111"]],[["name","埼玉県庁舎"],["address","埼玉県さいたま市浦和区高砂3-15-1"],["tell","048-824-2111"]]]
258
+
259
+ ```
260
+
261
+
262
+
263
+ 基本的に `new Map` はオブジェクト初期化子の上位互換ですので、値を取りだすときにも扱いやすいです。
264
+
265
+ 後々、`JSON` 化する予定があるのなら `Map` からオブジェクト初期化子に変換するコードを書きます。
266
+
267
+
268
+
123
269
  Re: k-s さん

2

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

2016/11/09 11:47

投稿

think49
think49

スコア18166

test CHANGED
@@ -56,4 +56,68 @@
56
56
 
57
57
 
58
58
 
59
+ **(2016/11/09 13:54追記)**
60
+
61
+
62
+
63
+ 追記された条件を元にコードを書き換えました。
64
+
65
+
66
+
67
+ ```JavaScript
68
+
69
+ 'use strict';
70
+
71
+ var arrayToMap = (function () {
72
+
73
+ function mapfn (values) {
74
+
75
+ for (var i = 0, l = this.length, obj = Object.create(null); i < l; ++i) {
76
+
77
+ if (values.hasOwnProperty(i)) {
78
+
79
+ obj[this[i]] = values[i];
80
+
81
+ }
82
+
83
+ }
84
+
85
+
86
+
87
+ return obj;
88
+
89
+ }
90
+
91
+
92
+
93
+ return function arrayToMap (array, keys) {
94
+
95
+ return array.map(mapfn, keys);
96
+
97
+ }
98
+
99
+ }());
100
+
101
+
102
+
103
+ var keys = ['name', 'address', 'tell' ],
104
+
105
+ values = [
106
+
107
+ ['東京都庁舎', '東京都新宿区歌舞伎町1-7-1', '03-5321-1111'],
108
+
109
+ ['埼玉県庁舎', '埼玉県さいたま市浦和区高砂3-15-1', '048-824-2111']
110
+
111
+ ];
112
+
113
+
114
+
115
+ var about = arrayToMap(values, keys);
116
+
117
+ console.log(JSON.stringify(about)); // [{"name":"東京都庁舎","address":"東京都新宿区歌舞伎町1-7-1","tell":"03-5321-1111"},{"name":"埼玉県庁舎","address":"埼玉県さいたま市浦和区高砂3-15-1","tell":"048-824-2111"}]
118
+
119
+ ```
120
+
121
+
122
+
59
123
  Re: k-s さん

1

引用文を追記

2016/11/09 04:54

投稿

think49
think49

スコア18166

test CHANGED
@@ -1,4 +1,26 @@
1
+ > ```JavaScript
2
+
3
+ > keys = ["name", "address", "tell" ];
4
+
5
+ > values = ["東京都庁舎", "東京都新宿区歌舞伎町1-7-1", "03-5321-1111"];
6
+
7
+ > ```
8
+
9
+ >
10
+
11
+ > こうしたい↓
12
+
13
+ >
14
+
15
+ > ```JavaScript
16
+
17
+ > about = [{"name":"東京都庁舎", "address":"東京都新宿区歌舞伎町1-7-1", "tell":"03-5321-1111"}];
18
+
19
+ > ```
20
+
21
+
22
+
1
- その前提条件ですと配列の要素数が必ず1になるので配列を使う意義が見いだせません。
23
+ その前提条件ですと**配列の要素数が必ず1になる**ので配列を使う意義が見いだせません。
2
24
 
3
25
  元となるデータにさらに条件があるのでは…。
4
26