for\for of\for in\forEach\map\while\do while\some\filter\的性能对比

循环在我们的工作当中是非常频繁使用的,每个循环应用的场景和适用的范围都有一些区别,如果只是单纯的比较哪个好哪个不好,应该是没有结果的,我这里做的性能对比,仅仅从循环读取数值上的区别。主要包括:

  • for
  • for of
  • for in
  • forEach
  • map
  • while
  • do while
  • some
  • filter

这里使用webWork跑测试例子:

    var worker = new Worker('work.js');
    worker.postMessage("message");
    this.addEventListener('message', function (e) {
        let array = []

        function initData() {
          for (let i = 0; i < 1000000; i++) {
            array.push(i)
          }
        }
        initData()
        console.log(array)
    })
function testFunction(array) {

    function testFor() {
        let newArray = []
        console.time('testFor')
        for (let i = 0; i < array.length; i++) {
            newArray.push(array[i])
        }
        console.timeEnd('testFor')
    }
    testFor()

    function testForLen() {
        let newArray = []
        console.time('testForLen')
        for (let i = 0, len = array.length; i < len; i++) {
            newArray.push(array[i])
        }
        console.timeEnd('testForLen')
    }
    testForLen()

    function testForIn() {
        let newArray = []
        console.time('testForIn')
        for (let i in array) {
            newArray.push(array[i])
        }
        console.timeEnd('testForIn')
    }
    testForIn()

    function testForOf() {
        let newArray = []
        console.time('testForOf')
        for (let i of array) {
            newArray.push(array[i])
        }
        console.timeEnd('testForOf')
    }
    testForOf()

    function testWhile() {
        let newArray = []
        console.time('testWhile')
        let i = 0
        while (i < array.length) {
            newArray.push(array[i])
            i++
        }
        console.timeEnd('testWhile')
    }
    testWhile()

    function testDoWhile() {
        let newArray = []
        console.time('testDoWhile')
        let i = 0
        do {
            newArray.push(array[i])
            i++
        } while (i < array.length);
        console.timeEnd('testDoWhile')
    }
    testDoWhile()

    function testMap() {
        let newArray = []
        console.time('testMap')
        array.map((item) => {
            newArray.push(item)
        })
        console.timeEnd('testMap')
    }
    testMap()

    function testForeach() {
        let newArray = []
        console.time('testForeach')
        array.forEach((item) => {
            newArray.push(item)
        })
        console.timeEnd('testForeach')
    }
    testForeach()

    function testFilter() {
        let newArray = []
        console.time('testFilter')
        array.filter((item) => {
            newArray.push(item)
        })
        console.timeEnd('testFilter')
    }
    testFilter()

    function testSome() {
        let newArray = []
        console.time('testSome')
        array.some((item) => {
            newArray.push(item)
        })
        console.timeEnd('testSome')
    }
    testSome()

    function testReduce() {
        let newArray = []
        console.time('testReduce')
        array.reduce((all, a) => {
            newArray.push(a)
        }, 0)
        console.timeEnd('testReduce')
    }
    testReduce()
}

1000000数据量测试

单位ms

5000000数据量测试

单位ms

10000000数据量测试

单位ms

20000000数据量测试

单位ms

测试环境

  • CPU I7 7700K
  • 内存 16G 3200HZ
  • 谷歌浏览器 80.0.3987.162(正式版本) (32 位)
  • 系统win10专业版 64位

经过上面的四轮对比:

  • 性能最强的是while,不管数据量的大小,一直稳居第一
  • 次之的do whileforfor缓存length 三者性能差距并不大,在数据量低于2千万级别时:do while > for > for缓存length,上了两千万后:for缓存length > do while > for
  • 第三梯队的forEachfiltersomereduce几乎性能相当,只有filter一直是第五,其他三者轮流换位置:filter > forEachsomereduce
  • 第四梯队的mapfor of,两者在数据量较低差距还是挺大的,当数据量上了2000W,性能差距就没那么大了:map > for of
  • 性能最差的就是for in,基本上是最快的几十倍的性能差距。

结果

while > do whileforfor缓存length > filter > forEachsomereduce > map > for of > for in;
结果不代表这些循环方法的真实最终效果,只能代表在我的电脑上,这些方法测试读取数组数据之间的差异,for of for in 更擅长对象,至于真实的效果就不太敢定论了,但是对于一般的循环 for循环的性能肯定是非常好的,所以能够用for循环就不要用mapforEach等遍历方式,当然如果真的对于性能要求并不那么高的项目,用什么的区别也不太大,毕竟在百万级别的数据读取差异上,时间差距也在几十ms上,只是对于复杂大量数据上,就要多多注意,另外仅仅在for循环上,书写方式的差异也有性能的差异。我自己也封装过一个方法,包裹for循环使它能够像forEach一样的书写方式,提高效率的同时也不影响性能。

         /**
         * 遍历工具,dataset可以是数组和对象 
         * 回调函数 handler( item, index|key, dataset)
         * break----用return false
         * continue --用return ture
         * @param   {Object | Array}        dataset                    对象或者数组
         * @param   {Function}              handler                    回调函数
         * @param   {Context}               context                    上下文this
         * @return  {Array}                                            返回对象或数组
         */
        function each(dataset, handler, context) {
            let callback = 'undefined' === typeof context ? handler : function (value, index, collection) {
                return handler.call(context, value, index, collection);
            };
            let i, len, res;
            if (dataset instanceof Array) { //数组
                i = 0;
                len = dataset.length;
                for (; i < len; i++) {
                    res = callback(dataset[i], i, dataset);
                    if (false === res) {
                        break;
                    } else if (true === res) {
                        continue;
                    }
                }
            } else { //键值对象
                let keys = getkeys(dataset);
                i = 0;
                len = keys.length;
                for (; i < len; i++) {
                    res = callback(dataset[keys[i]], keys[i], dataset);
                    if (false === res) {
                        break;
                    } else if (true === res) {
                        continue;
                    }
                }
            }
            /**
             * 获取对象自有属性名
             * @param   {any}       obj              对象
             * @return  {Array}                      返回对象key数组
             */
            function getkeys(obj) {
                if (Object.prototype.toString.call(obj).slice(8, -1) !== 'Object') {
                    return [];
                }
                if (Object.keys) {
                    return Object.keys(obj);
                }
            }
            return dataset;
        }

示例

        let object1 = {
            ke: 1,
            ke2: 2,
            ke3: 3,
            ke4: 5
        }
        each(object1, (item, key) => {
            console.log(item)
        })

        let array = [1, 2, 3, 4, 5, 6, 7]
        each(array, (item, key) => {
            console.log(item)
        })
        let array = [1, 2, 3, 4, 5, 6, 7]
        each(array, (item, key) => {
            if(item>5){
              return false                //终止循环
            }
            console.log(item)
        })

你可能感兴趣的:(for\for of\for in\forEach\map\while\do while\some\filter\的性能对比)