JS之测试各种遍历对象的效率

最新推荐文章于 2022-09-17 22:07:00 发布

PeaceCode

最新推荐文章于 2022-09-17 22:07:00 发布

阅读量276

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_50238437/article/details/126450998

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

- 测试各种遍历对象的效率
- 测试各种遍历数组的效率

测试各种遍历对象的效率

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试各种遍历对象的效率</title>
</head>

<body>
  <script>
    /* 
    测试: for...in / Object.keys & forEach
    耗时: 差不多
    */
    const obj = new Object();
    for (let i = 0; i < 100000; i++) {
      obj[i] = 1
    }

    // for..in 
    console.time() // 计时开始
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        // const element = obj[key];
      }
    }
    console.timeEnd() // 计时结束，算出时间差


    // Object.keys() + forEach
    console.time() // 计时开始
    Object.keys(obj).forEach(key => {
      // let element32 = obj[key]
    })
    console.timeEnd() // 计时结束，算出时间差
  </script>
</body>

</html>

测试各种遍历数组的效率

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试各种遍历数组的效率</title>
</head>

<body>
  <script>
    /* 
    测试: for...in / for / forEach / Object.keys&forEach / while / for...of
      耗时: keys&forEach | for...in | for..of >>> for | forEach | while
    */
    const arr = new Array();
    for (let i = 0; i < 100000; i++) {
      arr.push(1)
    }

    // for..in  // 会查找原型链
    console.time()
    for (const key in arr) {
      let element = arr[key];
    }
    console.timeEnd()

    //for
    console.time()
    for (let index = 0; index < arr.length; index++) {
      let element2 = arr[index];
    }
    console.timeEnd()

    // forEach
    console.time()
    arr.forEach(item => {
      let element3 = item;
    })
    console.timeEnd()

    // Object.keys() + forEach  额外多产生了一个数组
    console.time()
    Object.keys(arr).forEach(index => {
      let element32 = arr[index]
    })
    console.timeEnd()



    // while
    console.time()
    const length = arr.length
    let index = 0
    while (index++ < length) {
      let element4 = arr[index]
    }
    console.timeEnd()

    // for..of  // 会查找原型链
    console.time()
    for (const value of arr) {

    }
    console.timeEnd()
  </script>
</body>

</html>