• 遍历数组的常用方法


    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]   

    注意:find() 对于空数组,函数是不会执行的。find() 并没有改变数组的原始值。

    5.find( )返回通过测试(函数内判断)的数组的第一个元素的值

    当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined

    1 var arr = [1,2,3,4,5,6,7];
    2  var newArr = arr.find(function(elem){
    3      return elem>5;
    4  });
    5  console.log(newArr);
    6 //输出结果
    7 6

    6. 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

    7.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

    8.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:可选.当前元素所属的数组对象

  • 相关阅读:
    Nginx 对访问量的控制
    Shell入门
    小程序如何处理键盘覆盖输入框
    移动端适配之二:visual viewport、layout viewport和ideal viewport介绍
    javascript-对象
    bind函数作用、应用场景以及模拟实现
    「面试题」如何实现一个圣杯布局?
    一款轮播组件的诞生
    超火js库: Lodash API例子
    js 中的 number 为何很怪异
  • 原文地址:https://www.cnblogs.com/jun-qi/p/10543257.html
Copyright © 2020-2023  润新知