JavaScript 新增七個方法，很實用！
Chrome 瀏覽器將在下一個版本（Chrome 122）支持 7 個全新的 JavaScript 方法，以增強 Set 對象的功能。
圖片
這些方法都是由 proposal-set-methods 提案提出的，目前該提案已經(jīng)進入第三階段，API 已經(jīng)基本穩(wěn)定。預計在 2024 年，這些方法將被納入 ECMAScript 2024 規(guī)范中。這些方法包括：
圖片
下面先來看看 JavaScript 中的 Set 是什么，如何使用，又有何用處！
Set 基礎
在 JavaScript 中，Set 是一種集合數(shù)據(jù)結構，它類似于數(shù)組，但成員的值都是唯一的，沒有重復的值。Set 中的元素可以是任何類型，包括原始類型和對象引用。
Set 對象有多個方法可以操作集合。這些方法包括：
add(value): 添加某個值，并返回集合本身。如果該值已經(jīng)存在，則不會再次添加。
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: 返回集合中元素的數(shù)量。
let mySet = new Set();
mySet.add(1); // 添加元素1
console.log(mySet.size); // 輸出：1
mySet.add(2); // 添加元素2
console.log(mySet.size); // 輸出：2Set 有很多實用的場景：
- 去重：Set對象最直接的應用就是去重。由于Set中的元素是唯一的，因此可以用來去除數(shù)組中的重復元素。
let array = [1, 2, 3, 3, 2, 1];
let set = new Set(array);
console.log(Array.from(set)); // 輸出: [1, 2, 3]- 集合運算：由于Set對象支持添加、刪除和檢查成員的方法，因此可以用來執(zhí)行集合運算，如并集、交集和差集等。
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]- 存儲不重復的數(shù)據(jù)：由于 Set 中的元素是唯一的，因此可以利用 Set 對象來存儲不重復的數(shù)據(jù)，例如：
const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(1); // 添加重復元素，不會生效
console.log(mySet); // Set {1, 2, 3}- 緩存：利用Set的唯一性，可以快速檢查一個值是否已經(jīng)被緩存。這通常用于函數(shù)的結果緩存，避免重復計算。例如：
let cache = new Set();
function expensiveFunction(input) {
if (cache.has(input)) { // 如果結果已經(jīng)在緩存中，直接返回結果，避免重復計算。
return cache.get(input); // 使用get方法從set中獲取值。
} else { // 如果結果不在緩存中，計算結果并存入緩存。
let result = computeExpensiveFunction(input); // 假設computeExpensiveFunction是實際計算函數(shù)。
cache.add(input); // 將結果存入緩存。注意，這里使用add方法添加值到set中。
return result; // 返回計算結果。
}
}- 代碼優(yōu)化：在某些情況下，使用Set代替數(shù)組可以提升代碼的效率。例如，使用Set的has方法比使用數(shù)組的indexOf方法更快。
全新 Set 方法
上面提到，由于 Set 對象支持添加、刪除和檢查成員的方法，因此我們可以用來執(zhí)行集合運算，如并集、交集和差集等。例如：
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]可以看到，為了執(zhí)行集合運算，如交集、差集、并集等，通常需要借助其他方法，如 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 對象中，但不存在于參數(shù) 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); // false
set2.isSubsetOf(set1); // false
const set3 = new Set([2, 3]);
set3.isSubsetOf(set1); // true
set3.isSubsetOf(set2); // trueisSupersetOf
isSupersetOf 方法用于判斷當前 Set 對象是否為另一個 Set 對象的超集，返回一個布爾值。例如：
const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);
console.log(set1.isSupersetOf(set2)); // false
console.log(set2.isSupersetOf(set1)); // false
const set3 = new Set([2, 3]);
set1.isSupersetOf(set3); // true
set2.isSupersetOf(set3); // trueisDisjointFrom
isDisjointFrom 方法用于判斷當前 Set 對象和另一個 Set 對象是否沒有交集，返回一個布爾值。
const set1 = new Set([1, 2, 3]);
const set2 = new Set([4, 5, 6]);
set1.isDisjointFrom(set2); // true
const set3 = new Set([3, 4, 5]);
set1.isDisjointFrom(set3); // false
set2.isDisjointFrom(set3); // false小結
有了這些方法，再也不用編寫復雜的代碼去實現(xiàn)這些方法，也不用借助第三方庫（例如 lodash）來實現(xiàn)集合計算了
在主流瀏覽器全部支持這些方法之前，可以借助 core-js Polyfill 來使用這些方法：相關鏈接：
- core-js：https://github.com/zloirock/core-js
- proposal-set-methods 提案：https://github.com/tc39/proposal-set-methods
