ES6 Set結(jié)構(gòu)的應(yīng)用實(shí)例分析
本文實(shí)例講述了ES6 Set結(jié)構(gòu)的應(yīng)用。分享給大家供大家參考,具體如下:
Set 類似于數(shù)組,但是成員的值都是唯一的,沒(méi)有重復(fù)的值, 實(shí)現(xiàn)了iterator接口
set 的值不可重復(fù),數(shù)組的值可以重復(fù)
let arr = [1,2,3,'5','5']; let st = new Set(arr); console.log(st); // 可以通過(guò)set來(lái)去除數(shù)組的重復(fù)的值,返回的是一個(gè)偽數(shù)組 console.log(st.size); // 4
set 的 add , delete, has, clear 方法
簡(jiǎn)單的add 與 delete :
let st = new Set(); var u = {name:'Joh'}; st.add(u); let bool = st.delete(u); console.log(bool); // true;
連續(xù)add與has的api :
let st = new Set(); var u = {name:'Joh'}; var r = {name:'Lily'}; st.add(u).add(r); let bool = st.delete(r); console.log(bool); // true console.log(st.has(r)); // false console.log(st.has(u)); // true;
clear清空set集合
let st = new Set(); var u = {name:'Joh'}; var r = {name:'Lily'}; st.add(u).add(r); st.clear(); console.log(st.size); // 0
通過(guò)Array.from方法把類似數(shù)組結(jié)構(gòu)的模型轉(zhuǎn)化為數(shù)組
let arr = ['xxx', 'yyyy', 'yyyy']; let newArr = Array.from(new Set(arr)); console.log(Array.isArray(newArr)); // true console.log(newArr); // ["xxx", "yyyy"]
Set 原型上的Symbol.iterator 和 values 是同一個(gè)值, 可直接for-of遍歷
console.log(Set.prototype[Symbol.iterator] === Set.prototype.values); // true let st = new Set(['xxx', 'yyyy', 'yyyy', 'John']); for(let k of st) { console.log(k); // 依次輸出 xxx yyyy John 可以直接遍歷,兼容map的數(shù)據(jù)結(jié)構(gòu) }
set中的keys和values方法
let st = new Set(['xxx', 'yyyy', 'yyyy', 'John']); console.log(st.size); // 3 let itKeys = st.keys(); for(let k of itKeys) { console.log(k); // 依次輸出 xxx yyyy John } console.log('>>>>>'); let itVals = st.values(); for(let v of itVals) { console.log(v); // 依次輸出 xxx yyyy John }
set 的entries 實(shí)體對(duì)象,是個(gè)鍵和值的數(shù)組結(jié)構(gòu)
let st = new Set(['xxx', 'yyyy', 'yyyy', 'John']); let entriesIt = st.entries(); // for(let v of entriesIt) { console.log(v); // 依次輸出 ["xxx", "xxx"] ["yyyy", "yyyy"] ["John", "John"] }
關(guān)于NaN在set中的特殊性
let st = new Set(); console.log(NaN === NaN); // false , 此處 NaN 是不全等的,理應(yīng)可以添加多個(gè),不算重復(fù),但是這里是個(gè)特例 st.add(NaN).add(NaN).add(NaN); for(let v of st) { console.log(v); // 只輸出一個(gè) NaN }
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
解決JS使用fill()進(jìn)行數(shù)組填充遇到的問(wèn)題
最近在做算法題時(shí),遇到需要?jiǎng)?chuàng)建二維數(shù)組并進(jìn)行初始化的情況,剛開(kāi)始我使用的是 new Array(n).fill(new Array(n).fill('.')) 進(jìn)行二維數(shù)組的初始化,但無(wú)論怎樣我都通不過(guò)測(cè)試用例,所以本文就給大家詳細(xì)的介紹了如何解決這類問(wèn)題以及將js中的fill(方法重學(xué)一下2023-09-09JavaScript點(diǎn)擊按鈕后彈出透明浮動(dòng)層的方法
這篇文章主要介紹了JavaScript點(diǎn)擊按鈕后彈出透明浮動(dòng)層的方法,可實(shí)現(xiàn)點(diǎn)擊按鈕彈出居中的透明浮動(dòng)層的效果,涉及javascript操作鼠標(biāo)事件及頁(yè)面樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05基于JavaScript實(shí)現(xiàn)瀑布流布局(二)
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)瀑布流布局的相關(guān)資料,實(shí)現(xiàn)鼠標(biāo)下拉圖片自動(dòng)加載效果,和百度圖片效果類似,需要的朋友可以參考下2016-01-01JS網(wǎng)頁(yè)在線獲取鼠標(biāo)坐標(biāo)值的方法
這篇文章主要介紹了JS網(wǎng)頁(yè)在線獲取鼠標(biāo)坐標(biāo)值的方法,涉及javascript操作頁(yè)面窗口位置元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02解析offsetHeight,clientHeight,scrollHeight之間的區(qū)別
這篇文章主要是對(duì)offsetHeight,clientHeight,scrollHeight之間的區(qū)別進(jìn)行了詳細(xì)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11JavaScript實(shí)現(xiàn)計(jì)算器的四則運(yùn)算功能
這篇文章主要為大家介紹了如何通過(guò)JavaScript實(shí)現(xiàn)計(jì)算器的四則運(yùn)算功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起動(dòng)手試試2022-02-02常常會(huì)用到的截取字符串substr()、substring()、slice()方法詳解
javascript中給我們提供三個(gè)截取字符串的方法,分別是:slice(),substring()和substr()。下面我們對(duì)這三個(gè)函數(shù)進(jìn)行詳細(xì)說(shuō)明和比較,需要的朋友可以參考下2015-12-12學(xué)習(xí)javascript文件加載優(yōu)化
這篇文章主要為大家詳細(xì)介紹了javascript文件加載優(yōu)化,三種方式實(shí)現(xiàn)js文件加載優(yōu)化,感興趣的小伙伴們可以參考一下2016-02-02JavaScript簡(jiǎn)單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能示例
這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能,涉及javascript基于事件響應(yīng)的頁(yè)面元素遍歷、分割、替換等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07