teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問連想配列の要素の一部を書換えたいです

編集履歴

回答編集履歴

5

テキスト追加

2021/12/07 00:01

投稿

退会済みユーザー
test CHANGED
@@ -126,7 +126,7 @@
126
126
 
127
127
 
128
128
 
129
- #### (1) dict2 を使う案
129
+ #### (1) dictからdict2を作る案
130
130
 
131
131
 
132
132
 

4

テキスト追加

2021/12/07 00:01

投稿

退会済みユーザー
test CHANGED
@@ -138,31 +138,31 @@
138
138
 
139
139
 
140
140
 
141
- ```json
141
+ ```javascript
142
142
 
143
143
  {
144
144
 
145
- "lll":{
145
+ lll: {
146
-
146
+
147
- "classification":"エルエル",
147
+ classification: "エルエル",
148
-
148
+
149
- "color":"#4474E2"
149
+ color: "#4474E2"
150
150
 
151
151
  },
152
152
 
153
- "xxx":{
153
+ xxx:{
154
-
154
+
155
- "classification":"エックス",
155
+ classification: "エックス",
156
-
156
+
157
- "color":"#000000"
157
+ color: "#000000"
158
158
 
159
159
  },
160
160
 
161
- "sss":{
161
+ sss: {
162
-
162
+
163
- "classification":"エスエス",
163
+ classification: "エスエス",
164
-
164
+
165
- "color":"#FFFFFF"
165
+ color: "#FFFFFF"
166
166
 
167
167
  }
168
168
 
@@ -192,4 +192,12 @@
192
192
 
193
193
 
194
194
 
195
- なお、上記のサンプル #3 と #4 では、`newData`の要素の`count`プロパティだけが、元の配列`data`の要素の`count`プロパティの値が引き継がれることを確認しやすくするため、`data`要素の`count`を、11, 22, 33 にしています。
195
+ なお、上記（１）、(2)のサンプルコードでは、`newData`の要素の`count`プロパティだけが、元の配列`data`の要素の`count`プロパティの値が引き継がれることを確認しやすくするため、
196
+
197
+ - `data`要素の`count`を、11, 22, 33 に
198
+
199
+ - `dict`要素の`color`を、#4474E2, #000000, #FFFFFF　に
200
+
201
+
202
+
203
+ しています。

3

テキスト追加

2021/12/06 23:24

投稿

退会済みユーザー
test CHANGED
@@ -105,3 +105,91 @@
105
105
  ```
106
106
 
107
107
  ???? [サンプル#2 @codepen](https://codepen.io/kilesa/pen/ZEXQaqm?editors=0012)
108
+
109
+
110
+
111
+ ### 追記
112
+
113
+
114
+
115
+ コメントからの
116
+
117
+
118
+
119
+ > ちなみにdictのcolorも上書きしたかった
120
+
121
+
122
+
123
+ についてですが、つまり colorもdict の該当要素の color の値が反映されるようにしたい、ということでしょうか？
124
+
125
+ その場合、こうします。
126
+
127
+
128
+
129
+ #### (1) dict2 を使う案
130
+
131
+
132
+
133
+ ???? [サンプル#3 @codepen](https://codepen.io/kilesa/pen/LYzGqdr?editors=0012)
134
+
135
+
136
+
137
+ dict2 の作り方を変えて、dict2 が以下になるようにしています。
138
+
139
+
140
+
141
+ ```json
142
+
143
+ {
144
+
145
+ "lll":{
146
+
147
+ "classification":"エルエル",
148
+
149
+ "color":"#4474E2"
150
+
151
+ },
152
+
153
+ "xxx":{
154
+
155
+ "classification":"エックス",
156
+
157
+ "color":"#000000"
158
+
159
+ },
160
+
161
+ "sss":{
162
+
163
+ "classification":"エスエス",
164
+
165
+ "color":"#FFFFFF"
166
+
167
+ }
168
+
169
+ }
170
+
171
+ ```
172
+
173
+
174
+
175
+ こうすることで、`var newElem`を作るときの `Object.assign()`の引数に与える３番目のオブジェクトは、`dict2[elem.classification]`
176
+
177
+ になります。
178
+
179
+
180
+
181
+
182
+
183
+ #### (2) map を使う案
184
+
185
+
186
+
187
+ map　を使う方も対応させてみました。
188
+
189
+
190
+
191
+ ???? [サンプル#4 @codepen](https://codepen.io/kilesa/pen/WNZrPyQ?editors=0012)
192
+
193
+
194
+
195
+ なお、上記のサンプル #3 と #4 では、`newData`の要素の`count`プロパティだけが、元の配列`data`の要素の`count`プロパティの値が引き継がれることを確認しやすくするため、`data`要素の`count`を、11, 22, 33 にしています。

2

テキスト追加

2021/12/06 23:19

投稿

退会済みユーザー
test CHANGED
@@ -1,4 +1,4 @@
1
- ご質問にあるコードをほぼ活かすように、最低限の修正でやるならば、`dict`から、以下のような `dict2`
1
+ ご質問にあるコードをほぼ活かすべく最低限の修正でやるならば、`dict`から以下のような `dict2`
2
2
 
3
3
 
4
4
 
@@ -20,13 +20,7 @@
20
20
 
21
21
  ```
22
22
 
23
-
24
-
25
- を作っておいて、`elem.classification`をキーとしてその日本語を引いてくるときのマップとして この`dict2`を使えばよいです。
23
+ を作っておき、`newData`の要素を作るところで、`elem.classification`をキーとしてその日本語を引いてくるときのマップとしてこの`dict2`を使えばよいです。
26
-
27
-
28
-
29
-
30
24
 
31
25
  ```diff
32
26
 
@@ -62,13 +56,13 @@
62
56
 
63
57
 
64
58
 
65
- なお、上記による`dict2` には Object.assign({}, ...dict) によって、`dict`の最後の要素が持つ、`count` と `color` も残ります。その点が気になるのであれば、
59
+ なお、上記による`dict2` には `Object.assign({}, ...dict)` によって、`dict`の最後の要素が持つ、`count` と `color` も残ります。その点が気になるのであれば、
66
60
 
67
61
 
68
62
 
69
63
  ```diff
70
64
 
71
- + var dict2 = Object.assign({}, ...dict);
65
+ var dict2 = Object.assign({}, ...dict);
72
66
 
73
67
 
74
68
 

1

テキスト追加

2021/12/06 15:14

投稿

退会済みユーザー
test CHANGED
@@ -83,3 +83,31 @@
83
83
 
84
84
 
85
85
  ???? [サンプル @codepen](https://codepen.io/kilesa/pen/PoJZOZZ?editors=0012)
86
+
87
+
88
+
89
+
90
+
91
+ ### 別案
92
+
93
+
94
+
95
+ map と find および分割代入を使って、こんなのでもいけますよ。
96
+
97
+
98
+
99
+ ```javascript
100
+
101
+ var newData = data.map(({ classification: key, count, color }) => ({
102
+
103
+ classification: dict.find(e => key in e)[key],
104
+
105
+ count,
106
+
107
+ color
108
+
109
+ }));
110
+
111
+ ```
112
+
113
+ ???? [サンプル#2 @codepen](https://codepen.io/kilesa/pen/ZEXQaqm?editors=0012)