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

发表于 | 分类于

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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这样一个过程，经过代码测试，发现这个过程极其耗费时间！我们可以修改一下代码如下：

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

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