JavaScript中常用for循环性能比较

在这里博主将几个常用的基础循环,for in，foreach，map进行演练比较
先贴上代码

const async = require('./node_modules/async');
"use strict";
async.waterfall(
    [
        function (callback) {
            let arr = [];
            for (let i = 0; i < 1000000; i++) { arr.push(i); };
            console.log('--------');
            callback(null, arr);
        },
        function (arr, callback) {
            console.time("foreach循环");
            let arrThree = [];
            let j3 = 0;
            arr.forEach((e) => { j3 += e; let result = { count: e }; arrThree.push(result); });
            console.timeEnd("foreach循环");
            console.log('\n');
            callback(null, arr);
        },
        function (arr, callback) {
            console.time("for in循环");
            let j4 = 0;
            let arrFive = [];
            for (l in arr) { j4 += l; let result = { count: j4 };};
            console.timeEnd("for in循环");
            console.log('\n');
            callback(null, arr);
        },
        function (arr, callback) {
            console.time("优化版for循环");
            let j2 = 0;
            let arrOne = [];
            for (let i = 0, len = arr.length; i < len; i++) { j2 += i; let result = { count: i }; arrOne.push(result); }
            console.timeEnd("优化版for循环");
            console.log('\n');
            callback(null, arr);
        },
        function (arr, callback) {
            console.time("map循环");
            let j5 = 0;
            let arrFour = [];
            arr.map((e) => { j5 += e; let result = { count: e }; arrFour.push(result); });
            console.timeEnd("map循环");
            console.log('\n');
            callback(null, arr);
        },
        function (arr, callback) {
            console.time("标准for循环");
            let j = 0;
            let arrTwo = [];
            for (let k = 0; k < arr.length; k++) { j += k; let result = { count: k }; arrTwo.push(result); }
            console.timeEnd("标准for循环");
            callback(null, arr);
        },
    ], function (err, result) { }
)

在这里我们使用了专门会计算性能而生的console.time和timeEnd
只需要前后指定相同的字符串即可
代码直接粘过去，相信大家已经看到了结果，
每一个循环都遍历一百万个元素的数组并进行逻辑操作后，结果大致都是这样的：

foreach循环: 255.558ms


for in循环: 173.055ms


优化版for循环: 63.033ms


map循环: 291.701ms


标准for循环: 112.143ms

foreach循环: 249.944ms


for in循环: 169.830ms


优化版for循环: 63.285ms


map循环: 299.163ms


标准for循环: 103.605ms

其中优化版的基础for循环性能最强，为什么呢？
首先for循环在遍历数组时每次都会查询数组的长度，并进行判断，两次逻辑上的操作无疑是浪费了性能，
所以我们在这时对这个循环进行优化，对它声明一个临时变量，
for (var i = 0, len = list.length; i < len; ++i) {} 这样它只查询一次数组的长度，减少了逻辑操作的次数就相对的提升了性能，也就是时间复杂度
当然，这些都是在数据量庞大的时候，效果才会显而易见，最直接便是优化for循环内部的代码，它直接性的决定了循环体的性能；

for…in 效率是最低的。这是因为 for…in 有一些特殊的要求，包括：

遍历所有属性，不仅是 own properties 也包括原型链上的所有属性。
忽略 enumerable 为 false 的属性。
必须按特定顺序遍历，先遍历所有数字键，然后按照创建属性的顺序遍历剩下的。

JavaScript中常用for循环性能比较

猜你喜欢