JS数组遍历时间比较

JS数组遍历时间比较

不多bb，先说结论，常规for循环优化版倒序最快，for…in最慢,其是前者的400倍左右！

先说下常用的遍历数组方式

• 常规for循环
• 常规for循环优化版
• 常规for循环优化版倒序
• 常规for循环直到数组长度
• foreach
• for…in
• for…of

先来个数组当小白鼠

let arr = [];
for (let i = 0; i < 10000000; i++) {arr[i] = i;
}


定义两个接收时间的变量

let t1;//开始时间
let t2;//结束时间


接下来就是测试了

（浏览器分别是火狐和谷歌，火狐在前；分别测五次）
（白色火狐，深色谷歌）

1.常规for循环

{t1 = new Date().getTime();for (let i = 0; i < arr.length; i++) {}t2 = new Date().getTime();console.log("普通for:" + (t2 - t1));}


2.常规for循环优化版

{t1 = new Date().getTime();for (let i = 0, len = arr.length; i < len; i++) {}t2 = new Date().getTime();console.log("改进for:" + (t2 - t1));}


3.常规for循环优化版倒序

{t1 = new Date().getTime();let len;for (let len = arr.length; len > 0; len--) {}t2 = new Date().getTime();console.log("常规for循环优化版倒序:" + (t2 - t1) + "ms");}


4.常规for循环直到数组长度

{t1 = new Date().getTime();for (let i = 0; arr[i] != null; i++) {}t2 = new Date().getTime();console.log("常规for循环直到数组长度:" + (t2 - t1) + "ms");}


5.foreach

{t1 = new Date().getTime();arr.forEach((element, index) => {});t2 = new Date().getTime();console.log("foreach:" + (t2 - t1) + "ms");}


6.for…in

{t1 = new Date().getTime();for (let i in arr) {}t2 = new Date().getTime();console.log("for in:" + (t2 - t1) + "ms");}


注意，火狐此测试的数组长度是其他测试长度（10000000）的百分之1

7.for…of

{t1 = new Date().getTime();for (let i of arr) {//i位数组对象}t2 = new Date().getTime();console.log("for of:" + (t2 - t1) + "ms");}


到此，所有测试完毕。再次注意，forin的火狐测试数组长度是其他测试的百分之1（因为火狐太慢了）

总结

提示：所测试的数组长度为10000000，但测试forin火狐浏览器时改成百分之1（因为太慢了），其下表时间乘以100

综上所述


常规for循环优化版倒序 综合最快

for (let len = arr.length; len > 0; len--) {}


for…in 最慢

for (let i in arr) {//i为索引}