回答編集履歴
18
テキスト修正
test
CHANGED
@@ -116,7 +116,7 @@
|
|
116
116
|
|
117
117
|
|
118
118
|
|
119
|
-
### 追記
|
119
|
+
### 追記1
|
120
120
|
|
121
121
|
|
122
122
|
|
@@ -141,3 +141,75 @@
|
|
141
141
|
|
142
142
|
|
143
143
|
[lodash](https://lodash.com/) はオブジェクトや配列の操作で便利なメソッドを提供しており、用途にうまく合ったメソッドがみつかると、コードを短くできることがあります。
|
144
|
+
|
145
|
+
|
146
|
+
|
147
|
+
### 追記2
|
148
|
+
|
149
|
+
|
150
|
+
|
151
|
+
`result5` からの合計処理だけではなく、ご質問に挙げられているソースコード全体について、リファクタ案を書いてみましたので、参考までに提示します。作成したコードは以下に上げています。
|
152
|
+
|
153
|
+
|
154
|
+
|
155
|
+
- GitHub: [jun68ykt/q204950](https://github.com/jun68ykt/q204950)
|
156
|
+
|
157
|
+
|
158
|
+
|
159
|
+
最終的な修正後のJavascriptのコードは以下です。
|
160
|
+
|
161
|
+
|
162
|
+
|
163
|
+
- jun68ykt/q204950: [main.js](https://github.com/jun68ykt/q204950/blob/master/main.js)
|
164
|
+
|
165
|
+
|
166
|
+
|
167
|
+
以下、各コミットを順を追って説明します。
|
168
|
+
|
169
|
+
|
170
|
+
|
171
|
+
- [initial commit](https://git.io/fj7WA) では、ご質問に挙げられているコードをそのままコピペしたうえで、HTML と JavaScript のファイルを分けました。
|
172
|
+
|
173
|
+
|
174
|
+
|
175
|
+
|
176
|
+
|
177
|
+
- [末尾に空文字列がある場合、これを除去](https://git.io/fj7Wh) :result2 を作るときに、元のコードだと、末尾に空文字列ができてしまうことがあるので、これを除く filter を追加しています。
|
178
|
+
|
179
|
+
|
180
|
+
|
181
|
+
|
182
|
+
|
183
|
+
- [result3 の作成にmapとsliceを使用](https://git.io/fj7lv): result2 から result3 を作る際に、map と slice を使うと短くできます。
|
184
|
+
|
185
|
+
|
186
|
+
|
187
|
+
|
188
|
+
|
189
|
+
- 以下は、 result3 から result4 を作る処理を3段階でリファクタしました。
|
190
|
+
|
191
|
+
(1) [result4 の作成部分を修正(その1)](https://git.io/fj7lU): 元のコードにある、 divide はかなり力作という感じで恐縮ですが、 `.divide(1)` と、要素が1個の配列に区切るならば、修正後のように短く書けます。
|
192
|
+
|
193
|
+
(2) [result4 の作成部分を修正(その2)](https://git.io/fj7lk) : result4 を作る2段階目です。map を二重にして、unshift を使わずに長さが 3 の配列を作ります。
|
194
|
+
|
195
|
+
- (3) [result4 の作成部分を修正(その3)](https://git.io/fj7lC) :上記(1)と(2)の処理をひとつにまとめました。
|
196
|
+
|
197
|
+
|
198
|
+
|
199
|
+
|
200
|
+
|
201
|
+
- [result5 の作成にreduceとfilterを使用](https://git.io/fj7l8) :result4 から result5 を作る処理を reduce と filter を使ってみました。元のコードでは、result5 は配列ですが、 `a`, `b` などがキーになるのでオブジェクトが得られるようにしています。
|
202
|
+
|
203
|
+
|
204
|
+
|
205
|
+
|
206
|
+
|
207
|
+
- 以下の2つは、先の回答に書いたコードを追加したものです。
|
208
|
+
|
209
|
+
(1) [result6 の作成を追加](https://git.io/fj7lu)
|
210
|
+
|
211
|
+
(2) [lodash の利用](https://git.io/fj7lz)
|
212
|
+
|
213
|
+
|
214
|
+
|
215
|
+
配列のメソッド、[map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) や [reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce), [filter](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) と[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)は、配列やオブジェクトを処理するプログラムを書くときに、いろいろな場面で重宝します。
|
17
テキスト修正
test
CHANGED
@@ -30,7 +30,7 @@
|
|
30
30
|
|
31
31
|
|
32
32
|
|
33
|
-
の内容を持つオブジェクトを、 `result6` という変数
|
33
|
+
の内容を持つオブジェクトを、 `result6` という変数に得るためのコードを示します。
|
34
34
|
|
35
35
|
|
36
36
|
|
16
テキスト修正
test
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
|
4
4
|
|
5
|
-
ご質問
|
5
|
+
ご質問を拝読しまして、 `result5` は以下のようなオブジェクトであると把握しました。
|
6
6
|
|
7
7
|
|
8
8
|
|
@@ -22,15 +22,15 @@
|
|
22
22
|
|
23
23
|
```
|
24
24
|
|
25
|
-
この回答では、上記のオブジェクト
|
25
|
+
この回答では、上記のオブジェクト `result5` に含まれる配列に対して集計処理を行って、ご質問にある
|
26
26
|
|
27
27
|
|
28
28
|
|
29
|
-
> 最終的には配列内のa,b,c,dは消し、以下の様な形
|
29
|
+
> 最終的には配列内のa,b,c,dは消し、以下の様な形
|
30
30
|
|
31
31
|
|
32
32
|
|
33
|
-
|
33
|
+
の内容を持つオブジェクトを、 `result6` という変数として得るためのコードを示します。
|
34
34
|
|
35
35
|
|
36
36
|
|
15
テキスト修正
test
CHANGED
@@ -120,7 +120,7 @@
|
|
120
120
|
|
121
121
|
|
122
122
|
|
123
|
-
補足ですが、上記に挙げたコードの中で、
|
123
|
+
補足ですが、上記に挙げたコードの中で、 `result5` から `result6` を得る以下の行
|
124
124
|
|
125
125
|
```javascript
|
126
126
|
|
14
テキスト修正
test
CHANGED
@@ -1,4 +1,36 @@
|
|
1
1
|
こんにちは
|
2
|
+
|
3
|
+
|
4
|
+
|
5
|
+
ご質問の理解として、 `result5` は、以下のようなオブジェクトであると認識しました。
|
6
|
+
|
7
|
+
|
8
|
+
|
9
|
+
```javascript
|
10
|
+
|
11
|
+
{
|
12
|
+
|
13
|
+
a: [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']],
|
14
|
+
|
15
|
+
b: [['x', 100, 'b'], ['x', 10, 'b'], ['x', 100, 'b']],
|
16
|
+
|
17
|
+
c: [['y', 100, 'c'], ['y', 10, 'c'], ['x', 1, 'c']],
|
18
|
+
|
19
|
+
d: [['x', 1, 'd'], ['x', 10, 'd']]
|
20
|
+
|
21
|
+
}
|
22
|
+
|
23
|
+
```
|
24
|
+
|
25
|
+
この回答では、上記のオブジェクトである `result5` に対して集計処理を行って、
|
26
|
+
|
27
|
+
|
28
|
+
|
29
|
+
> 最終的には配列内のa,b,c,dは消し、以下の様な形にしたいです。
|
30
|
+
|
31
|
+
|
32
|
+
|
33
|
+
と書かれている、望ましい内容を持つオブジェクトを、 `result6` という変数として得るためのコードを示します。
|
2
34
|
|
3
35
|
|
4
36
|
|
@@ -56,25 +88,7 @@
|
|
56
88
|
|
57
89
|
|
58
90
|
|
59
|
-
上記の `summarize(ary)`を使うと、
|
91
|
+
上記の `summarize(ary)`を使うと、冒頭に書いた `result5` から `result6` を得るには、以下のようにすればよいです。
|
60
|
-
|
61
|
-
```javascript
|
62
|
-
|
63
|
-
const result5 = {
|
64
|
-
|
65
|
-
a: [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']],
|
66
|
-
|
67
|
-
b: [['x', 100, 'b'], ['x', 10, 'b'], ['x', 100, 'b']],
|
68
|
-
|
69
|
-
c: [['y', 100, 'c'], ['y', 10, 'c'], ['x', 1, 'c']],
|
70
|
-
|
71
|
-
d: [['x', 1, 'd'], ['x', 10, 'd']]
|
72
|
-
|
73
|
-
};
|
74
|
-
|
75
|
-
```
|
76
|
-
|
77
|
-
の各エントリの値となっている配列を summarizeした配列に置き換えるには、以下のようにすればよいです。
|
78
92
|
|
79
93
|
|
80
94
|
|
@@ -106,7 +120,7 @@
|
|
106
120
|
|
107
121
|
|
108
122
|
|
109
|
-
補足ですが、上記に挙げたコードの中で、以下の
|
123
|
+
補足ですが、上記に挙げたコードの中で、以下の `result5` から `result6` を得る行
|
110
124
|
|
111
125
|
```javascript
|
112
126
|
|
13
テキスト修正
test
CHANGED
@@ -28,7 +28,7 @@
|
|
28
28
|
|
29
29
|
```
|
30
30
|
|
31
|
-
が与えられると、ご質問の要件に沿って、各要素の配列の先頭の文字ごとに、2番目の要素である数値を足し上げ
|
31
|
+
が与えられると、ご質問の要件に沿って、各要素の配列の先頭の文字ごとに、2番目の要素である数値を足し上げた配列
|
32
32
|
|
33
33
|
```javascript
|
34
34
|
|
12
テキスト修正
test
CHANGED
@@ -60,7 +60,7 @@
|
|
60
60
|
|
61
61
|
```javascript
|
62
62
|
|
63
|
-
|
63
|
+
const result5 = {
|
64
64
|
|
65
65
|
a: [['x', 1000, 'a'], ['y', 1000, 'a'], ['y', 1, 'a'], ['x', 1000, 'a']],
|
66
66
|
|
@@ -80,13 +80,13 @@
|
|
80
80
|
|
81
81
|
```javascript
|
82
82
|
|
83
|
-
result
|
83
|
+
const result6 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
|
84
84
|
|
85
85
|
```
|
86
86
|
|
87
87
|
|
88
88
|
|
89
|
-
上記により、`result
|
89
|
+
上記により、`result6` には各配列が集計されているオブジェクトが入ります。
|
90
90
|
|
91
91
|
|
92
92
|
|
@@ -94,7 +94,7 @@
|
|
94
94
|
|
95
95
|
|
96
96
|
|
97
|
-
- **動作確認用:** [https://jsfiddle.net/jun68ykt/sfuvgxm5/
|
97
|
+
- **動作確認用:** [https://jsfiddle.net/jun68ykt/sfuvgxm5/6/](https://jsfiddle.net/jun68ykt/sfuvgxm5/6/)
|
98
98
|
|
99
99
|
|
100
100
|
|
@@ -110,7 +110,7 @@
|
|
110
110
|
|
111
111
|
```javascript
|
112
112
|
|
113
|
-
result
|
113
|
+
const result6 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
|
114
114
|
|
115
115
|
```
|
116
116
|
|
@@ -118,11 +118,11 @@
|
|
118
118
|
|
119
119
|
```javascript
|
120
120
|
|
121
|
-
result
|
121
|
+
const result6 = _.mapValues(result5, summarize);
|
122
122
|
|
123
123
|
```
|
124
124
|
|
125
|
-
- **動作確認用:** [https://jsfiddle.net/jun68ykt/3tounhgL/
|
125
|
+
- **動作確認用:** [https://jsfiddle.net/jun68ykt/3tounhgL/3/](https://jsfiddle.net/jun68ykt/3tounhgL/3/)
|
126
126
|
|
127
127
|
|
128
128
|
|
11
テキスト修正
test
CHANGED
@@ -114,7 +114,7 @@
|
|
114
114
|
|
115
115
|
```
|
116
116
|
|
117
|
-
については、
|
117
|
+
については、lodash の [_.mapValues](https://lodash.com/docs/4.17.15#mapValues) を使うと、以下のように少し短く書けます。
|
118
118
|
|
119
119
|
```javascript
|
120
120
|
|
@@ -123,3 +123,7 @@
|
|
123
123
|
```
|
124
124
|
|
125
125
|
- **動作確認用:** [https://jsfiddle.net/jun68ykt/3tounhgL/2/](https://jsfiddle.net/jun68ykt/3tounhgL/2/)
|
126
|
+
|
127
|
+
|
128
|
+
|
129
|
+
[lodash](https://lodash.com/) はオブジェクトや配列の操作で便利なメソッドを提供しており、用途にうまく合ったメソッドがみつかると、コードを短くできることがあります。
|
10
テキスト修正
test
CHANGED
@@ -99,3 +99,27 @@
|
|
99
99
|
|
100
100
|
|
101
101
|
以上、参考になれば幸いです。
|
102
|
+
|
103
|
+
|
104
|
+
|
105
|
+
### 追記
|
106
|
+
|
107
|
+
|
108
|
+
|
109
|
+
補足ですが、上記に挙げたコードの中で、以下の部分
|
110
|
+
|
111
|
+
```javascript
|
112
|
+
|
113
|
+
result5 = Object.entries(result5).reduce((obj, [k,v]) => ({...obj, [k]: summarize(v)}), {});
|
114
|
+
|
115
|
+
```
|
116
|
+
|
117
|
+
については、オブジェクトや配列の操作で便利なメソッドを提供している lodash の [_.mapValues](https://lodash.com/docs/4.17.15#mapValues) を使うと、以下のように少し短く書けます。
|
118
|
+
|
119
|
+
```javascript
|
120
|
+
|
121
|
+
result5 = _.mapValues(result5, summarize);
|
122
|
+
|
123
|
+
```
|
124
|
+
|
125
|
+
- **動作確認用:** [https://jsfiddle.net/jun68ykt/3tounhgL/2/](https://jsfiddle.net/jun68ykt/3tounhgL/2/)
|
9
テキスト修正
test
CHANGED
@@ -44,7 +44,7 @@
|
|
44
44
|
|
45
45
|
```
|
46
46
|
|
47
|
-
が与えられた場合は、足し上げたうえで、
|
47
|
+
が与えられた場合は、足し上げたうえで、 先頭要素のアルファベット順に並び替えて、
|
48
48
|
|
49
49
|
```javascript
|
50
50
|
|
8
テキスト修正
test
CHANGED
@@ -56,7 +56,7 @@
|
|
56
56
|
|
57
57
|
|
58
58
|
|
59
|
-
上記の `summarize(ary)`を使うと、以下の
|
59
|
+
上記の `summarize(ary)`を使うと、以下のオブジェクト `result5`
|
60
60
|
|
61
61
|
```javascript
|
62
62
|
|
7
テキスト修正
test
CHANGED
@@ -20,7 +20,7 @@
|
|
20
20
|
|
21
21
|
|
22
22
|
|
23
|
-
上記の関数`summarize(ary)`は、引数 `ary` に
|
23
|
+
上記の関数`summarize(ary)`は、引数 `ary` にたとえば
|
24
24
|
|
25
25
|
```javascript
|
26
26
|
|
6
テキスト修正
test
CHANGED
@@ -28,7 +28,7 @@
|
|
28
28
|
|
29
29
|
```
|
30
30
|
|
31
|
-
が与えられ
|
31
|
+
が与えられると、ご質問の要件に沿って、各要素の配列の先頭の文字ごとに、2番目の要素である数値を足し上げて、
|
32
32
|
|
33
33
|
```javascript
|
34
34
|
|
@@ -44,7 +44,7 @@
|
|
44
44
|
|
45
45
|
```
|
46
46
|
|
47
|
-
が与えられた
|
47
|
+
が与えられた場合は、足し上げたうえで、 `'x'`, `'y'` の順に並び替えて、
|
48
48
|
|
49
49
|
```javascript
|
50
50
|
|
5
テキスト修正
test
CHANGED
@@ -28,7 +28,7 @@
|
|
28
28
|
|
29
29
|
```
|
30
30
|
|
31
|
-
が与えられたら、
|
31
|
+
が与えられたら、ご質問の要件に沿って、各要素の2番目の数値を足し上げて、
|
32
32
|
|
33
33
|
```javascript
|
34
34
|
|
@@ -36,7 +36,7 @@
|
|
36
36
|
|
37
37
|
```
|
38
38
|
|
39
|
-
を返します。引数 `ary` に
|
39
|
+
を返します。また、引数 `ary` に
|
40
40
|
|
41
41
|
```javascript
|
42
42
|
|
@@ -44,7 +44,7 @@
|
|
44
44
|
|
45
45
|
```
|
46
46
|
|
47
|
-
が与えられたら、`'x'`, `'y'` の順に並び替えて、
|
47
|
+
が与えられたら、足し上げたうえで、 `'x'`, `'y'` の順に並び替えて、
|
48
48
|
|
49
49
|
```javascript
|
50
50
|
|
4
テキスト修正
test
CHANGED
@@ -4,7 +4,23 @@
|
|
4
4
|
|
5
5
|
まず、以下のような関数`summarize(ary)` を作成します。
|
6
6
|
|
7
|
+
|
8
|
+
|
9
|
+
```javascript
|
10
|
+
|
11
|
+
const summarize = (ary) => {
|
12
|
+
|
13
|
+
const map = ary.reduce((m, e) => m.set(e[0], (m.get(e[0]) || 0) + e[1]), new Map());
|
14
|
+
|
15
|
+
return [...map].sort( (e1,e2) => e1[0].localeCompare(e2[0]));
|
16
|
+
|
17
|
+
}
|
18
|
+
|
19
|
+
```
|
20
|
+
|
21
|
+
|
22
|
+
|
7
|
-
関数`summarize(ary)`は、引数 `ary` に
|
23
|
+
上記の関数`summarize(ary)`は、引数 `ary` に
|
8
24
|
|
9
25
|
```javascript
|
10
26
|
|
@@ -36,21 +52,7 @@
|
|
36
52
|
|
37
53
|
```
|
38
54
|
|
39
|
-
を返します。このような `summarize(ary)` は、いろいろな書き方が出来そうです。一例として、以下のように書けます。
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
```javascript
|
44
|
-
|
45
|
-
const summarize = (ary) => {
|
46
|
-
|
47
|
-
const map = ary.reduce((m, e) => m.set(e[0], (m.get(e[0]) || 0) + e[1]), new Map());
|
48
|
-
|
49
|
-
return [...map].sort( (e1,e2) => e1[0].localeCompare(e2[0]));
|
50
|
-
|
51
|
-
}
|
52
|
-
|
53
|
-
|
55
|
+
を返します。
|
54
56
|
|
55
57
|
|
56
58
|
|
3
テキスト修正
test
CHANGED
@@ -36,7 +36,7 @@
|
|
36
36
|
|
37
37
|
```
|
38
38
|
|
39
|
-
を返します。このような `summarize(ary)` は、例
|
39
|
+
を返します。このような `summarize(ary)` は、いろいろな書き方が出来そうです。一例として、以下のように書けます。
|
40
40
|
|
41
41
|
|
42
42
|
|
2
テキスト修正
test
CHANGED
@@ -2,7 +2,9 @@
|
|
2
2
|
|
3
3
|
|
4
4
|
|
5
|
-
まず、以下のような関数
|
5
|
+
まず、以下のような関数`summarize(ary)` を作成します。
|
6
|
+
|
7
|
+
関数`summarize(ary)`は、引数 `ary` に
|
6
8
|
|
7
9
|
```javascript
|
8
10
|
|
@@ -10,7 +12,7 @@
|
|
10
12
|
|
11
13
|
```
|
12
14
|
|
13
|
-
が与えられたら、
|
15
|
+
が与えられたら、
|
14
16
|
|
15
17
|
```javascript
|
16
18
|
|
@@ -18,7 +20,7 @@
|
|
18
20
|
|
19
21
|
```
|
20
22
|
|
21
|
-
を返し
|
23
|
+
を返します。引数 `ary` に
|
22
24
|
|
23
25
|
```javascript
|
24
26
|
|
@@ -34,7 +36,7 @@
|
|
34
36
|
|
35
37
|
```
|
36
38
|
|
37
|
-
を返します。このような `summarize(ary)` は以下のように書けます。
|
39
|
+
を返します。このような `summarize(ary)` は、例えば以下のように書けます。
|
38
40
|
|
39
41
|
|
40
42
|
|
1
テキスト修正
test
CHANGED
@@ -90,7 +90,7 @@
|
|
90
90
|
|
91
91
|
|
92
92
|
|
93
|
-
- **動作確認用:** [https://jsfiddle.net/jun68ykt/sfuvgxm5/
|
93
|
+
- **動作確認用:** [https://jsfiddle.net/jun68ykt/sfuvgxm5/5/](https://jsfiddle.net/jun68ykt/sfuvgxm5/5/)
|
94
94
|
|
95
95
|
|
96
96
|
|