當前位置：首頁 > 科技 > 軟件

JavaScript 新增七個方法，很實用！

來源：責編：時間：2024-02-01 12:48:32 233觀看

導讀Chrome 瀏覽器將在下一個版本（Chrome 122）支持 7 個全新的 JavaScript 方法，以增強 Set 對象的功能。圖片這些方法都是由 proposal-set-methods 提案提出的，目前該提案已經進入第三階段，API 已經基本穩定。預計在 2024 年，

Chrome 瀏覽器將在下一個版本（Chrome 122）支持 7 個全新的 JavaScript 方法，以增強 Set 對象的功能。

圖片

這些方法都是由 proposal-set-methods 提案提出的，目前該提案已經進入第三階段，API 已經基本穩定。預計在 2024 年，這些方法將被納入 ECMAScript 2024 規范中。這些方法包括：

圖片

下面先來看看 JavaScript 中的 Set 是什么，如何使用，又有何用處！

Set 基礎

在 JavaScript 中，Set 是一種集合數據結構，它類似于數組，但成員的值都是唯一的，沒有重復的值。Set 中的元素可以是任何類型，包括原始類型和對象引用。

Set 對象有多個方法可以操作集合。這些方法包括：

add(value): 添加某個值，并返回集合本身。如果該值已經存在，則不會再次添加。

let mySet = new Set();  mySet.add(1); // 添加元素1  console.log(mySet.has(1)); // 輸出：true  mySet.add(1); // 再次添加元素1，但不會添加  console.log(mySet.size); // 輸出：1

delete(value): 刪除某個值，并返回一個布爾值，表示是否成功刪除。

let mySet = new Set();  mySet.add(1); // 添加元素1  console.log(mySet.has(1)); // 輸出：true  mySet.delete(1); // 刪除元素1  console.log(mySet.has(1)); // 輸出：false

has(value): 返回一個布爾值，表示某個值是否存在于集合中。

let mySet = new Set();  mySet.add(1); // 添加元素1  console.log(mySet.has(1)); // 輸出：true  console.log(mySet.has(2)); // 輸出：false

clear(): 清除所有元素，并返回集合本身。

let mySet = new Set();  mySet.add(1); // 添加元素1  mySet.clear(); // 清空集合  console.log(mySet.has(1)); // 輸出：false

size: 返回集合中元素的數量。

let mySet = new Set();  mySet.add(1); // 添加元素1  console.log(mySet.size); // 輸出：1  mySet.add(2); // 添加元素2  console.log(mySet.size); // 輸出：2

Set 有很多實用的場景：

去重：Set對象最直接的應用就是去重。由于Set中的元素是唯一的，因此可以用來去除數組中的重復元素。

let array = [1, 2, 3, 3, 2, 1];  let set = new Set(array);  console.log(Array.from(set)); // 輸出: [1, 2, 3]

集合運算：由于Set對象支持添加、刪除和檢查成員的方法，因此可以用來執行集合運算，如并集、交集和差集等。

const arr1 = [1, 2, 3];const arr2 = [3, 4, 5];const set1 = new Set(arr1);const set2 = new Set(arr2);// 求交集const intersection = Array.from(set1).filter(item => set2.has(item)); // [3]// 求并集const union = Array.from(new Set([...arr1, ...arr2])); // [1, 2, 3, 4, 5]// 求差集const difference = Array.from(set1).filter(item => !set2.has(item)); // [1, 2]

存儲不重復的數據：由于 Set 中的元素是唯一的，因此可以利用 Set 對象來存儲不重復的數據，例如：

const mySet = new Set();mySet.add(1);mySet.add(2);mySet.add(3);mySet.add(1); // 添加重復元素，不會生效console.log(mySet); // Set {1, 2, 3}

緩存：利用Set的唯一性，可以快速檢查一個值是否已經被緩存。這通常用于函數的結果緩存，避免重復計算。例如：

let cache = new Set();  function expensiveFunction(input) {    if (cache.has(input)) { // 如果結果已經在緩存中，直接返回結果，避免重復計算。    return cache.get(input); // 使用get方法從set中獲取值。  } else { // 如果結果不在緩存中，計算結果并存入緩存。    let result = computeExpensiveFunction(input); // 假設computeExpensiveFunction是實際計算函數。    cache.add(input); // 將結果存入緩存。注意，這里使用add方法添加值到set中。    return result; // 返回計算結果。  }  }

代碼優化：在某些情況下，使用Set代替數組可以提升代碼的效率。例如，使用Set的has方法比使用數組的indexOf方法更快。

全新 Set 方法

上面提到，由于 Set 對象支持添加、刪除和檢查成員的方法，因此我們可以用來執行集合運算，如并集、交集和差集等。例如：

const arr1 = [1, 2, 3];const arr2 = [3, 4, 5];const set1 = new Set(arr1);const set2 = new Set(arr2);// 求交集const intersection = Array.from(set1).filter(item => set2.has(item)); // [3]// 求并集const union = Array.from(new Set([...arr1, ...arr2])); // [1, 2, 3, 4, 5]// 求差集const difference = Array.from(set1).filter(item => !set2.has(item)); // [1, 2]

可以看到，為了執行集合運算，如交集、差集、并集等，通常需要借助其他方法，如 filter，這使得代碼變得復雜且冗余。為了簡化這一過程，proposal-set-methods 提案應運而生。該提案為 Set 對象新增了七個實用的方法，使得我們能夠直接對集合進行各種計算。通過這些新方法，我們不再需要組合多個方法來完成集合運算，從而簡化了代碼并提高了可讀性。

Set.prototype.intersection(other)
Set.prototype.union(other)
Set.prototype.difference(other)
Set.prototype.symmetricDifference(other)
Set.prototype.isSubsetOf(other)
Set.prototype.isSupersetOf(other)
Set.prototype.isDisjointFrom(other)

下面就來分別看一下這些方法。

注意：這些方法是支持鏈式調用的。

intersection

intersection 方法用于求兩個 Set 對象的交集，返回一個新的 Set 對象，包含兩個 Set 對象中都存在的元素。

const mobile = new Set(['javascript','java','swift', 'dart']);const backend = new Set(['php','python','javascript','java']);const frontend = new Set(['javascript','dart']);mobile.intersection(backend);// Set { javascript, java }mobile.intersection(backend).intersection(frontend);// Set { javascript }

union

union 方法用于求兩個 Set 對象的并集，返回一個新的 Set 對象，包含兩個 Set 對象中所有的元素。

const creation = new Set(['coding', 'writing', 'painting']);const joy = new Set(['crying', 'laughing', 'coding']);creation.union(joy);// Set {'coding','crying','writing','laughing','painting'}

difference

difference 方法用于求兩個 Set 對象的差集，返回一個新的 Set 對象，包含存在于當前 Set 對象中，但不存在于參數 Set 對象中的元素。

const joy = new Set(['crying', 'laughing','coding']);const pain = new Set(['crying','screaming','coding']);joy.difference(pain);// Set {'laughing'}

symmetricDifference

symmetricDifference 方法用于求兩個 Set 對象的對稱差集，返回一個新的 Set 對象，包含存在于任意一個 Set 對象中，但不存在于兩個 Set 對象中的元素。例如：

const joy = new Set(['crying',"laughing",'coding']);const pain = new Set(['crying','screaming','coding']);joy.symmetricDifference(pain);// Set {'laughing', 'screaming'}

isSubsetOf

isSubsetOf 方法用于判斷當前 Set 對象是否為另一個 Set 對象的子集，返回一個布爾值。例如：

const set1 = new Set([1, 2, 3]);const set2 = new Set([2, 3, 4]);set1.isSubsetOf(set2); // falseset2.isSubsetOf(set1); // falseconst set3 = new Set([2, 3]);set3.isSubsetOf(set1); // trueset3.isSubsetOf(set2); // true

isSupersetOf

isSupersetOf 方法用于判斷當前 Set 對象是否為另一個 Set 對象的超集，返回一個布爾值。例如：

const set1 = new Set([1, 2, 3]);const set2 = new Set([2, 3, 4]);console.log(set1.isSupersetOf(set2)); // falseconsole.log(set2.isSupersetOf(set1)); // falseconst set3 = new Set([2, 3]);set1.isSupersetOf(set3); // trueset2.isSupersetOf(set3); // true

isDisjointFrom

isDisjointFrom 方法用于判斷當前 Set 對象和另一個 Set 對象是否沒有交集，返回一個布爾值。

const set1 = new Set([1, 2, 3]);const set2 = new Set([4, 5, 6]);set1.isDisjointFrom(set2); // trueconst set3 = new Set([3, 4, 5]);set1.isDisjointFrom(set3); // falseset2.isDisjointFrom(set3); // false

小結

有了這些方法，再也不用編寫復雜的代碼去實現這些方法，也不用借助第三方庫（例如 lodash）來實現集合計算了

在主流瀏覽器全部支持這些方法之前，可以借助 core-js Polyfill 來使用這些方法：相關鏈接：

core-js：https://github.com/zloirock/core-js
proposal-set-methods 提案：https://github.com/tc39/proposal-set-methods

本文鏈接：http://www.www897cc.com/showinfo-26-70419-0.htmlJavaScript 新增七個方法，很實用！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Nuxt 3.10 正式發布，看看有什么變化!

下一篇：如何在PyQt6中使用單選框和下拉框？

標簽：

熱門焦點

Find N3入網：最高支持16+1TB

OPPO將于近期登場的Find N3折疊屏目前已經正式入網，型號為PHN110。本次Find N3在外觀方面相比前兩代有很大的變化，不再是小號的橫向折疊屏，而是跟別的廠商一樣采用了較為常見的
三言兩語說透柯里化和反柯里化

JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是兩種很有用的技術，可以幫助我們寫出更加優雅、泛用的函數。本文將首先介紹柯里化和反柯里化的概念、實現原理和應用
在線圖片編輯器，支持PSD解析、AI摳圖等

自從我上次分享一個人開發仿造稿定設計的圖片編輯器到現在，不知不覺已過去一年時間了，期間我經歷了裁員失業、面試找工作碰壁，寒冬下一直沒有很好地履行計劃.....這些就放在日
中國家電海外掘金正當時｜出海專題

作者｜吳南南編輯｜胡展嘉運營｜陳佳慧出品｜零態LT（ID：LingTai_LT）2023年，出海市場戰況空前，中國創業者在海外紛紛摩拳擦掌，以期能夠把中國的商業模式、創業理念、戰略打法輸出海外，他們依
花7萬退貨退款無門：誰在縱容淘寶珠寶商家造假？

來源：極點商業作者：楊銘在淘寶購買珠寶玉石后，因為保證金不夠賠付，店鋪關閉，退貨退款難、維權無門的比比皆是。“提供相關產品鑒定證書，支持全國復檢，可以30天無理由退換貨。&
余承東:AI大模型技術的發展將會帶來下一代智能終端操作系統的智慧體驗

8月4日消息，2023年華為開發者大會（HDC.Together）今天正式開幕，華為發布HarmonyOS 4、全新升級的鴻蒙開發套件、HarmonyOS Next開發者預覽版本等一系列
iQOO 11S評測：行業唯一的200W標準版旗艦

【Techweb評測】去年底，iQOO推出了“電競旗艦”iQOO 11系列，作為一款性能強機，該機不僅全球首發2K 144Hz E6全感屏，搭載了第二代驍龍8平臺及144Hz電競
OPPO K11評測：旗艦級IMX890加持 2000元檔最強影像手機

【Techweb評測】中端機型用戶群體巨大，占了中國目前手機市場的大頭，一直以來都是各手機品牌的“必爭之地”，其中OPPO K系列機型一直以來都以高品質、
世界人工智能大會國際日開幕式活動在世博展覽館開啟

30日上午，世界人工智能大會國際日開幕式活動在世博展覽館開啟，聚集國際城市代表、重量級院士專家、國際創新企業代表，共同打造人工智能交流平臺。上海市副市

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

JavaScript 新增七個方法，很實用！

全新 Set 方法

intersection

union

difference

symmetricDifference

isSubsetOf

isSupersetOf

isDisjointFrom

小結

Find N3入網：最高支持16+1TB

三言兩語說透柯里化和反柯里化

在線圖片編輯器，支持PSD解析、AI摳圖等

中國家電海外掘金正當時｜出海專題

花7萬退貨退款無門：誰在縱容淘寶珠寶商家造假？

余承東:AI大模型技術的發展將會帶來下一代智能終端操作系統的智慧體驗

iQOO 11S評測：行業唯一的200W標準版旗艦

OPPO K11評測：旗艦級IMX890加持 2000元檔最強影像手機

世界人工智能大會國際日開幕式活動在世博展覽館開啟

最新推薦

猜你喜歡

熱門推薦

相關資訊