如何使用JavaScript Set集合更快地編寫(xiě)代碼
我敢肯定,有很多開(kāi)發(fā)人員堅(jiān)持使用基本的全局對(duì)象:number,string,object,array和boolean值。
對(duì)于許多用例,這些都是你所需要的。但是,如果你想使代碼盡可能快和可擴(kuò)展,那么這些基本類(lèi)型并不總是足夠好。
在本文中,我們將討論JavaScript的 Set集合如何使你的代碼更快,尤其是在擴(kuò)展時(shí)。數(shù)組可以執(zhí)行的操作與Set可以執(zhí)行的操作之間存在大量的交叉。使用Set往往會(huì)帶來(lái)數(shù)組無(wú)法實(shí)現(xiàn)的運(yùn)行時(shí)優(yōu)勢(shì)。在這篇文章中,我們將探討如何做到這一點(diǎn)。
Set有何不同?
最根本的區(qū)別是數(shù)組是索引集合,這意味著數(shù)組中的數(shù)據(jù)值由索引排序。
- const arr = [A, B, C, D];
- console.log(arr.indexOf(A)); // Result: 0
- console.log(arr.indexOf(C)); // Result: 2
相比之下,Set是一個(gè)鍵控集合。 Set使用鍵對(duì)數(shù)據(jù)進(jìn)行排序,而不是使用索引。Set的元素可以按插入順序進(jìn)行迭代,并且不能包含任何重復(fù)數(shù)據(jù)。換句話說(shuō),集合中的每個(gè)項(xiàng)目都必須是唯一的。
主要好處是什么?
直接比較,Set集合比數(shù)組具有多個(gè)優(yōu)點(diǎn),特別是在運(yùn)行時(shí)間上更快:
- 搜索項(xiàng)目:使用 indexOf() 或 includes() 檢查數(shù)組中是否存在某項(xiàng)比較慢。
- 刪除項(xiàng)目:在Set集合中,可以按項(xiàng)目的值刪除項(xiàng)目。在數(shù)組中,等效項(xiàng)是根據(jù)元素的索引使用 splice()。與上一點(diǎn)一樣,依賴(lài)索引的速度很慢。
- 插入項(xiàng)目:與使用 push(),unshift() 或等效方法將項(xiàng)目添加到數(shù)組相比,將項(xiàng)目添加到Set更快。
- 儲(chǔ)存NaN:你不能使用 indexOf() 或 include() 來(lái)查找值 NaN,而Set可以存儲(chǔ)該值。
- 刪除重復(fù)項(xiàng):Set對(duì)象僅存儲(chǔ)唯一值。如果要避免存儲(chǔ)重復(fù)項(xiàng),則這是優(yōu)于數(shù)組的顯著優(yōu)勢(shì),在數(shù)組中,需要附加代碼來(lái)處理重復(fù)項(xiàng)。
時(shí)間的復(fù)雜度是多少?
數(shù)組用于搜索項(xiàng)目的方法的線性時(shí)間復(fù)雜度為O(N)。換句話說(shuō),運(yùn)行時(shí)間以與數(shù)據(jù)大小增加相同的速率增加。
相比之下,Set用于搜索,刪除和插入項(xiàng)目的方法的時(shí)間復(fù)雜度僅為O(1)——這意味著數(shù)據(jù)的大小實(shí)際上與這些方法的運(yùn)行時(shí)間無(wú)關(guān)!
Set集合的速度究竟快多少?
盡管運(yùn)行時(shí)間可能會(huì)因所使用的系統(tǒng),所提供數(shù)據(jù)的大小和其他變量而有很大不同,但我希望我的測(cè)試結(jié)果能使你對(duì)Set的運(yùn)行速度有實(shí)際的了解。我將分享我做的三個(gè)簡(jiǎn)單測(cè)試和獲得的結(jié)果。
1. 準(zhǔn)備測(cè)試
在運(yùn)行任何測(cè)試之前,讓我們創(chuàng)建一個(gè)數(shù)組和一個(gè)Set,每個(gè)數(shù)組具有一百萬(wàn)個(gè)條目。為簡(jiǎn)單起見(jiàn),我將從0開(kāi)始,一直到999,999。
- let arr = [], set = new Set(), n = 1000000;
- for (let i = 0; i < n; i++) {
- arr.push(i);
- set.add(i);
- }
2. 測(cè)試一:搜索項(xiàng)目
首先,讓我們搜索數(shù)字 123123,我們知道它將返回true。
- let result;
- console.time('Array');
- result = arr.indexOf(123123) !== -1;
- console.timeEnd('Array');
- console.time('Set');
- result = set.has(123123);
- console.timeEnd('Set');
結(jié)果:Array: 0.173ms,set: 0.023ms,set的速度快了7.54倍。
3. 測(cè)試二:添加項(xiàng)目
現(xiàn)在,讓我們向每個(gè)集合中添加一個(gè)新項(xiàng)目。
- console.time('Array');
- arr.push(n);
- console.timeEnd('Array');
- console.time('Set');
- set.add(n);
- console.timeEnd('Set');
結(jié)果:Array: 0.018ms,set: 0.003ms,set速度提高了6.73倍。
4. 測(cè)試三:刪除項(xiàng)目
最后,讓我們從每個(gè)集合中刪除一個(gè)項(xiàng)目(我們可以使用剛剛添加的項(xiàng)目)。沒(méi)有內(nèi)置的數(shù)組方法,因此我們將創(chuàng)建一個(gè)輔助函數(shù)以保持所有內(nèi)容的整潔:
- const deleteFromArr = (arr, item) => {
- let index = arr.indexOf(item);
- return index !== -1 && arr.splice(index, 1);
- };
這是測(cè)試的代碼:
- console.time('Array');
- deleteFromArr(arr, n);
- console.timeEnd('Array');
- console.time('Set');
- set.delete(n);
- console.timeEnd('Set');
結(jié)果:Array: 1.122ms,set: 0.015ms,在這個(gè)例子中,Set的速度是驚人的74.13倍!
總的來(lái)說(shuō),我們可以看到,使用Set而不是數(shù)組可以極大地改善運(yùn)行時(shí)?,F(xiàn)在讓我們來(lái)看看一些實(shí)際的例子,在這些例子中,Set集合是有用的。
案例1:從數(shù)組中刪除重復(fù)的值
如果要快速?gòu)臄?shù)組中刪除重復(fù)的值,可以將其轉(zhuǎn)換為Set。到目前為止,這是過(guò)濾唯一值的最簡(jiǎn)潔的方法:
- const duplicateCollection = ['A', 'B', 'B', 'C', 'D', 'B', 'C'];
- // 如果要將數(shù)組變成Set集合
- let uniqueCollection = new Set(duplicateCollection);
- console.log(uniqueCollection) // Result: Set(4) {"A", "B", "C", "D"}
- // 如果你想將值保留在數(shù)組中
- let uniqueCollection = [...new Set(duplicateCollection)];
- console.log(uniqueCollection) // Result: ["A", "B", "C", "D"]
案例2:一個(gè)Google面試問(wèn)題
給定一個(gè)無(wú)序的整數(shù)數(shù)組和一個(gè)值 sum,如果可以相加任何兩個(gè)項(xiàng)目以使它們等于 sum 的值,則返回 true。否則,返回false。
因此,如果給定數(shù)組 [3,5,1,4] 和值 9,則我們的函數(shù)應(yīng)返回 true,因?yàn)?4 + 5 = 9。
解決這個(gè)問(wèn)題的一種很好的方法是遍歷數(shù)組,同時(shí)創(chuàng)建一組Set。
讓我們將這種想法應(yīng)用于上面的示例。當(dāng)我們遇到 3 時(shí),可以將 6 加到我們的Set中,因?yàn)槲覀冎牢覀冃枰业揭粋€(gè) 9 的和。然后,每次我們接觸數(shù)組中的新值時(shí),我們都可以檢查它是否在我們的Set中。當(dāng)我們到了 5 ,我們就會(huì)把 4 加入到我們的Set中。然后,當(dāng)我們最終遇到 4 時(shí),我們也會(huì)在我們的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;
- };
這是一個(gè)更簡(jiǎn)潔的版本:
- const findSum = (arr, sum) =>
- arr.some((set => n => set.has(n) || !set.add(sum - n))(new Set));
因?yàn)镾et.prototype.has() 的時(shí)間復(fù)雜度僅為O(1),所以使用Set來(lái)存儲(chǔ)而不是數(shù)組可以幫助我們整體解決方案獲得線性運(yùn)行時(shí)間O(N)。
如果我們改為依賴(lài) Array.prototype.indexOf() 或 Array.prototype.includes() ,它們的時(shí)間復(fù)雜度均為O(N),則總運(yùn)行時(shí)間將為O(N²),慢得多!
如果你以前從未接觸過(guò)JavaScript Set,希望我已經(jīng)展示了它們的實(shí)用性!