JavaScript中Set基本使用方法實(shí)例
介紹
ECMAScript 6 新增的 Set 是一種新集合類型，為這門語言帶來集合數(shù)據(jù)結(jié)構(gòu)。Set 在很多方面都像是加強(qiáng)的 Map，這是因?yàn)樗鼈兊拇蠖鄶?shù) API 和行為都是共有的。
基本API
1. 創(chuàng)建Set實(shí)例
使用 new 關(guān)鍵字和 Set 構(gòu)造函數(shù)可以創(chuàng)建一個空集合：
const s = new Set();
如果想在創(chuàng)建的同時初始化實(shí)例，則可以給 Set 構(gòu)造函數(shù)傳入一個可迭代對象，其中需要包含插入到新集合實(shí)例中的元素(Set 可以包含任何 JavaScript 數(shù)據(jù)類型作為值)：
const s = new Set(["val1", 1, true, {}, undefined, function fun() {}]);
注意:Set結(jié)構(gòu)不會添加重復(fù)的值
經(jīng)常用Set解決數(shù)組去重問題
const arr = [1, 2, 3, 3, 4, 5, 4, 4, 2, 1, 3]; Array.from(new Set(arr)); // [1, 2, 3, 4, 5]
2. Set實(shí)例轉(zhuǎn)數(shù)組
const s = new Set([1, 2, 3]); Array.from(s); // [1, 2, 3]
3. size屬性
size: 獲取Set實(shí)例的元素個數(shù)：
const s = new Set([1, 2, 3]); s.size; // 3
4. add()
add(): 添加元素：
const s = new Set(); s.add(1).add(2).add(3); Array.from(s); // [1, 2, 3]
5. has()
has(): 查詢Set實(shí)例是否存在某元素(返回布爾值)：
const s = new Set(); s.add(1).add(2).add(3); s.has(1); // true
6. delete()
delete(): 刪除Set實(shí)例中某個元素(返回布爾值)：
const s = new Set(); s.add(1).add(2); s.delete(1); Array.from(s); // [2]
7. clear()
clear(): 清空Set實(shí)例：
const s = new Set(); s.add(1).add(2).add(3); Array.from(s); // [1, 2, 3] s.clear(); Array.from(s); // []
8. 迭代
keys():返回鍵名;
values(): 返回鍵值；
entries(): 返回鍵值對;
鍵名=鍵值
const s = new Set(); s.add(1).add(2).add(3); Array.from(s.keys()); // [1, 2, 3] Array.from(s.values()); // [1, 2, 3] Array.from(s.entries()); // [[1, 1], [2, 2], [3, 3]]
for-of:
const s = new Set();
s.add(1).add(2).add(3);
for (const i of s) {
console.log(i);
}
// 1
// 2
// 3
forEach
const s = new Set(); s.add(1).add(2).add(3); s.forEach((value, key) => console.log(key + ' : ' + value)); // 1 : 1 // 2 : 2 // 3 : 3
補(bǔ)充：JS中Set的操作方法
(1)：數(shù)組與Set之間的轉(zhuǎn)換：
一：數(shù)組轉(zhuǎn)Set：
var arr = ["1","2","1","2","3","1"];
var set = new Set(arr);
//得到一個新的Set：{"1","2","3"};
二：Set轉(zhuǎn)數(shù)組：
var arr1= Array.from(set );
//得到一個新的數(shù)組：["1","2","3"];
(2)：使用Set給數(shù)組去重：
//定義一個新的數(shù)組：
var arr = ["1","2","1","2","3","1"];
方法一：
var arr1 = Array.from(new Set(arr));
//得到一個新的數(shù)組：["1","2","3"];
方法二：
var arr1 = [...new Set(arr)];
//得到一個新的數(shù)組：["1","2","3"];
(3)：求兩個Set的并集，交集，差集：
var arr1 = ["1","2","3"];
var arr2 = ["1","2"];
var set1= new Set(arr1);
var set2= new Set(arr2);
//并集后：
var newSet1 = new Set([...set1,...set2]);
//得到一個新的Set：{"1","2","3"};
//交集后：
var newSet2 = new Set([...set1].filter(x => set2.has(x)));
//得到一個新的Set：{"1", "2"};
//差集后：
var newSet3 = new Set([...set1].filter(x => !set2.has(x)));
//得到一個新的Set：{"3"};至此，在JS中使用Set的使用方法暫時寫到這兒，以后想起來再更新。
總結(jié)
到此這篇關(guān)于JavaScript中Set基本使用方法的文章就介紹到這了,更多相關(guān)js中Set使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決js相同的正則多次調(diào)用test()返回的值卻不同的問題
今天小編就為大家分享一篇解決js相同的正則多次調(diào)用test()返回的值卻不同的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
詳解element-ui 表單校驗(yàn) Rules 配置 常用黑科技
這篇文章主要介紹了element-ui 表單校驗(yàn) Rules 配置 常用黑科技，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要為大家詳細(xì)介紹了關(guān)于Bootstrap輪播圖的使用和理解的學(xué)習(xí)記錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript實(shí)現(xiàn)經(jīng)緯度轉(zhuǎn)換常用方法總結(jié)
WGS84坐標(biāo)系、GCJ02坐標(biāo)系、BD09坐標(biāo)系和Web 墨卡托投影坐標(biāo)系是我們常見的四個坐標(biāo)系。這篇文章為大家整理了這四個坐標(biāo)系之間相互轉(zhuǎn)換的方法，需要的可以參考一下2023-02-02
JavaScript判斷輸入是否為數(shù)字類型的方法總結(jié)
這篇文章主要介紹了JavaScript判斷輸入是否為數(shù)字類型的方法總結(jié)的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
關(guān)于取不到由location.href提交而來的上級頁面地址的解決辦法
驗(yàn)證上級頁面來源取不到由location.href提交而來的頁面地址，搜索了一大堆沒有合適的解決辦法，突然想到通過模擬JS點(diǎn)擊鏈接的方法2009-07-07
微信小程序?qū)崿F(xiàn)點(diǎn)擊圖片旋轉(zhuǎn)180度并且彈出下拉列表
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊圖片旋轉(zhuǎn)180度并且彈出下拉列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
最近使用dwz來做項(xiàng)目，有時候在ajax的時候并不想使用dwz的loading，不知道有什么方法可以去掉嗎，下面為大家詳細(xì)介紹下具體的去掉方法2013-05-05
jquery插件bootstrapValidator數(shù)據(jù)驗(yàn)證詳解
這篇文章主要為大家詳細(xì)介紹了jquery插件bootstrapValidator數(shù)據(jù)驗(yàn)證使用教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
js自執(zhí)行函數(shù)的幾種不同寫法的比較,需要的朋友可以參考下2012-08-08