大前端JS篇之搞懂 Set

2022-09-20 21:45:11 字數 2727 閱讀 4049

我認為前端生態很大,猶如一片汪洋大海,很難短時間內窺其全貌,在這裡我們不談其他,只聊聊

setset

是 es6 新提出的乙個物件,也是一種資料結構,為什麼es6要提出這樣乙個新物件呢,無非就是豐富js的物件型別,在遇到具體的業務場景需要乙個比較適合的恰當的資料結構來儲存和運算元據,接下來就讓我們更深刻的認識下set

的一些常用的方法和應用場景

首先 set

的乙個重要特性就是集合中是不允許新增重複元素的,如何判斷重複,如果是基本型別的話根據===操作符,如果是引用型別的話是根據物件的指標是否指向同乙個引用物件,特別有意思的是nan,set

是把它作為相同對待的,儘管nan本身是不相等的,所以set

中的值都是唯一的

set是乙個建構函式,所以我們使用set

必須使用new關鍵字

兩種方法建立

set 的例項屬性和方法

操作方法

新增

const s = new set()

// add 方法返回set例項本身,所以可以執行鏈式操作

const ret = s.add(1).add('one').add()

刪除

const s = new set([1,2,3,4,5])

// delete 方法返回被刪除元素是否刪除成功

const flag = s.delete(1) // true

const flag = s.delete('2') // false

查詢

const s = new set([1,2,4,5,6,7])

const flag = s.has(2)

清空

const s = new set([12,324,1])

//clear 方法沒有返回值,返回undefined

s.clear()

兩個例項屬性

const s = new set()

// 例項還有兩個屬性

s.size //返回當前集合中元素個數

s.constructor // 返回例項構造器,也就是set

遍歷方法

遍歷鍵名

const s = new set(['j**ascript','html','css'])

for(let key of s.keys())

//j**ascript

//html

//css

//遍歷順序就是插入順序,利用這個特性可以儲存一些需要按順序呼叫的函式

遍歷鍵值

const s = new set(['j**ascript','html','css'])

for(let value of s.values())

//set不存在鍵名,只有鍵值,也可以認為鍵名和鍵值是同乙個,所以keys和values返回的值是一樣的

遍歷鍵值對

const s = new set(['j**ascript','html','css'])

for(let entry of s.entries())

//['j**ascript', 'j**ascript']

//['html', 'html']

//['css', 'css']

//遍歷的每一對都是乙個包括鍵名和鍵值的陣列

foreach 使用**函式遍歷每乙個元素

const s = new set(['j**ascript','html','css'])

s.foreach(function(value,key,s) ;鍵名$;集合大小$;$`)

},)// foreach函式還接受第二個引數,可以繫結處理函式的this

set例項預設是可以迭代的,因為它的遍歷器生成函式其實呼叫的就是values方法,這意味著我們可以直接省略values()方法直接遍歷

const s = new set(['j**ascript','html','css'])

for(let value of s)

應用

1、我們首先可以結合擴充套件操作符(...)給陣列去重

const unique = [...new set([1,2,3,4,5,1,21,23,5])]

//[1, 2, 3, 4, 5, 21, 23]

2、實現並集,交集,差集

const s1 = new set([1,2,3,4])

const s2 = new set([2,3,4,5])

//並集 set(5) 

const union = new set([...s1,...s2])

//交集 set(3) 

const intersect = new set([...s1].filter(v => s2.has(v)))

//差集

const difference = new set([...new set([...s1].filter(v => !s2.has(v))),...new set([...s2].filter(v => !s1.has(v)))])

大前端JS篇之搞懂 WeakSet

和set一樣,weakset也是es6新增的一種資料結構,那麼它和set有什麼區別呢?weakset對比set主要是兩個區別 weakset只能放置物件,不能是其他任何型別 weakset裡面的儲存的都是對物件的弱引用 這裡我們理解下什麼叫對物件的弱引用,也就是說js的垃圾 機制不會考慮weakse...

Python基礎篇之set

dict的作用是建立一組 key 和一組 value 的對映關係,dict的key是不能重複的。有的時候,我們只想要 dict 的 key,不關心 key 對應的 value,目的就是保證這個集合的元素不會重複,這時,set就派上用場了。set 持有一系列元素,這一點和 list 很像,但是set的...

Web前端學習JS篇之「DOM事件」

事件就是指為dom指定的動作,包括三個部分。事件源 比如按鈕,為了獲取事件源。事件型別 比如onclick,為了註冊事件 繫結事件 事件處理程式 為了新增事件執行的核心程式。1.傳統方式 onclick 這種方式無法繫結多個,後邊註冊的會覆蓋前邊註冊的。2.監聽方式 addeventlistener...