JavaScript中Set基本使用方法實(shí)例
介紹
ECMAScript 6 新增的 Set 是一種新集合類(lèi)型,為這門(mén)語(yǔ)言帶來(lái)集合數(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)建一個(gè)空集合:
const s = new Set();
如果想在創(chuàng)建的同時(shí)初始化實(shí)例,則可以給 Set 構(gòu)造函數(shù)傳入一個(gè)可迭代對(duì)象,其中需要包含插入到新集合實(shí)例中的元素(Set 可以包含任何 JavaScript 數(shù)據(jù)類(lèi)型作為值):
const s = new Set(["val1", 1, true, {}, undefined, function fun() {}]);
注意:Set結(jié)構(gòu)不會(huì)添加重復(fù)的值
const s = new Set([1, 1, 2, 3, 4, 4, 5, 6, 7, 4, 2, 1]); Array.from(s); // [1, 2, 3, 4, 5, 6, 7]
經(jīng)常用Set解決數(shù)組去重問(wèn)題
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í)例的元素個(gè)數(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í)例中某個(gè)元素(返回布爾值):
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(): 返回鍵值對(duì);
鍵名=鍵值
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); //得到一個(gè)新的Set:{"1","2","3"};
二:Set轉(zhuǎn)數(shù)組:
var arr1= Array.from(set ); //得到一個(gè)新的數(shù)組:["1","2","3"];
(2):使用Set給數(shù)組去重:
//定義一個(gè)新的數(shù)組: var arr = ["1","2","1","2","3","1"];
方法一:
var arr1 = Array.from(new Set(arr)); //得到一個(gè)新的數(shù)組:["1","2","3"];
方法二:
var arr1 = [...new Set(arr)]; //得到一個(gè)新的數(shù)組:["1","2","3"];
(3):求兩個(gè)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]); //得到一個(gè)新的Set:{"1","2","3"}; //交集后: var newSet2 = new Set([...set1].filter(x => set2.has(x))); //得到一個(gè)新的Set:{"1", "2"}; //差集后: var newSet3 = new Set([...set1].filter(x => !set2.has(x))); //得到一個(gè)新的Set:{"3"};
至此,在JS中使用Set的使用方法暫時(shí)寫(xiě)到這兒,以后想起來(lái)再更新。
總結(jié)
到此這篇關(guān)于JavaScript中Set基本使用方法的文章就介紹到這了,更多相關(guān)js中Set使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JQuery 表格操作(交替顯示、拖動(dòng)表格行、選擇行等)
JQuery 表格操作包括交替顯示、拖動(dòng)表格行、選擇行等功能,大家可以參考下。2009-07-07js實(shí)現(xiàn)n秒倒計(jì)時(shí)后才可以點(diǎn)擊的效果
這篇文章主要介紹了js點(diǎn)擊按鈕在倒計(jì)時(shí)后才可以點(diǎn)擊的效果,需要的朋友可以參考下2015-12-12微信開(kāi)發(fā)之調(diào)起攝像頭、本地展示圖片、上傳下載圖片實(shí)例
這篇文章主要介紹了微信開(kāi)發(fā)之調(diào)起攝像頭、本地展示圖片、上傳下載圖片實(shí)例,具有一定的參考價(jià)值有興趣的可以了解一下。2016-12-12基于JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06關(guān)于JavaScript中URL對(duì)象的一些妙用
avaScript URL() 構(gòu)造函數(shù)返回一個(gè)新創(chuàng)建的 URL 對(duì)象,表示由一組參數(shù)定義的 URL,利用該構(gòu)造函數(shù)可以獲取 RL的查詢、參數(shù)等,下面這篇文章主要給大家介紹了關(guān)于JavaScript URL對(duì)象的一些妙用,需要的朋友可以參考下2021-10-10JS獲取指定時(shí)間的時(shí)間戳的方法匯總(最新整理收藏版)
在JavaScript中,可以使用Date.parse()或new Date()來(lái)獲取指定時(shí)間的時(shí)間戳,本文給大家分享JS獲取指定時(shí)間的時(shí)間戳的方法,感興趣的朋友一起看看吧2024-01-01詳解微信小程序input標(biāo)簽正則初體驗(yàn)
這篇文章主要介紹了詳解微信小程序input標(biāo)簽正則初體驗(yàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08詳解JavaScript中浮點(diǎn)數(shù)的精度計(jì)算
這篇文章主要來(lái)和大家介紹一下JavaScript中浮點(diǎn)數(shù)精度計(jì)算的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06js動(dòng)態(tài)修改整個(gè)頁(yè)面樣式達(dá)到換膚效果
這篇文章主要介紹了通過(guò)js動(dòng)態(tài)修改整個(gè)頁(yè)面樣式達(dá)到換膚效果,需要的朋友可以參考下2014-05-05