includes和Set方法判断数组是否存在某个元素

56 阅读1分钟

​ 今天在看react文档的时候发现这样一段话: 在这里插入图片描述 所以就想尝试下,做了一个简单的demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let n = 10000000
    let arr = new Array(n)
    for(let i = 0; i < n;i++) {
      arr[i] = i+1
    }
    console.time("includes-task");
    console.log(arr.includes(n))
    console.timeEnd("includes-task"); 

    const ids = new Set(arr)
    console.time("set-task");
    console.log(ids.has(n))
    console.timeEnd("set-task"); 

  </script>
</body>
</html>

运行结果如下:在这里插入图片描述 结果确实如官网所说:随着n的增大,时间差距越明细,Set has的性能更好。

但是上面的情况其实忽略了new Set这样一个过程,经过代码测试,发现这个过程极其耗费时间!我们可以修改一下代码如下:

 console.time("set-task");
 constids = new Set(arr)
 console.log(ids.has(n))
 console.timeEnd("set-task"); 

运行结果如下: 在这里插入图片描述 反而这个时候includes方法更好一些,这个时候就比较疑惑React官网的介绍了。。。 另外还有一种极限情况,就是n过于大,会导致Set方法内存溢出。。。 希望有大佬可以帮忙解释一下React官网那种适用于什么情况,感谢!!!