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

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

const data = https://www.it610.com/article/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
【JS几种数组遍历方式以及性能分析对比】可以看出for in是效率最差的，原因是for in会遍历数组所有的可枚举属性，包括原型。解释器遇到for in循环时，在后台需要为对象建立一个枚举器（enumerator），这是一个昂贵的操作!

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