JavaScript中的几种for循环效率对比

JavaScript（下文简称JS）中最常用的数据结构有两种，即数组（下文用Array表示）和对象（下文用Object表示）。须要注意的是，本质上，数组也是一种对象，只不过是特殊的对象。遍历Array和Object中的元素，需要使用循环。在JS中，通常使用for循环语句来实现。那么，JS中的几种for循环写法的效率如何呢？本文做了一个简单的代码测试，仅供大家参考。注：该测试只是一个简单的测试，并不是十分严谨，相关的代码和结论仅供参考。

1. 语法说明

• 普通for循环语句

for(let i = 0, len = arr.length; i++){
  console.log(arr[i]);
}

• for...in循环语句

// Array中使用for...in语句
for(let value in arr){
  console.log(value);
}
 
// Object中使用for...in语句
for(let key in obj){
  console.log(obj[key]);
}

• for-of循环语句

// Array中使用for...of语句
for(let value of arr){
  console.log(value);
}
 
// Object中使用for...of语句（方式1）
for(let key of Object.keys(obj)){
  console.log(`${key}:\t`, obj[key]);
}
 
// Object中使用for...of语句（方式1）
for(let value of Object.values(obj)){
  console.log(value);
}
 
// Object中使用for...of语句（方式2）
for(let [key, value] of Object.entries(obj)){
  console.log(`${key}:\t`, obj[key]);
}

• forEach循环语句

// Array中使用for...of语句
arr.forEach((value, idx) => {
  console.log(`${idx}:\t`, value);
})
 
// Object中使用for...of语句（方式1）
Object.keys(obj).forEach((key, idx) => {
  console.log(`${idx}:\t${key}:\t`, value);
})
 
// Object中使用for...of语句（方式2）
Object.entries(obj).forEach((value, key) => {
  console.log(`${key}:\t`, value);
})

2. 测试结论

• 先给出大多数场景下的使用建议（并不是性能最优，但其实也差不了太多），一般而言：
  （1）对于数组（Array），如果不在循环体内使用break、continue语句时，则建议使用"forEach循环"语句，否则，使用“普通的for循环”语句；
  （2）对于对象（Object），一般使用"for...in循环"语句即可。这与同时使用Object.keys() + 数组的“forEach”方法效果一致。
  （3）对象（Object），可通过Object.entries()、Object.keys()和Object.values()方法, 转换为使用上边的数组（Array）的方式进行循环遍历。

	用法	Array	Object	备注
for...	for(let i = 0, len = arr.length; i++)	最快	-	普通的for循环,只能用于Array
for...in	for(let el in arr){...}, for(let key in obj)	最慢	最快	for-in语句
for...of	for()	较慢	较快	for-of语句,对于Object需要使用Object.keys()、Object.values()或Object.entries()方法进行迭代
forEach...		较快	最慢	forEach语句

3. 测试代码

function doObjForLoop1(obj){
    let startTime = performance.now();
    for(let key in obj){
        // console.log(key, obj[key]);
    }
    let endTime = performance.now();
    console.log((endTime - startTime) + "ms");
}
 
function doObjForLoop2(obj){
    let startTime = performance.now();
    for(let key of Object.keys(obj)){
        // console.log(key, obj[key]);
    }
    let endTime = performance.now();
    console.log((endTime - startTime) + "ms");
}
 
function doObjForLoop3(obj){
    let startTime = performance.now();
    for(let [key, value] of Object.entries(obj)){
        // console.log(key, value);
    }
    let endTime = performance.now();
    console.log((endTime - startTime) + "ms");
}
 
function doObjForLoop4(obj){
    let startTime = performance.now();
    Object.entries(obj).forEach((value, key) =>{
        // console.log(key, value);
    })
    let endTime = performance.now();
    console.log((endTime - startTime) + "ms");
}
 
 
// -------------------------------------------------------------
 
 
function doArrForLoop1(arr){
    let startTime = performance.now();
    for(let i, len=arr.length; i < len; i++){
        // console.log(key, value);
    }
    let endTime = performance.now();
    console.log((endTime - startTime) + "ms");
}
 
function doArrForLoop2(arr){
    let startTime = performance.now();
    for(let v of arr){
        // console.log(key, value);
    }
    let endTime = performance.now();
    console.log((endTime - startTime) + "ms");
}
 
function doArrForLoop3(arr){
    let startTime = performance.now();
    arr.forEach((v, idx) => {
        // console.log(key, value);
    })
    let endTime = performance.now();
    console.log((endTime - startTime) + "ms");
}
 
function doArrForLoop4(arr){
    let startTime = performance.now();
    for(let i in arr){
        // console.log(key, value);
    }
    let endTime = performance.now();
    console.log((endTime - startTime) + "ms");
}
 
 
//开始测试并输出
export function main(){
    let obj = {};
    let arr = []
    for(let i = 0; i < 1000000; i++){
        obj['k' + i] = {"a": i};
        arr.push(i);
    }
 
    doObjForLoop1(obj);
    doObjForLoop2(obj);
    doObjForLoop3(obj);
    doObjForLoop4(obj);
 
    console.log('------------------------');
 
    doArrForLoop1(arr);
    doArrForLoop2(arr);
    doArrForLoop3(arr);
    doArrForLoop4(arr);
}