javascript常用的循环对比及性能分析

结论：js中的for循环只有在处理百万条数据以上才会展示出他的强大性能,和看出明显优势，但是在百万条数据往下甚至到个位数的数据量通常都是for和while还有do...while不相上下，反而后两者更加优势明显

下面是测试耗时截图（在不同浏览器也会有所不同，我这是 Chrome 版本 111.0.5563.149）

可以复制代码直接运行测试

    <script>
        let dataList = Array(99).fill({name:'叫我书中枫叶',age:18})
        let dataObj = {name: '小明', age: 18}

        /*
        * for 循环
        * 语法：for (初始化; 条件; 步进) {循环体}
        * */
        console.time('for循环时间');
        for (let i = 0; i < dataList.length; i++) {
            // console.log("值: ",dataList[i])
        }
        console.timeEnd('for循环时间');

        /*
        * while 循环
        * 语法：while (条件) {循环体}
        * */
        console.time('while循环时间');
        let j = 0
        while (j < dataList.length) {
            // console.log("值: ",dataList[j])
            j++
        }
        console.timeEnd('while循环时间');

        /*
        * do...while 循环
        * 语法：do { 循环体 } while ( 条件 )
        * */
        console.time('do...while循环时间');
        let k = 0
        do {
            // console.log("值: ",dataList[k])
            k++
        }while (k<dataList.length)
        console.timeEnd('do...while循环时间');

        /*
        * 一般用于循环对象 和 数组会有警告
        * for...in 循环 遍历对象的属性
        * 语法：for (变量 in 对象) { 循环体 }
        * */
       /* console.time('测试for...in循环对象时间');
        for (const index in dataObj) {
            // console.log('下标：', index)
            // console.log('值：', dataList[index])
        }
        console.timeEnd('测试for...in循环对象时间');*/

        console.time('for...in循环数组时间');
        for (const index in dataList) {
            // console.log("值: ", dataList[index])
        }
        console.timeEnd('for...in循环数组时间');
        /*
        * 用于循环数组、字符串、Map、Set 等
        * for...of 循环
        * 语法：for (变量 in 可迭代对象) { 循环体 }
        * */

        console.time('for...of循环时间');
        for (const item of dataList) {
            // console.log("值: ", item)
        }
        console.timeEnd('for...of循环时间');

        /*
        * 仅用于遍历数组
        * forEach 循环 不支持 break 或 return
        * 语法：数组.forEach(function(元素, 索引, 数组) { 回调函数 }
        * */
        console.time('forEach循环时间');
        dataList.forEach((el, index, arr) => {
            // console.log("值: ", el)
        })
        console.timeEnd('forEach循环时间');
        /*
        * 仅用于遍历数组  返回一个新数组 不会修改原始数组
        * map 循环
        * 语法：const 新数组 = 数组.map(function(元素, 索引, 数组) { return 新元素; }
        * */

        console.time('map循环时间');
         dataList.map((el, index, arr) => {
             // console.log("值: ", el)
        })
        console.timeEnd('map循环时间');
        
    </script>