【8.6】Set 和 Array 对比和适用场景

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

我们写 js 代码，在使用 Set 和 Array 时，可能一开始会分不清他们的使用场景，这篇文章是 Set 和 Array 从一些方面的对比，最后总结一下他们的使用场景

存储方式

Set 使用键值对的方式储存，Array 采用索引的方式

性能

因为存储方式的不同，对于查找操作来说，Set 的时间复杂度是 O(1)，Array 是 O(n)，Set 的性能会更好一些，下面通过例子进行一些对比：

// 数据准备
const arr = Array.from({length: 1000000});
const set = new Set(arr);

// 查询操作
console.time('Array'); 
arr.indexOf(666666) !== -1; 
console.timeEnd('Array');
console.time('Set'); 
set.has(666666); 
console.timeEnd('Set');

// Array: 1.02001953125 ms
// Set: 0.008056640625 ms

从查询的例子可以看出，Array 的查找速度大约是 Set 的 127 倍，这和他们的存储方式是相关的

// 删除操作
console.time('Array'); 
arr.splice(666666, 1)
console.timeEnd('Array');
console.time('Set'); 
set.delete(666666)
console.timeEnd('Set');

// Array: 0.69189453125 ms
// Set: 0.011962890625 ms

从删除的例子可以看出，Array 的删除速度大约是 Set 的 62 倍。

这个例子里两者 api 的用法是有区别的，Array splice 的第一个参数是 index，Set delete 的参数是 value，之所以可以用 value，是因为 Set 的一个特性，内部元素不会重复，这一点在去重的场景非常适用：

const arr = [1,1,2,2,3];
Array.from(new Set(arr1));  // [1,2,3]

Array 和 Set 之间的转换

Array 到 Set：new Set(array)

Set 到 Array：Array.from(set)

Array 和 Set 的适用场景

个人认为，利用 Set 的去重、时间复杂度低的优势，Set 可以用于数组去重、大数据量查找、新增、删除等场景，这样可以有效的降低时间复杂度，加快执行速度。

Array 在已有程序中应用很普遍，另外也有更多的相关 api 操作，之后还是会大量使用。

总结起来是，Set 不需要替换 Array，可以在 Set 有优势的场景下按需使用。