Javascript之遍历数组方法

开发 前端
作为一个程序对于数组遍历大家都不是很陌生,再开发中我们也经常要处理数组。这里我们讨论下常用的数组遍历方法和区别。

 [[271751]]

作为一个程序对于数组遍历大家都不是很陌生,再开发中我们也经常要处理数组。这里我们讨论下常用的数组遍历方法和区别。

1.第一种for循环

  1. var arr = [1,2,3,4,5];  
  2. for(var i=0,i<arr.length;i++){  
  3.  console.log("for循环:"+arr[i]); //打印出1,2,3,4,5  

2.for ..in 遍历方式

  1. // for in 遍历需要两个形参 ,index表示数组的下标(可以自定义),arr表示要遍历的数组 
  2. var arr = [{num:1},{num:2},{num:3},{num:4},{num:5}]; 
  3.  
  4. for(var index arr){ 
  5.   
  6.  console.log("index:"+index,"num:"+arr[index].num);// 依次打印出 index:0,num:1... 
  7.   

3.forEach 遍历方式

  1. var arr = [{num:1},{num:2},{num:3},{num:4},{num:5}]; 
  2.  
  3. arr.forEach(function(item,index){ 
  4.  
  5.                 console.log("index:"+index,"num:"+item.num); //同样打印index:0,num:1... 
  6. }); 

4.map 遍历方式

  1. var list = [1, 2, 3, 4, 5]; 
  2.  
  3. var arr = []; 
  4.  
  5. arr = list.map((value, index) => { 
  6. return value * 2; 
  7. }); 
  8.  
  9. console.log(arr);//[2, 4, 6, 8, 10] 
  10.  
  11. 这里map和forEach在遍历数组的区别就是map 有返回值,返回一个新的数组,而forEach没有返回值 

5.for-of遍历方式

  1. var arr = [1,2,3,4,5]; 
  2.  
  3. for(var value of arr){ 
  4.   
  5.      console.log("数组数据:"+value); //1,2,3,4,5 

在这还有一个要想说的就是,在使用遍历数组时候,如果想跳出遍历return true fasle break没有反应,这其实是使用的遍历方法不对,当想跳出循环可以使用every 和 some方法。

  1. //every()当内部return false时跳出整个循环(return true;也要写入) 
  2.  
  3. let list = [1, 2, 3, 4, 5]; 
  4.  
  5. list.every((value, index) => { 
  6.  if(value > 3){ 
  7.  console.log(value); // 4 
  8.  return false
  9.  }else
  10.  console.log(value); // 1 2 3 
  11.  return true
  12.  } 
  13. }); 
  14.  
  15.  
  16. ================================ 
  17.  
  18. //some 当内部return true时跳出整个循环 
  19.  
  20.  let list = [1, 2, 3, 4, 5]; 
  21.  
  22.  list.some((value, index) => { 
  23.  if(value === 3){ 
  24.  return true; //当内部return true时跳出整个循环 
  25.  } 
  26.  console.log(value)// 1 2  
  27.  }); 

 

责任编辑:武晓燕 来源: 今日头条
相关推荐

2021-02-05 23:08:10

JS代码循环

2009-11-17 15:00:19

PHP遍历数组

2022-11-13 15:33:30

JavaScript数组开发

2021-03-29 12:01:00

遍历数组for循环

2023-07-04 15:52:49

JavaScript数组

2022-11-23 16:12:57

JavaScript数据类型数组

2023-02-01 08:31:48

2020-03-19 15:30:08

JavaScript数组字符串

2023-11-14 16:57:10

2022-09-07 11:52:48

forforEach前端

2022-05-06 12:03:16

数组Javascript

2022-04-28 08:41:53

JavaScript数组

2010-11-24 13:11:06

MySQL遍历数据表

2024-03-21 14:27:13

JavaScript数组

2020-06-30 10:37:55

JavaScript开发技术

2022-08-10 12:02:52

面试JavaScript

2016-10-08 21:25:36

Javascript数组Web

2022-09-27 14:36:57

JavaScrip数组开发

2019-08-13 16:23:19

JavaScript数组方法

2022-07-06 10:04:45

JavaScript数组前端
点赞
收藏

51CTO技术栈公众号