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

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

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

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

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

console.time('for');
for (let i = 0; i < data.length; i++) {
}
console.timeEnd('for');

耗时：15.292ms

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

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

耗时：14.858ms

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

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

耗时：46.842ms

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

console.time('forEach');
data.forEach(item => {
});
console.timeEnd('forEach');

耗时：191.116ms

（5）原型forEach
由于forEach是Array型自带的，对于一些非这种类型的，无法直接使用(如NodeList)，所以才有了这个变种，使用这个变种可以让类似的数组拥有forEach功能。

console.time('forEach');
Array.prototype.forEach.call(data, item => {
});
console.timeEnd('forEach');

耗时：187.169ms

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

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

耗时：258.481ms

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

console.time('for of');
for (let item of data) {
}
console.timeEnd('for of');

耗时：247.011ms

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

console.time('for in');
for (let key in data) {
}
console.timeEnd('for in');

耗时：9015.457ms

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