JS几种数组遍历方式以及性能分析对比

我们平时处理数据经常会用到JS循环遍历方法，数组的遍历方法有很多种，如for、while、forEach、map等，它们的执行效率各不相同，我们来分析对比一下。

创建一个有1000w条数据的数组，遍历该数组，比较性能：

const data = new Array(1000000).fill(0);

（1）普通for循环
最简单的一种遍历方式，也是最传统的循环语句，使用频率最高，性能较好，以下代码计算10次，取平均值（下同）。

console.time('for');
const result = [];
for (let i = 0; i < data.length; i++) {
    result.push(data[i]);
}
console.timeEnd('for');

耗时：248.706ms

（2）优化版for循环
使用临时变量，将长度缓存起来，避免重复获取数组长度，尤其是当数组长度较大时优化效果才会更加明显。

console.time('for');
const result = [];
for (let i = 0, len = data.length; i < len; i++) {
    result.push(data[i]);
}
console.timeEnd('for');

耗时：236.255ms

（3）while
while循环会一直循环代码块，直到指定的条件为false。对比for循环，for中局部变量在循环结束后会被释放回收，while需要在循环之前定义好变量，性能接近。

console.time('while');
const result = [];
let i = 0, len = data.length;
while (i < len) {
    result.push(data[i]);
    i++;
}
console.timeEnd('while');

耗时：259.418ms

（4）forEach
对数组中的每一个元素运行给定的函数，没有返回值，使用频率较高，实际上性能比for循环弱。

console.time('forEach');
const result = [];
data.forEach(item => {
    result.push(item);
});
console.timeEnd('forEach');

耗时：437.763ms

（5）map
返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，map不会改变原始数组。

console.time('map');
const result = [];
data.map(item => {
    result.push(item);
});
console.timeEnd('map');

耗时：625.943ms

console.time('map');
const result = data.map(item => {
    return item;
});
console.timeEnd('map');

耗时：248.121ms

（6）for of
允许循环遍历可迭代的数据结构，例如数组、字符串、映射、节点列表等，但是不能遍历对象。

console.time('for of');
const result = [];
for (let item of data) {
    result.push(item);
}
console.timeEnd('for of');

耗时：585.768ms

（7）for in
任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

console.time('for in');
const result = [];
for (let key in data) {
    result.push(data[key]);
}
console.timeEnd('for in');

耗时：10444.472ms

可以看出for in是效率最差的，原因是for in会遍历数组所有的可枚举属性，包括原型。解释器遇到for in循环时，在后台需要为对象建立一个枚举器（enumerator），这是一个昂贵的操作!