数组遍历、操作方法集锦

数组遍历常用方法：for map reduce foreach filter some every

1.最传统方法 for循环

for循环：需要控制遍历的步调和顺序时

var arr = ["first","second","third","fourth",3,5,8];
 for(var i = 0; i < arr.length;i++){
        console.log(arr[i]);
    }
    //输出：
    // first
    // second
    // third
    // fourth
    // 3
    // 5
    // 8

2. for ... in

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

3. for ... of

var arr = ["first","second",'third' ,"fourth",3,5,8];
 for(var item of arr){
     console.log(item);
 }
 //输出结果：
 //    first
 //    second
 //    third
 //    fourth
 //    3
 //    5
 //    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() 搭配使用

var arr = ["first","second",'third' ,"fourth",3,5,8];
    //给数组添加新属性
    arr.name = 'zhangsan';
    for(var item of arr){
        console.log(item);
    }
    //输出：
    //  first 
    //  second
    //  third
    //  fourth
    //  3
    //  5
    //  8
    console.log('--------------分隔符----------------');
    for(var item in arr){
        console.log(arr[item] + '/' + item);
    }
    //输出：
    // first/0
    // second/1
    // third/2
    // fourth/3
    // 3/4
    // 5/5
    // 8/6 
    // zhangsan/name

从上述代码可知：for...in 循环除了遍历数组元素外，还会遍历自定义属性；

for...of只可以循环可迭代的可迭代属性，不可迭代属性在循环中被忽略了。

4.foreach()

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

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

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

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

5. map()

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

var arr = ["first","second",'third' ,"fourth"];
 var arr2 = arr.map(function(item){
    return item.toUpperCase();
 })
 console.log(arr2);
 //输出： [FIRST,SECOND,THIRD, FOURTH]

6. filter()

返回一个包含所有在回调函数上返回为true的元素新数组，回调函数在此担任的是过滤器的角色，

当元素符和条件，过滤器就返回true,而filter则会返回所有符合过滤条件的元素。

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

7. every()

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

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

并且返回的是布尔值。

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

8. some()

只要数组中有一项在callback上就返回true

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

数组遍历、操作方法集锦

猜你喜欢