如何使用 Set 來提升JS代碼的性能

摘要： 高效使用Set！

• 做者：前端小智
• 原文：如何使用 Set 來提升代碼的性能

Fundebug經受權轉載，版權歸原做者全部。

爲了保證的可讀性，本文采用意譯而非直譯。

我確信有不少開發人員堅持使用基本的全局對象：數字，字符串，對象，數組和布爾值。對於許多用例，這些都是須要的。 可是若是想讓你的代碼儘量快速和可擴展，那麼這些基本類型並不老是足夠好。

在本文中，咱們將討論JS 中Set對象如何讓代碼更快— 特別擴展性方便。 Array 和Set工做方式存在大量的交叉。可是使用Set會比Array在代碼運行速度更有優點。

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倍

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

測試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²)，慢得多！

參考

• 10個JavaScript難點
• 10個最佳ES6特性

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對一、微脈、青團社等衆多品牌企業。歡迎你們免費試用！