回答編集履歴
2
パフォーマンス面でのアドバイスを追加
test
CHANGED
|
@@ -1,4 +1,38 @@
|
|
|
1
|
+
まずは概念的な所に触れます。
|
|
2
|
+
|
|
1
3
|
パフォーマンスだけ見るのであれば、Lodashは投げ捨ててfor...of文を回しましょう。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
しかし、質問文と与えられた初期値を読む限り、初期のデータが変というか駄目なんじゃないですかね？
|
|
8
|
+
|
|
9
|
+
初期データが複雑で変な形式をしているから、
|
|
10
|
+
|
|
11
|
+
Lodashをこねくり回してアレやらコレやらのデータを突合させる必要がある。
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
変なデータをこねくり回すより、シンプルなデータを使って小学生でも出来るような計算でさっさと解決する。
|
|
16
|
+
|
|
17
|
+
こういうアプローチもとても重要ですので一度見直してみてください。
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
また、インクリメントといったワードが質問文に入ってきている所を見るに、
|
|
22
|
+
|
|
23
|
+
質問者さんのやりたいことはjQueryではなく、Vue.jsなんかのJSフレームワークを覚えれば一気に解決する可能性があります。
|
|
24
|
+
|
|
25
|
+
JSフレームワークを使っていれば表示の為に数値のインクリメントといった発想に至る事は殆どありません。
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
さて、質問文自体の回答に入っていきます。
|
|
34
|
+
|
|
35
|
+
|
|
2
36
|
|
|
3
37
|
わかり易さを考慮するのであればチェーン記法で書き直せる箇所は多いのでは？
|
|
4
38
|
|
1
参考サイトを追加
test
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
パフォーマンスだけ見るのであれば、Lodashは投げ捨ててfor...of文を回しましょう。
|
|
2
2
|
|
|
3
3
|
わかり易さを考慮するのであればチェーン記法で書き直せる箇所は多いのでは？
|
|
4
|
+
|
|
5
|
+
参考サイト: [Lodashのチェーン記法について - Qiita](https://qiita.com/krmtyshr/items/fb470ea71e59cd0371d4)
|
|
4
6
|
|
|
5
7
|
|
|
6
8
|
|
|
@@ -36,6 +38,74 @@
|
|
|
36
38
|
|
|
37
39
|
|
|
38
40
|
|
|
39
|
-
|
|
41
|
+
※データが歯抜け過ぎるしネストされすぎで、回答文のコードは検証出来てません。
|
|
40
42
|
|
|
41
43
|
もし回答文のコードが誤っており、正確なコードが欲しい場合、A -> Bを記述するように質問文を修正してください。
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
質問文のコードはやりたいことが右に左に行ってしまう上、
|
|
52
|
+
|
|
53
|
+
カッコのネストで凄まじく読みづらいですが、
|
|
54
|
+
|
|
55
|
+
チェーン記法であればやりたい事が直列繋ぎにして書けるので、慣れればかなり読みやすくなります。
|
|
56
|
+
|
|
57
|
+
チェーン記法はLodashの存在意義と言えるでしょう、是非覚えて使いこなしましょう。
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
このメソッドチェーンで繋ぎまくるプログラミングは途中の計算結果が吸い出せず、
|
|
62
|
+
|
|
63
|
+
これホンマに合ってるんかな？？？でも検証し辛いし困った…となるかと思います。
|
|
64
|
+
|
|
65
|
+
その時は`tap`や`thru`のメソッドが役に立つはずです。
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
```JavaScript
|
|
70
|
+
|
|
71
|
+
const users = [
|
|
72
|
+
|
|
73
|
+
{name: 'taro', score: 80},
|
|
74
|
+
|
|
75
|
+
{name: 'jiro', score: 85},
|
|
76
|
+
|
|
77
|
+
{name: 'saburo', score: 90},
|
|
78
|
+
|
|
79
|
+
];
|
|
80
|
+
|
|
81
|
+
const eighty = _.chain(users)
|
|
82
|
+
|
|
83
|
+
.filter(user => user.score >= 80)
|
|
84
|
+
|
|
85
|
+
// この時点の計算結果をconsole.logに吐き出して確認したいんだけど…
|
|
86
|
+
|
|
87
|
+
.tap(console.log)
|
|
88
|
+
|
|
89
|
+
.filter(user => user.score < 90)
|
|
90
|
+
|
|
91
|
+
.value();
|
|
92
|
+
|
|
93
|
+
console.log(middle);
|
|
94
|
+
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
`console.log`は引数をコンソールに書き出して`undefined`を返すメソッドです。
|
|
100
|
+
|
|
101
|
+
なので、メソッドチェーンで繋ぐプログラミングとはすこぶる相性が悪いのですが、
|
|
102
|
+
|
|
103
|
+
`.tap`という関数の中に自分を渡して起動させますが、戻り値は捨ててそのまま次で行くという投げっぱなしの処理を行う為のメソッドが存在します。
|
|
104
|
+
|
|
105
|
+
まさに計算途中の値を`console.log`や`alert`で確認する為に作られたメソッドと言っても過言ではないでしょう。
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
`.thru`は`.tap`の様に関数を発火させますが、変更後の戻り値を使って次の処理に進む関数です。
|
|
110
|
+
|
|
111
|
+
計算結果をちょっと補正したい時に威力を発揮するので使って見てくださいね。
|