譯者：前端小智
你知道的越多，你不知道的越多
點贊再看，養成習慣
本文 GitHub：github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了很多我的文件，和教程資料。歡迎Star和完善，大家面試可以參照考點複習，希望我們一起有點東西。
我確信有很多開發人員堅持使用基本的全域性物件：數字，字串，物件，陣列和布林值。對於許多用例，這些都是需要的。 但是如果想讓你的程式碼儘可能快速和可擴充套件，那麼這些基本型別並不總是足夠好。
在本文中，我們將討論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，歡迎 加群 互相學習。
我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨，在進階的路上，共勉！
關注公眾號，後臺回覆福利，即可看到福利，你懂的。
每次整理文章，一般都到2點才睡覺，一週4次左右，挺苦的，還望支援，給點鼓勵