当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 遍历数组的常用方法

遍历数组的常用方法

2019年03月17日  | 移动技术网IT编程  | 我要评论

1.最传统方法 for循环

 1  var arr = ["first","second","third","fourth",3,5,8];
 2  for(var i = 0; i < arr.length;i++){
 3         console.log(arr[i]);
 4     }
 5     //输出：
 6      first
 7      second
 8      third
 9      fourth
10      3
11      5
12      8

for… in

 1 var arr = ["first","second",'third' ,"fourth",3,5,8];
 2 for(var i in arr){
 3      console.log(arr[i] +'/' + i);
 4  }
 5  //输出结果为：
 6      first/0
 7      second/1
 8      third/2
 9      fourth/3
10      3/4
11      5/5
12      8/6

for…of

 1  var arr = ["first","second",'third' ,"fourth",3,5,8];
 2  for(var item of arr){
 3      console.log(item);
 4  }
 5  //输出结果：
 6      first
 7      second
 8      third
 9      fourth
10      3
11      5
12      8

 

虽然for… in 、 for… of 都能够变历数组，但是两者还是有很大区别的，先说结论：

两者的主要区别在于他们的迭代方式

  • 推荐在循环对象属性的时候，使用for in，在遍历数组的时候推荐使用for of
  • for…in 循环出来的是key, for…of循环出来的是value
  • for…in 是es5 标准，for …of 是es6标准，兼容性可能存在些问题，请注意使用
  • for…of 不能遍历普通的对象，需要和object.keys() 搭配使用

 2.foreach方法：被传递给foreach的函数会在数组的每个元素上执行一次，元素作为参数传递给该函数

 1     var arr = ["first","second","third","fourth",3,5,8];
 2     //element 表示arr的单元项，index 表示arr单元项对应的索引值
 3     arr.foreach(function(element,index){
 4         console.log(element + '/' + index);
 5 
 6     })
 7     //输出结果：
 8       first/0
 9       second/1
10       third/2
11       fourth/3
12       3/4
13       5/5
14       8/6

注意：未赋值的值是不会在foreach循环迭代的，但是手动赋值为undefined的元素是会被列出的

 1  var arr1 = ["first","second", ,"fourth",3,5,8];
 2  arr1.foreach(function(element,index){
 3      console.log(element + '/' + index);
 4 
 5   })
 6   //输出结果
 7      first/0
 8      second/1
 9      fourth/3
10      3/4
11      5/5
12      8/6

3.map 遍历数组，并通过callback对数组元素进行操作，并将所有操作结果放入数组中并返回该数组

1  var arr = ["first","second",'third' ,"fourth"];
2  var arr2 = arr.map(function(item){
3     return item.touppercase();
4  })
5  console.log(arr2);
6  //输出：
7  [first,second,third, fourth]

4.filter( )返回一个包含所有在回调函数上返回为true的元素新数组，回调函数在此担任的是过滤器的角色，当元素符和条件，过滤器就返回true,而filter则会返回所有符合过滤条件的元素

1 var arr = ["first","second",'third' ,"fourth",3,5,8];
2     var arr3 = arr.filter(function(item){
3         if(typeof item == 'number'){
4             return item;
5         }
6     })
7     console.log(arr3);
8     //输出结果： 
9     [3,5,8]

5. every() 当数组中的每一个元素在callback上被返回true时就返回true(注意：要求每一个单元项都返回true时才为true)

every()与filter()的区别是：后者会返回所有符合过滤条件的元素；前者会判断是不是数组中的所有元素都符合条件，并且返回的是布尔值

1 var arr = ["first","second",'third' ,"fourth",3,5,8];
2 var bol = arr.every(function(element){
3     if(typeof element == 'string'){
4         return element;
5     }
6  })
7  console.log(bol); //false

6.some()只要数组中有一项在callback上就返回true

every()与some()的区别是：前者要求所有元素都符合条件才返回true,后者要求只要有符合条件的就返回true

1 var arr = ["first","second",'third' ,"fourth",3,5,8];
2     var bol = arr.some(function(element){
3         if(typeof element == 'string'){
4             return element;
5         }
6     })
7     console.log(bol); //true

7.findindex() es6数组新api,找到符合条件的索引并返回

1 var ages = [3, 10, 18, 20];
2  
3 function checkadult(age) {
4     return age >= 18;
5 }

function(currentvalue, index,arr)

参数currentvalue:必需。当前元素

index:可选。当前元素的索引

arr:可选.当前元素所属的数组对象

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网