JS遍历循环的5种方法性能对比

map方法

map 方法用于对数组中的每个元素进行操作，并返回一个新的数组，该数组包含原数组中每个元素操作后的结果。它不会改变原数组，而是返回一个新的数组。

forEach方法

forEach 方法用于对数组中的每个元素执行一个函数，但不会返回任何值。它会遍历数组中的每个元素，并对其执行提供的函数。与 map 方法不同，forEach 方法不会创建新的数组，而是直接在原数组上进行操作。

for 循环

for 循环是一种通用的迭代结构，它可以用于迭代任何可迭代对象（如数组、字符串等）。它通过指定迭代的起始索引、结束索引和迭代步骤来遍历可迭代对象中的每个元素。

for...of迭代

for...of 只遍历可迭代对象的数据。

for...in枚举

for...in 循环会以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

/**
 * for...in会遍历出原型对象上的属性_测试结果
 * 
 * 0
 * 1
 * 2
 * arrCustom
 * objCustom
 * 
 *  */ 
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
let newArr = [999, 888, 777];

for(let index in newArr){
    console.log(index);
} 

性能比较：for > forEach 、 for...of > map > for...in

注： forEach for...of 性能对比不同环境有差异

• for：for循环没有额外的函数调用栈和上下文，所以它的实现最为简单。
• for...of：只要具有Iterator接口的数据结构，都可以使用它迭代成员，它直接读取的是键值。
• forEach：对于forEach来说，它的函数签名中包含了参数和上下文，所以性能会低于 for 循环。
• map：map 最慢的原因是因为 map 会返回一个新的数组，数组的创建和赋值会导致分配内存空间，因此会带来较大的性能开销。
• for...in：需要穷举对象的所有属性，包括自定义的添加的属性也能遍历到。且for...in的key是String类型，有转换过程，开销比较大。它直接读取的是键。

for循环是js提出时就有的循环方法。forEach和Map是ES5提出的，挂载在可迭代对象原型上的方法。for...of是ES6 提出，只遍历可迭代对象的数据。

 * JS遍历循环的5种方法性能对比_测试结果
 * 
 * for循环遍历数组所需的时间： 4
 * forEach方法遍历数组所需的时间： 13
 * map方法遍历数组所需的时间： 23
 * for...of循环遍历数组所需的时间： 21
 * for...in循环遍历数组所需的时间： 179
 * 
 * for > for...of > forEach > map > for...in
 */

// 创建一个长度为1000000的数组，每个元素都是1
const arr = new Array(1000000).fill(1); 

// 创建一个变量，用于接受当前时间戳
let time;

// 使用for循环遍历数组
time = Date.now();

for(let i = 0; i < arr.length; i++){
    arr[i] += 2;
}

console.log('for循环遍历数组所需的时间：', Date.now() - time);

// 使用forEach方法遍历数组
time = Date.now();

arr.forEach(item => item + 2);

console.log('forEach方法遍历数组所需的时间：', Date.now() - time);

// 使用map方法遍历数组
time = Date.now();

arr.map(item => item + 2);

console.log('map方法遍历数组所需的时间：', Date.now() - time);

// 使用for...of循环遍历数组
time = Date.now();

for(let item of arr){
    item += 2;
}

console.log('for...of循环遍历数组所需的时间：', Date.now() - time);

// 使用for...in循环遍历数组
time = Date.now();

for(let index in arr){
    arr[index] += 2;
}   

console.log('for...in循环遍历数组所需的时间：', Date.now() - time);