本文共 2580 字，大约阅读时间需要 8 分钟。

js数组遍历方法总结

1、for循环

使用临时变量存储数组长度，避免频繁调用数组长度属性更高效。此方法适合处理较大数组时节省性能资源。

for (j = 0, len = arr.length; j < len; j++) {
    
}

2、foreach循环

遍历数组元素，不返回值，不影响原数组，方法不支持IE浏览器。适用于简单逐项操作。

arr.forEach((item, index, array) => {
    
});

参数说明：value数组元素，index当前元素索引，array原数组。支持将业务逻辑放在匿名函数内。

3、map循环

与for循环类似，但支持return值操作，返回的值会被用于新生成的数组中。新数组不影响原数组内容。

var ary = [12, 23, 24, 42, 1];
var res = ary.map(function (item, index, array) {
    return item * 10;
});

原数组保存为[12, 23, 24, 42, 1]，新数组result保存为[120, 230, 240, 420, 10]。

4、for...of遍历

适合处理能响应break、continue、return语句的情景，用于遍历数组元素。属于ES6新特性。

for (var value of myArray) {
    console.log(value);
}

5、filter遍历

返回一个新的数组，包含满足条件的元素。方法不会修改原数组内容。适用于筛选操作。例如，筛选完成的任务。

var arr = [
    {id: 1, text: 'aa', done: true},
    {id: 2, text: 'bb', done: false}
];
var newarr = arr.filter(item => item.done);
console.log(newarr, arr);

等价ES5写法：

arr.filter(function (item) {
    return item.done;
});

根据条件过滤出符合需求的新数组。

6、every遍历

静态方法，判断数组中所有元素是否都满足条件。第一次找到不符合条件的元素则返回false，符合全部条件则返回true。

var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.every(function (item, index, array) {
    return item > 3;
}));

结果：false，说明数组中存在不大于3的元素

7、some遍历

方法检查数组中是否存在至少一个元素满足条件，找到符合条件的即返回true，否则返回false。

var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.some(function (item, index, array) {
    return item > 3;
}));

结果：true，表示数组中存在大于3的元素

8、reduce遍历

将数组中的所有元素通过回调处理函数累积，返回一个单一值。可以使用初始值来控制累加的初始状态。

var total = [0, 1, 2, 3, 4].reduce((a, b) => a + b);

如果提供初始值：

[0, 1, 2, 3, 4].reduce((a, b) => a + b, 5);

第一个参数是前一个累积值，第二个参数是当前元素值，第三个是索引，第四个是数组。初始值可以影响第一次调用回调时的参数值。

9、reduceRight遍历

从数组右侧开始逐步累加，方法表示为reduceRight。与reduce类似，但方向相反。省事的话可以直接使用reduce

var arr = [0, 1, 2, 3, 4];
console.log(arr.reduceRight((a, b) => a + b));

比如计算数组和可以使用reduceRight:

console.log([1,2,3,4,5].reduceRight((a, b) => a + b, 0));

10、find查找

返回数组中第一个满足Condition的元素，条件为函数返回true。如果不满足条件则返回undefined

stu.find((element) => element.name == '李四');

[1,2,3].findIndex(x => x == 2); // 返回1

[1,2,3].findIndex(x => x == 4); // 返回-1

const arr = ['a','b'];
for (const index of arr.keys()) {
    console.log('索引:', index);
}
for (const elem of arr.values()) {
    console.log('元素:', elem);
}
for (const [index, elem] of arr.entries()) {
    console.log('索引-元素:', index, elem);
}