ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

js遍历数组有多少种方法

2020-07-08 23:34:58  阅读:330  来源: 互联网

标签:index arr 遍历 console log val js item 数组


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

 

大概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

 

标签:index,arr,遍历,console,log,val,js,item,数组
来源: https://www.cnblogs.com/rainbowLover/p/13269993.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有