首頁 > web前端 > js教程 > 主體

詳解使用 Set 來提高JS程式碼效能的方法

青灯夜游
發布: 2021-01-14 19:01:31
轉載
1937 人瀏覽過

詳解使用 Set 來提高JS程式碼效能的方法

我確信有很多開發人員堅持使用基本的全域對象:數字,字串,對象,數組和布林值。對於許多用例,這些都是需要的。但是如果你想讓你的程式碼盡可能快速和可擴展,那麼這些基本類型並不總是足夠好。

在本文中,我們將討論JS 中Set物件如何讓程式碼更快— 特別擴充性方便。 ArraySet工作方式存在大量的交叉。但是使用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(&#39;Array&#39;); 
result = arr.indexOf(123123) !== -1; 
console.timeEnd(&#39;Array&#39;);
console.time(&#39;Set&#39;); 
result = set.has(123123); 
console.timeEnd(&#39;Set&#39;);
登入後複製
  • Array: 0.173ms
  • Set: 0.023ms

Set 速度快了7.54倍數

測試2:新增元素

console.time(&#39;Array&#39;); 
arr.push(n);
console.timeEnd(&#39;Array&#39;);
console.time(&#39;Set&#39;); 
set.add(n);
console.timeEnd(&#39;Set&#39;);
登入後複製
  • 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(&#39;Array&#39;); 
deleteFromArr(arr, n);
console.timeEnd(&#39;Array&#39;);
console.time(&#39;Set&#39;); 
set.delete(n);
console.timeEnd(&#39;Set&#39;);
登入後複製
  • # Array: 1.122ms
  • Set: 0.015ms

Set 速度快了74.13

總的來說,我們可以看到,使用Set 大幅改善運行時間。再來看看一些Set有用的實際例子。

案例1:從陣列中刪除重複的值

如果想要快速地從陣列中刪除重複的值,可以將其轉換為一個Set 。這是迄今為止過濾惟一值最簡潔的方法:

const duplicateCollection = [&#39;A&#39;, &#39;B&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;, &#39;B&#39;, &#39;C&#39;];
// 将数组转换为 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:Google面試問題

問題:

# #給定一個整數無序數組和變數

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²),慢得多!

原文地址:https://medium.com/@bretcameron/how-to-make-your-code-faster-using-javascript-sets-b432457a4a77

更多编程相关知识,请访问:编程入门!!

以上是詳解使用 Set 來提高JS程式碼效能的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板