teratail
回答率
85.46%
質問するログイン新規登録
トップJSONに関する質問each()の中で、for文を実行すると、each分だけ余計にループされる

編集履歴

回答編集履歴

10

空配列チェックの削除。ほぼ不要の上、可読性悪くなるため

2019/06/07 11:07

投稿

退会済みユーザー
test CHANGED
@@ -54,29 +54,27 @@
54
54
 
55
55
 
56
56
 
57
- if( filtered.length ){ // !空の配列
58
57
 
59
- $(".text").each(function (index) {
60
58
 
61
- let text = $(this).text(),
59
+ $(".text").each(function (index) {
62
60
 
61
+ let text = $(this).text(),
62
+
63
- _this = $(this);
63
+ _this = $(this);
64
64
 
65
65
 
66
66
 
67
- filtered.map(function (person) {
67
+ filtered.map(function (person) {
68
68
 
69
- if (person.name === text) {
69
+ if (person.name === text) {
70
70
 
71
- _this.hide();
71
+ _this.hide();
72
72
 
73
- }
73
+ }
74
-
75
- });
76
74
 
77
75
  });
78
76
 
79
- }
77
+ });
80
78
 
81
79
  ```
82
80
 

9

スリム化バージョンのjsを追記

2019/06/07 11:07

投稿

退会済みユーザー
test CHANGED
@@ -42,7 +42,11 @@
42
42
 
43
43
  ```js
44
44
 
45
+ "use strict";
46
+
47
+
48
+
45
- var filtered = hoge.filter(function (obj) {
49
+ let filtered = hoge.filter(function (obj) {
46
50
 
47
51
  return obj.id === 0;
48
52
 
@@ -54,13 +58,13 @@
54
58
 
55
59
  $(".text").each(function (index) {
56
60
 
57
- var text = $(this).text(),
61
+ let text = $(this).text(),
58
62
 
59
63
  _this = $(this);
60
64
 
61
65
 
62
66
 
63
- filtered.map(function (person, idx) {
67
+ filtered.map(function (person) {
64
68
 
65
69
  if (person.name === text) {
66
70
 
@@ -78,6 +82,72 @@
78
82
 
79
83
 
80
84
 
85
+ ### 追記
86
+
87
+
88
+
89
+ もう少しスリムにまとめてみました。結果は同じです。
90
+
91
+ ES6の矢印関数(アロー関数)で書くと、よりスリムになります。
92
+
93
+
94
+
95
+ ```
96
+
97
+ "use strict";
98
+
99
+
100
+
101
+ let hasId0 = function hasId0(obj) {
102
+
103
+ return obj.id === 0;
104
+
105
+ };
106
+
107
+
108
+
109
+ $(".text").each(function (indx, elm){
110
+
111
+ let txt = $(elm).text();
112
+
113
+
114
+
115
+ hoge
116
+
117
+ .filter(hasId0)
118
+
119
+ .map(function (person){ /* arrayOf_hogeFiltered.map() */
120
+
121
+ return person.name === txt ? elm : false; // ---(1)
122
+
123
+ })
124
+
125
+ .forEach(function (el){ /* arrayOf_DOMElementsMatchedPrev.forEach() ---(2) */
126
+
127
+ return $(el).hide();
128
+
129
+ });
130
+
131
+ });
132
+
133
+
134
+
135
+ /*
136
+
137
+ ---(1)
138
+
139
+ 以下と同じ意味。
140
+
141
+ if( person.name === txt ){
142
+
143
+ return elm;
144
+
145
+ }
146
+
147
+ */
148
+
149
+ ```
150
+
81
151
 
82
152
 
83
153
  | id===0 | hoge.filter() + $.each() * filtered.map() | | $.each() + for(){} |

8

json配列内データ数 追記

2019/06/07 11:04

投稿

退会済みユーザー
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ```
14
14
 
15
- json配列データ数 * p要素数
15
+ json配列のデータ数 * p要素数
16
16
 
17
17
  10 * 2
18
18
 
@@ -32,7 +32,7 @@
32
32
 
33
33
 
34
34
 
35
- `id === 0`の数による…というのまでは、表(以下)にしてみて分かりました????
35
+ json配列内のデータ数と`id === 0`の数による…というのまでは、表(以下)にしてみて分かりました????
36
36
 
37
37
 
38
38
 

7

訂正

2019/06/04 18:33

投稿

退会済みユーザー
test CHANGED
@@ -80,16 +80,16 @@
80
80
 
81
81
 
82
82
 
83
- | id===0 | $.each() * filtered.map() + hoge.filter() | | $.each() + for(){} |
83
+ | id===0 | hoge.filter() + $.each() * filtered.map() | | $.each() + for(){} |
84
84
 
85
85
  | -----: | ----: | :-----: | :------ |
86
86
 
87
87
  | | ループ数 |　　　| ループ数 |
88
88
 
89
- | 3個の場合 | 3 * 3 + 3 = 12 | > | 9 |
89
+ | 3個の場合 | 3 + (3 * 3) = 12 | > | 9 |
90
90
 
91
- | 2個 | 3 * 2 + 3 = 9 | === | 9 |
91
+ | 2個 | 3 + (3 * 2) = 9 | === | 9 |
92
92
 
93
- | 1個 | 3 * 1 + 3 = 6 | < | 9 |
93
+ | 1個 | 3 + (3 * 1) = 6 | < | 9 |
94
94
 
95
- | 0個 | 3 * 0 + 3 = 3 | < | 9 |
95
+ | 0個 | 3 + (3 * 0) = 3 | < | 9 |

6

for 訂正

2019/06/04 18:11

投稿

退会済みユーザー
test CHANGED
@@ -80,7 +80,7 @@
80
80
 
81
81
 
82
82
 
83
- | id===0 | $.each() * filtered.map() + hoge.filter() | | for( name === text && id === 0 ){} |
83
+ | id===0 | $.each() * filtered.map() + hoge.filter() | | $.each() + for(){} |
84
84
 
85
85
  | -----: | ----: | :-----: | :------ |
86
86
 

5

訂正

2019/06/04 18:09

投稿

退会済みユーザー
test CHANGED
@@ -86,7 +86,7 @@
86
86
 
87
87
  | | ループ数 |　　　| ループ数 |
88
88
 
89
- | 3個の場合 | 3 * 3 + 3 = 12 | < | 9 |
89
+ | 3個の場合 | 3 * 3 + 3 = 12 | > | 9 |
90
90
 
91
91
  | 2個 | 3 * 2 + 3 = 9 | === | 9 |
92
92
 

4

console.log '削除

2019/06/04 18:06

投稿

退会済みユーザー
test CHANGED
@@ -41,8 +41,6 @@
41
41
 
42
42
 
43
43
  ```js
44
-
45
- var _ = console.log;
46
44
 
47
45
  var filtered = hoge.filter(function (obj) {
48
46
 

3

細かな訂正

2019/06/04 18:04

投稿

退会済みユーザー
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- の際、全部回すのかどうか。
23
+ の際、forループを使って全部回すのかどうか。
24
24
 
25
25
 
26
26
 
@@ -28,7 +28,7 @@
28
28
 
29
29
 
30
30
 
31
- ただ、全回しするか先にフィルターするか、どちらが最適なアルゴリズムかは、今の僕のレベルでは力量不足で明確に分かりません…すみません(´๑›ω‹๑)????
31
+ ただ、forループも使い全回しするか先にフィルターするか、どちらが最適なアルゴリズムかは、今の僕のレベルでは力量不足で明確に分かりません…すみません(´๑›ω‹๑)????
32
32
 
33
33
 
34
34
 

2

=== 回り込み 訂正

2019/06/04 18:01

投稿

退会済みユーザー
test CHANGED
@@ -86,7 +86,7 @@
86
86
 
87
87
  | -----: | ----: | :-----: | :------ |
88
88
 
89
- | | ループ数 | | ループ数 |
89
+ | | ループ数 |　　　| ループ数 |
90
90
 
91
91
  | 3個の場合 | 3 * 3 + 3 = 12 | < | 9 |
92
92
 

1

再回答

2019/06/04 17:21

投稿

退会済みユーザー
test CHANGED
@@ -1,47 +1,97 @@
1
- ```js
1
+ こちらに来ました????????
2
2
 
3
- $(".text").each(function(index) {
4
3
 
5
- ...
6
4
 
7
- });
5
+ frtneさんの意図を理解、致しました。
6
+
7
+
8
+
9
+ jsonデータ数とp数が違った場合、例えば、
10
+
11
+
8
12
 
9
13
  ```
10
14
 
15
+ json配列データ数 * p要素数
16
+
17
+ 10 * 2
18
+
19
+ ```
20
+
21
+
22
+
23
+ の際、全部回すのかどうか。
24
+
25
+
26
+
27
+ 別案として、以下のコードの様に、先にjson配列から`id===0`のオブジェクトだけ取り出す(`filter()`)する方法があります。
28
+
29
+
30
+
31
+ ただ、全回しするか先にフィルターするか、どちらが最適なアルゴリズムかは、今の僕のレベルでは力量不足で明確に分かりません…すみません(´๑›ω‹๑)????
32
+
33
+
34
+
35
+ `id === 0`の数による…というのまでは、表(以下)にしてみて分かりました????
36
+
37
+
38
+
11
- で、既に取得したp要素3つがコレクション(length.3)に入っています。なのでforループする必要はない、という認識で合ってますでしょうか。。
39
+ 宜しければ参考までに使ってやって下さい???????? もしかしたら、他にもっといい方法が、あるかもしれません(他の回答者様宜しくお願い致します????????)
12
40
 
13
41
 
14
42
 
15
43
  ```js
16
44
 
45
+ var _ = console.log;
46
+
17
- console.log( $(".text").length ) // 3
47
+ var filtered = hoge.filter(function (obj) {
48
+
49
+ return obj.id === 0;
50
+
51
+ });
18
52
 
19
53
 
20
54
 
21
- $(".text").each(function(i) {
55
+ if( filtered.length ){ // !空の配列
22
56
 
23
-
57
+ $(".text").each(function (index) {
24
58
 
25
- console.log(i) // 1, 2, 3
59
+ var text = $(this).text(),
26
60
 
27
-
61
+ _this = $(this);
28
62
 
29
- var text = $(this).text(),
63
+
30
64
 
31
- h = hoge[i],
65
+ filtered.map(function (person, idx) {
32
66
 
33
- name = h.name,
67
+ if (person.name === text) {
34
68
 
35
- id = h.id;
69
+ _this.hide();
36
70
 
37
-
71
+ }
38
72
 
39
- if(name === text && id === 0) {
73
+ });
40
74
 
41
- $(this).hide();
75
+ });
42
76
 
43
- }
77
+ }
44
-
45
- });
46
78
 
47
79
  ```
80
+
81
+
82
+
83
+
84
+
85
+ | id===0 | $.each() * filtered.map() + hoge.filter() | | for( name === text && id === 0 ){} |
86
+
87
+ | -----: | ----: | :-----: | :------ |
88
+
89
+ | | ループ数 | | ループ数 |
90
+
91
+ | 3個の場合 | 3 * 3 + 3 = 12 | < | 9 |
92
+
93
+ | 2個 | 3 * 2 + 3 = 9 | === | 9 |
94
+
95
+ | 1個 | 3 * 1 + 3 = 6 | < | 9 |
96
+
97
+ | 0個 | 3 * 0 + 3 = 3 | < | 9 |