遍历数组的常用方法

最传统方法 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

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

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…of只可以循环可迭代的可迭代属性，不可迭代属性在循环中被忽略了

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

map遍历数组

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

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

filter( )

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

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

every()

当数组中的每一个元素在callback上被返回true时就返回true注意：要求每一个单元项都返回true时才为true)
every()与filter()的区别是：后者会返回所有符合过滤条件的元素；前者会判断是不是数组中的所有元素都符合条件，并且返回的是布尔值

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

some()

只要数组中有一项在callback上就返回true
every()与some()的区别是：前者要求所有元素都符合条件才返回true,后者要求只要有符合条件的就返回true

var arr = ["first","second",'third' ,"fourth",3,5,8];
    var bol = arr.some(function(item, index, array){
        if(typeof item == 'string'){
            return item;
        }
    })
    console.log(bol); //true

reduce()

reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});

reduce还有第二个参数，我们可以把这个参数作为第一次调用callback时的第一个参数，上面这个例子因为没有第二个参数，所以直接从数组的第二项开始，如果我们给了第二个参数为5

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
},5);

第一次调用的previousValue的值就用传入的第二个参数代替

reduceRight()

reduceRight()方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。

数组方法总结

对于数组，最关心的的两个问题：返回值是什么，会不会对原始数组造成影响，典型的例子就是 splice 和 slice 方法。对于那些返回原数组的函数，我们可以直接调用数组的链式调用，array.filter().sort().reverse()。
下面用表格列出来所有方法的功能：

具体可参考：https://segmentfault.com/a/1190000008147878