js数组遍历方法解析

在ES5中常用的10种数组遍历方法：(以下脚本可复制黏贴到浏览器的console中查看效果)

1、原始的for循环语句

2、Array.prototype.forEach数组对象内置方法 优点不用定义额外的参数变量，缺点:

• 性能不如for循环
• 不能用return结束循环
• 不生成新数组
• ie不支持（alert(Array.prototype.forEach)返回undefined）
• 数组元素为数值时不改变原数组，元素为对象、数组时改变原数组。

例1：

var oldArr = [3, 6, 8];
var newArr = oldArr.forEach((value,key,arr) => {
    console.log('value:' + value + ',key:' + key+',arr:' + arr);
    return value += 1;
})
console.log('oldArr:' + oldArr); // [3,6,8]
console.log('newArr:' + newArr); // undefined

例2：

var oldArr = [
    {id:1, score:10},  
    {id:2, score:20},  
    {id:3, score:30}
];
var newArr = oldArr.forEach((value,key,arr) => {
    value.score += 5;
})
console.log('oldArr:' + JSON.stringify(oldArr)); // [{"id":1,"score":15},{"id":2,"score":25},{"id":3,"score":35}]
console.log('newArr:' + newArr); // undefined

3、Array.prototype.map数组对象内置方法,特点：

• 不改变原数组
• 不能用return结束循环，但用return可生成新数组
• 常用于修改数组的值，并且不破坏原数组。

var oldArr = [3, 6, 8];
var newArr = oldArr.map((value,key,arr) => {
    console.log('value:' + value + ',key:' + key+',arr:' + arr);
    return value+1;
})
console.log('oldArr:' + oldArr); // [3,6,8]
console.log('newArr:' + newArr); // [4,7,9]

4、Array.prototype.filter数组对象内置方法,特点：

• 不改变原数组
• 必须用return true添加到新数组中，或用return false不添加到新数组中
• 直接返回return表示不添加到新数组中，相当于return false
• 常用于去掉不要的值

var oldArr = [3, 6, 8];
var newArr = oldArr.filter((value,key,arr) => {
    console.log('value:' + value + ',key:' + key+',arr:' + arr);
    if (value === 6) {
        return false;
    }
    return true;
})
console.log('oldArr:' + oldArr); // [3,6,8]
console.log('newArr:' + newArr); // [3,8]

5、Array.prototype.reduce数组对象内置方法，特点：

• 不改变原数组
• 第一个参数是函数累加器，数组中的每个值（从左到右）开始合并，最终返回一个值。
• 第二个参数(选填)如果有，函数累加器从第二个参数开始。

var oldArr = [3, 6, 8];
var newArr = oldArr.reduce((pre, cur, index, array) => {
    console.log('pre:' + JSON.stringify(pre) + ',cur:' + cur+',index:' + index + ',array:' + array);
    pre[cur] = 1;
  return pre;
}, {})
console.log('oldArr:' + oldArr); // [3, 6, 8]
console.log('newArr:' + JSON.stringify(newArr)); // {3: 1, 6: 1, 8: 1}

// 例1:将数组所有项相加
var total = [0, 1, 2, 3].reduce(function(a, b) {
    console.log('a=' + a + ',b=' + b);
    return a + b;
});
console.log(total) // 6

// 例2:数组扁平化
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    console.log('a=' + a + ',b=' + b);
    return a.concat(b);
});
console.log(flattened) // [0, 1, 2, 3, 4, 5]

6、Array.prototype.some数组对象内置方法

• 不改变原数组
• 判断数组中是否至少有一个元素满足条件，判断逻辑：只要有一个满足就返回true，只有都不满足时才返回false。类似逻辑运算符||。

var oldArr = [3, 6, 8];
var newArr = oldArr.some((value,key,arr) => {
    console.log('value:' + value + ',key:' + key+',arr:' + arr);
    return value === 6;
})
console.log('oldArr:' + oldArr); //[3, 6, 8]
console.log('newArr:' + newArr); // true

// 例:判断数组是否有大于3的元素
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log(arr.some( function( item, index, array ){  
    console.log( 'item=' + item + ',index='+index+',array='+array );  
    return item > 3;  
}));

7、Array.prototype.every数组对象内置方法

• 不改变原数组
• 判断数组中是否每个元素都满足条件，判断逻辑：只有都满足条件才返回true，只要有一个不满足就返回false。类似逻辑运算符&&。

var oldArr = [3, 6, 8];
var newArr = oldArr.every((value,key,arr) => {
    console.log('value:' + value + ',key:' + key+',arr:' + arr);
    return value === 6;
})
console.log(oldArr); //[3, 6, 8]
console.log(newArr); // false

// 例:判断数组元素是否都小于5
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log(arr.every( function( item, index, array ){  
    console.log( 'item=' + item + ',index='+index+',array='+array );  
    return item < 5;
}));

8、Array.prototype.indexOf数组对象内置方法 在数组循环过程中会和传入的参数比对，比对成功返回对比成功的下标并终止循环，比对失败返回-1。

var oldArr = [3, 6, 8];
var newArr = oldArr.indexOf(6)
console.log(oldArr); //[3, 6, 8]
console.log(newArr); // 1

9、Array.prototype.lastIndexOf数组对象内置方法 与indexOf类似，只不过查找顺序是逆向的。

10、for...in循环语句

• for循环变量i表示数组的下标是number类型，而for...in循环的变量key是string类型。
• 遍历数组是遍历数组的下标值，遍历对象是遍历对象的key值。

var arr = [3, 6, 8];
for(const value in arr){
  console.log(typeof(value))
  console.log(value)  // 结果依次为0，1，2
}

ES6中新增加了一种：

1.for...of循环语句

for(const value of [3, 6, 8]){
  console.log(value)  // 结果依次为3，6，8
}

小结： forEach,for,for...in,for...of方法仅仅只是为了循环，并不可以帮你做额外的事情； map方法是做循环改变数组值； filter方法是做循环剔除数组值； reduce方法相当于循环遍历对象做统计（累加或者累减之类的）; some和every方法相当于循环找到指定值，分别返回的是true和false； indexOf和lastIndexOf方法相当于循环找到指定值，返回给你它的门牌号（索引）。