你知道JavaScript所有的循环方法中哪个性能最佳吗？

原创

水货程序猿本猿 2024-11-23 10:06:52 博主文章分类：水货程序员踩坑历险记 ©著作权

文章标签 遍历数组数组元素数组 JavaScript 文章分类 JavaScript 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者水货程序猿本猿的原创作品，请联系作者获取转载授权，否则将追究法律责任

在JavaScript中，有多种循环方法可以用来遍历数组或集合。不同的循环方法在性能上有所差异，了解这些差异有助于在实际开发中选择最适合的循环方法，正好今天无聊想测试一下看看到底是哪个循环方法性能最好。开造！！！！！

常见的JavaScript循环方法

for 循环
while 循环
do-while 循环
for-in 循环
for-of 循环
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.every
Array.prototype.some

测试环境

计算机硬件

你知道JavaScript所有的循环方法中哪个性能最佳吗？_JavaScript

开发环境

浏览器：Google
前端环境：Vue2
Node版本： v16.20.2

测试代码

<script>
export default {
  data() {
    return {
      results: []
    }
  },
  mounted() {
    this.runTests();
  },
  methods: {
    runTests() {
      const array = Array.from({ length: 1000000 }, (_, i) => i); // 生成一个包含100万个元素的数组

      const testPerformance = (func, label) => {
        const start = performance.now(); // 记录开始时间
        for (let i = 0; i < 10; i++) {
          func(array); // 执行10次循环
        }
        const end = performance.now(); // 记录结束时间
        const averageTime = ((end - start) / 10).toFixed(2); // 计算平均执行时间
        console.log(`${label}: ${averageTime} ms`); // 打印执行时间
        this.results.push({ label, time: averageTime }); // 将结果添加到results数组中
      };

      // 1. for 循环
      testPerformance((arr) => {
        for (let i = 0; i < arr.length; i++) {
          arr[i]; // 访问数组元素
        }
      }, 'for 循环');

      // 2. while 循环
      testPerformance((arr) => {
        let i = 0;
        while (i < arr.length) {
          arr[i]; // 访问数组元素
          i++;
        }
      }, 'while 循环');

      // 3. do-while 循环
      testPerformance((arr) => {
        let i = 0;
        do {
          arr[i]; // 访问数组元素
          i++;
        } while (i < arr.length);
      }, 'do-while 循环');

      // 4. for-in 循环
      testPerformance((arr) => {
        for (const key in arr) {
          arr[key]; // 访问数组元素
        }
      }, 'for-in 循环');

      // 5. for-of 循环
      testPerformance((arr) => {
        for (const item of arr) {
          item; // 访问数组元素
        }
      }, 'for-of 循环');

      // 6. forEach 循环
      testPerformance((arr) => {
        arr.forEach(item => item); // 遍历数组元素
      }, 'forEach');

      // 7. map 函数
      testPerformance((arr) => {
        arr.map(item => item); // 遍历数组元素并返回新数组
      }, 'map 函数');

      // 8. filter 函数
      testPerformance((arr) => {
        arr.filter(item => true); // 遍历数组元素并过滤
      }, 'filter 函数');

      // 9. reduce 函数
      testPerformance((arr) => {
        arr.reduce((acc, item) => acc + item, 0); // 遍历数组元素并累加
      }, 'reduce 函数');

      // 10. every 函数
      testPerformance((arr) => {
        arr.every(item => true); // 遍历数组元素并检查是否满足条件
      }, 'every 函数');

      // 11. some 函数
      testPerformance((arr) => {
        arr.some(item => false); // 遍历数组元素并检查是否满足条件
      }, 'some 函数');
    }
  }
}
</script>