码迷,mamicode.com
首页 > 编程语言 > 详细

js遍历数组有多少种方法

时间:2020-07-09 01:14:07      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:value   对象   nbsp   一个人   场景   js遍历数组   类型   code   reduce   

如果你看完了你会体会到一个人能有多无聊,这东西都能看完!!??

 

大概js有以下几种循环遍历的方法:

  1 let arr = [‘aaa‘,‘bbb‘,‘ccc‘]
  2 let obj = {a:‘aaa‘,b:‘bbb‘,c:‘ccc‘}
  3 let deepObj = {a:‘aaa‘, b:{c:‘ccc‘}}
  4 
  5 // foriFn(arr);// 经典for循环 
  6       // index :>>  0
  7       // item :>>  aaa
  8       // index :>>  1
  9       // item :>>  bbb
 10       // index :>>  2
 11       // item :>>  ccc
 12 
 13 // foriFnPlus(arr);// 经典for循环稍微优化一下子
 14       // index :>>  0
 15       // item :>>  aaa
 16       // index :>>  1
 17       // item :>>  bbb
 18       // index :>>  2
 19       // item :>>  ccc
 20 
 21 // forEachFn(arr);// forEach遍历数组 return不会终止循环,return相当于for循环里的continue
 22       // index :>>  0
 23       // item :>>  aaa
 24       // index :>>  1
 25       // item :>>  bbb
 26       // index :>>  2
 27       // item :>>  ccc
 28 
 29 // forinFn(arr)// forin循环 循环时候得到的key时字符串类型的
 30       // index :>>  0
 31       // typeof index :>>  string
 32       // item :>>  aaa
 33       // index :>>  1
 34       // typeof index :>>  string
 35       // item :>>  bbb
 36       // index :>>  2
 37       // typeof index :>>  string
 38       // item :>>  ccc
 39 // forinFn(obj)//forin循环 可以遍历对象
 40       // index :>>  a
 41       // typeof index :>>  string
 42       // item :>>  aaa
 43       // index :>>  b
 44       // typeof index :>>  string
 45       // item :>>  bbb
 46       // index :>>  c
 47       // typeof index :>>  string
 48       // item :>>  ccc
 49 // forinFn(deepObj)//forin循环 可以遍历对象 只遍历一层 
 50       // index :>>  a
 51       // typeof index :>>  string
 52       // item :>>  aaa
 53       // index :>>  b
 54       // typeof index :>>  string
 55       // item :>>  { c: ‘ccc‘ }
 56 
 57 // forofFn(arr)// forof循环 循环时候没有index
 58       // index :>>  0
 59       // item :>>  aaa
 60       // index :>>  1
 61       // item :>>  bbb
 62       // index :>>  2
 63       // item :>>  ccc
 64 
 65 // doWhileFn(arr)// do While循环
 66       // item :>>  aaa
 67       // item :>>  bbb
 68       // item :>>  ccc
 69 // whiledoFn(arr)// while do循环
 70       // item :>>  aaa
 71       // item :>>  bbb
 72       // item :>>  ccc
 73 
 74 // mapFn(arr)// map循环 return不会终止循环,return相当于for循环里的continue
 75       // index :>>  0
 76       // item :>>  aaa
 77       // 0
 78       // index :>>  1
 79       // item :>>  bbb
 80       // index :>>  2
 81       // item :>>  ccc
 82       
 83 // filterFn(arr)// filter循环 return不会终止循环,return相当于for循环里的continue
 84       // index :>>  0
 85       // item :>>  aaa
 86       // 0
 87       // index :>>  1
 88       // item :>>  bbb
 89       // index :>>  2
 90       // item :>>  ccc
 91 
 92 
 93 // reduceFn(arr)// reduce方法 特殊应用场景使用 和上边的循环不一样
 94       // i :>>  aaa
 95       // j :>>  bbb
 96       // i :>>  aaabbb
 97       // j :>>  ccc
 98       // res :>>  aaabbbccc
 99 
100 // entriesFn(arr)// 遍历器entries循环
101       // Array.isArray(val) :>>  true
102       // val :>>  [ 0, ‘aaa‘ ]
103       // index :>>  0
104       // item :>>  aaa
105       // val :>>  [ 1, ‘bbb‘ ]
106       // index :>>  1
107       // item :>>  bbb
108       // val :>>  [ 2, ‘ccc‘ ]
109       // index :>>  2
110       // item :>>  ccc
111 // entriesFnPlus(arr)// 遍历器entries循环优化
112       // Array.isArray(val) :>>  true
113       // val :>>  [ 0, ‘aaa‘ ]
114       // index :>>  0
115       // item :>>  aaa
116       // Array.isArray(val) :>>  true
117       // val :>>  [ 1, ‘bbb‘ ]
118       // index :>>  1
119       // item :>>  bbb
120       // Array.isArray(val) :>>  true
121       // val :>>  [ 2, ‘ccc‘ ]
122       // index :>>  2
123       // item :>>  ccc
124 
125 // keysValuesFn(arr)// 用数组的 arr.keys() arr.values() 方法遍历
126       // index :>>  0
127       // index :>>  1
128       // index :>>  2
129       // item :>>  aaa
130       // item :>>  bbb
131       // item :>>  ccc
132 
133 // ObjectKeysValuesFn(arr)//  用对象的 Object.keys(arr)、Object.values(arr)方法返回的字符串数组 遍历
134       // index :>>  0
135       // index :>>  1
136       // index :>>  2
137       // item :>>  aaa
138       // item :>>  bbb
139       // item :>>  ccc
140 // ObjectKeysValuesFn(obj)// 可以遍历对象
141       // index :>>  a
142       // index :>>  b
143       // index :>>  c
144       // item :>>  aaa
145       // item :>>  bbb
146       // item :>>  ccc
147 // ObjectKeysValuesFn(deepObj)// 可以遍历对象 只遍历一层
148       // index :>>  a
149       // index :>>  b
150       // item :>>  aaa
151       // item :>>  { c: ‘ccc‘ }
152 
153 /**
154  * 经典for循环 据说性能最高
155  * @param {Array} arr 
156  */
157 function foriFn(arr){
158   for(let i=0; i<arr.length; i++){
159     console.log(‘index :>> ‘, i);
160     console.log(‘item :>> ‘, arr[i]);
161   }
162 }
163 
164 /**
165  * 经典for循环 优化
166  * 将数组的length缓存起来避免每次都取获取数组的length
167  * @param {Array} arr 
168  */
169 function foriFnPlus(arr){
170   for(let i=0,len=arr.length; i<len; i++){
171     console.log(‘index :>> ‘, i);
172     console.log(‘item :>> ‘, arr[i]);
173   }
174 }
175 
176 /**
177  * forEach遍历数组
178  * return不会终止循环,return相当于for循环里的continue
179  * @param {Array} arr 
180  */
181 function forEachFn(arr){
182   arr.forEach((item,index,a)=>{
183     console.log(‘index :>> ‘, index);
184     console.log(‘item :>> ‘, item);
185     if(index){
186       return;
187     }
188   })
189 }
190 
191 /**
192  * forin循环
193  * 可以循环数组可以循环对象
194  * @param {Object,Array} arr 
195  */
196 function forinFn(arr){
197   for (const idx in arr) {
198     if (arr.hasOwnProperty(idx)) {
199       const item = arr[idx];
200       console.log(‘index :>> ‘, idx);
201       console.log(‘typeof index :>> ‘, typeof idx);
202       console.log(‘item :>> ‘, item);
203     }
204   }
205 }
206 
207 /**
208  * forOf循环
209  * 没给你传index
210  * @param {Array} arr 
211  */
212 function forofFn(arr){
213   for (const item of arr) {
214     console.log(‘index :>> ‘, arr.indexOf(item));
215     console.log(‘item :>> ‘, item);
216   }
217 }
218 
219 /**
220  * do while循环
221  * @param {Array} arr 
222  */
223 function doWhileFn(arr){
224   do{
225     console.log(‘item :>> ‘, arr.shift());
226   }while(arr.length>0)
227 }
228 
229 /**
230  * while do 循环
231  * @param {Array} arr 
232  */
233 function whiledoFn(arr) {
234   while (arr.length>0) {
235     console.log(‘item :>> ‘, arr.shift());
236   }
237 }
238 
239 /**
240  * map循环
241  * return不会终止循环,return相当于for循环里的continue
242  * @param {Array} arr 
243  */
244 function mapFn(arr){
245   arr.map((v,i,a)=>{
246     console.log(‘index :>> ‘, i);
247     console.log(‘item :>> ‘, v);
248     if(i){
249       return
250     }
251     console.log(i);
252   })
253 }
254 
255 /*
256  * filter循环
257  * return不会终止循环,return相当于for循环里的continue
258  * @param {Array} arr 
259  */
260 function filterFn(arr){
261   arr.filter((v,i,a)=>{
262     console.log(‘index :>> ‘, i);
263     console.log(‘item :>> ‘, v);
264     if(i){
265       return
266     }
267     console.log(i);
268   })
269 }
270 
271 /**
272  * reduce循环
273  * @param {Array} arr 
274  */
275 function reduceFn(arr){
276   let res = arr.reduce((i,j)=>{
277     console.log(‘i :>> ‘, i);
278     console.log(‘j :>> ‘, j);
279     return i+j
280   })
281   console.log(‘res :>> ‘, res);
282 }
283 
284 /**
285  * 遍历器循环
286  * @param {Array} arr 
287  */
288 function entriesFn(arr){
289   let ets = arr.entries()
290   
291   let val = ets.next().value
292   console.log(‘Array.isArray(val) :>> ‘, Array.isArray(val));
293   console.log(‘val :>> ‘, val);
294   console.log(‘index :>> ‘, val[0]);
295   console.log(‘item :>> ‘, val[1]);
296 
297   val = ets.next().value
298   console.log(‘val :>> ‘, val);
299   console.log(‘index :>> ‘, val[0]);
300   console.log(‘item :>> ‘, val[1]);
301 
302   val = ets.next().value
303   console.log(‘val :>> ‘, val);
304   console.log(‘index :>> ‘, val[0]);
305   console.log(‘item :>> ‘, val[1]);
306 }
307 
308 /**
309  * 遍历器循环简化版
310  * @param {Array} arr 
311  */
312 function entriesFnPlus(arr){
313   let ets = arr.entries()
314   let nxt=ets.next(),val
315   while(!nxt.done){
316     val = nxt.value
317     console.log(‘Array.isArray(val) :>> ‘, Array.isArray(val));
318     console.log(‘val :>> ‘, val);
319     console.log(‘index :>> ‘, val[0]);
320     console.log(‘item :>> ‘, val[1]);
321     nxt = ets.next()
322   }
323 }
324 
325 /**
326  * 利用数组keys values属性的循环
327  * @param {Array} arr 
328  */
329 function keysValuesFn(arr){
330   for (const index of arr.keys()) {
331     console.log(‘index :>> ‘, index);
332   }
333   for (const item of arr.values()) {
334     console.log(‘item :>> ‘, item);
335   }
336 }
337 
338 /**
339  * 利用对象keys values属性的循环
340  * @param {Object} arr 
341  */
342 function ObjectKeysValuesFn(arr){
343   for (const index of Object.keys(arr)) {
344     console.log(‘index :>> ‘, index);
345   }
346   for (const item of Object.values(arr)) {
347     console.log(‘item :>> ‘, item);
348   }
349 }

 

over

 

js遍历数组有多少种方法

标签:value   对象   nbsp   一个人   场景   js遍历数组   类型   code   reduce   

原文地址:https://www.cnblogs.com/rainbowLover/p/13269993.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!