乐趣区

关于javascript: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),这是一个低廉的操作!

退出移动版