如何使用 Set 来提升代码的性能

译者：前端小智

原文：medium.com/@bretcamero…

阿里云最近在作活动，低至2折，有兴趣能够看看：promotion.aliyun.com/ntms/yunpar…

---

我确信有不少开发人员坚持使用基本的全局对象：数字，字符串，对象，数组和布尔值。对于许多用例，这些都是须要的。 可是若是想让你的代码尽量快速和可扩展，那么这些基本类型并不老是足够好。

在本文中，咱们将讨论JS 中Set对象如何让代码更快— 特别扩展性方便。 Array 和Set工做方式存在大量的交叉。可是使用Set会比Array在代码运行速度更有优点。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

Set 有何不一样

最根本的区别是数组是一个索引集合，这说明数组中的数据值按索引排序。

const arr = [A, B, C, D];
console.log(arr.indexOf(A)); // Result: 0
console.log(arr.indexOf(C)); // Result: 2
复制代码

相比之下，set是一个键的集合。set不使用索引，而是使用键对数据排序。set 中的元素按插入顺序是可迭代的，它不能包含任何重复的数据。换句话说，set中的每一项都必须是唯一的。

主要的好处是什么

set 相对于数组有几个优点，特别是在运行时间方面：

• 查看元素：使用indexOf()或includes()检查数组中的项是否存在是比较慢的。

• 删除元素:在Set中，能够根据每项的的 value 来删除该项。在数组中，等价的方法是使用基于元素的索引的splice()。与前一点同样，依赖于索引的速度很慢。

• 保存 NaN：不能使用indexOf()或 includes() 来查找值 NaN，而 Set 能够保存此值。

• 删除重复项:Set对象只存储唯一的值,若是不想有重复项存在，相对于数组的一个显著优点，由于数组须要额外的代码来处理重复。

时间复杂度？

数组用来搜索元素的方法时间复杂度为0(N)。换句话说，运行时间的增加速度与数据大小的增加速度相同。

相比之下，Set用于搜索、删除和插入元素的方法的时间复杂度都只有O(1)，这意味着数据的大小实际上与这些方法的运行时间无关。

Set 究竟有多快？

虽然运行时间可能会有很大差别，具体取决于所使用的系统，所提供数据的大小以及其余变量，但我但愿个人测试结果可以让你真实地了解Set的速度。 我将分享三个简单的测试和我获得的结果。

准备测试

在运行任何测试以前，建立一个数组和一个 Set，每一个数组和 Set 都有100万个元素。为了简单起见，我从0开始，一直数到999999。

let arr = [], set = new Set(), n = 1000000;
for (let i = 0; i < n; i++) {
  arr.push(i);
  set.add(i);
}
复制代码

测试1：查找元素

咱们搜索数字123123

let result;
console.time('Array'); 
result = arr.indexOf(123123) !== -1; 
console.timeEnd('Array');
console.time('Set'); 
result = set.has(123123); 
console.timeEnd('Set');
复制代码

• Array: 0.173ms
• Set: 0.023ms

Set 速度快了7.54倍

测试2：添加元素

console.time('Array'); 
arr.push(n);
console.timeEnd('Array');
console.time('Set'); 
set.add(n);
console.timeEnd('Set');
复制代码

• Array: 0.018ms
• Set: 0.003ms

Set 速度快了6.73倍

测试3：删除元素

最后，删除一个元素，因为数组没有内置方法，首先先建立一个辅助函数：

const deleteFromArr = (arr, item) => {
  let index = arr.indexOf(item);
  return index !== -1 && arr.splice(index, 1);
};
复制代码

这是测试的代码：

console.time('Array'); 
deleteFromArr(arr, n);
console.timeEnd('Array');
console.time('Set'); 
set.delete(n);
console.timeEnd('Set');
复制代码

• Array: 1.122ms
• Set: 0.015ms

Set 速度快了74.13倍

总的来讲，咱们能够看到，使用Set 极大地改善运行时间。再来看看一些Set有用的实际例子。

案例1:从数组中删除重复的值

若是想快速地从数组中删除重复的值，能够将其转换为一个 Set。这是迄今为止过滤唯一值最简洁的方法:

const duplicateCollection = ['A', 'B', 'B', 'C', 'D', 'B', 'C'];
// 将数组转换为 Set
let uniqueCollection = new Set(duplicateCollection);
console.log(uniqueCollection) // Result: Set(4) {"A", "B", "C", "D"}
// 值保存在数组中
let uniqueCollection = [...new Set(duplicateCollection)];
console.log(uniqueCollection) // Result: ["A", "B", "C", "D"]
复制代码

案例2：谷歌面试问题

问题：

给定一个整数无序数组和变量 sum，若是存在数组中任意两项和使等于 sum 的值，则返回true。不然,返回false。例如，数组[3,5,1,4]和 sum = 9，函数应该返回true，由于4 + 5 = 9。

解答

解决这个问题的一个很好的方法是遍历数组，建立 Set保存相对差值。

当咱们遇到3时，咱们能够把6加到Set中, 由于咱们知道咱们须要找到9的和。而后，每当咱们接触到数组中的新值时，咱们能够检查它是否在 Set 中。当遇到5时，在 Set 加上4。最后，当咱们最终遇到4时，能够在Set中找到它，就返回true。

const findSum = (arr, val) => {
  let searchValues = new Set();
  searchValues.add(val - arr[0]);
  for (let i = 1, length = arr.length; i < length; i++) {
    let searchVal = val - arr[i];
    if (searchValues.has(arr[i])) {
      return true;
    } else {
      searchValues.add(searchVal);
    }
  };
  return false;
};
复制代码

简洁的版本：

const findSum = (arr, sum) =>
  arr.some((set => n => set.has(n) || !set.add(sum - n))(new Set));
复制代码

由于Set.prototype.has()的时间复杂度仅为O(1)，因此使用 Set 来代替数组，最终使整个解决方案的线性运行时为O(N)。

若是使用 Array.prototype.indexOf()或Array.prototype.includes()，它们的时间复杂度都为 O(N)，则总运行时间将为O(N²)，慢得多！

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

交流（欢迎加入群，群工做日都会发红包，互动讨论技术）

为了回馈读者，《大迁世界》不按期举行(每月一到三次)，现金抽奖活动，保底200，外加用户赞扬，但愿你能成为大迁世界的小锦鲤，快来试试吧

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

github.com/qq449245884…

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。

每次整理文章，通常都到2点才睡觉，一周4次左右，挺苦的，还望支持，给点鼓励