大前端JS篇之搞懂【Set】
- 2022 年 2 月 12 日
- 筆記
- ES6, javascript, 大前端, 大前端JS篇
我認為前端生態很大,猶如一片汪洋大海,很難短時間內窺其全貌,在這裡我們不談其他,只聊聊 Set
Set是 es6 新提出的一個對象,也是一種數據結構,為什麼es6要提出這樣一個新對象呢,無非就是豐富js的對象類型,在遇到具體的業務場景需要一個比較適合的恰當的數據結構來保存和操作數據,接下來就讓我們更深刻的認識下Set的一些常用的方法和應用場景
首先 Set的一個重要特性就是集合中是不允許添加重複元素的,如何判斷重複,如果是基本類型的話根據===操作符,如果是引用類型的話是根據對象的指針是否指向同一個引用對象,特別有意思的是NaN,Set是把它作為相同對待的,儘管NaN本身是不相等的,所以Set中的值都是唯一的
Set是一個構造函數,所以我們使用Set必須使用new關鍵字
兩種方法創建
- 直接創建一個空的集合
const set = new Set()
- 傳入一個數組或者具有iterable介面的其他數據結構
const set = new Set([1,2,3,4,5]) const set = new Set('我是字元串,我具有iterable介面哦')
Set 的實例屬性和方法
- 操作方法
- 添加
const s = new Set() // add 方法返回Set實例本身,所以可以執行鏈式操作 const ret = s.add(1).add('one').add({1:'one'})
- 刪除
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(['javascript','html','css']) for(let key of s.keys()){ console.log(key) } //javascript //html //css //遍歷順序就是插入順序,利用這個特性可以儲存一些需要按順序調用的函數
- 遍歷鍵值
const s = new Set(['javascript','html','css']) for(let value of s.values()){ console.log(value) } //Set不存在鍵名,只有鍵值,也可以認為鍵名和鍵值是同一個,所以keys和values返回的值是一樣的
- 遍歷鍵值對
const s = new Set(['javascript','html','css']) for(let entry of s.entries()){ console.log(entry) } //['javascript', 'javascript'] //['html', 'html'] //['css', 'css'] //遍歷的每一對都是一個包括鍵名和鍵值的數組
- forEach 使用回調函數遍歷每一個元素
const s = new Set(['javascript','html','css']) s.forEach(function(value,key,s) { // 回調函數接受三個參數,鍵值,鍵名,set本身 console.log(`鍵值:${value};鍵名${key};集合大小${s.size};${this.thisName}`) },{thisName:'改變回調函數this'}) // forEach函數還接受第二個參數,可以綁定處理函數的this
- Set實例默認是可以迭代的,因為它的遍歷器生成函數其實調用的就是values方法,這意味著我們可以直接省略values()方法直接遍歷
const s = new Set(['javascript','html','css']) for(let value of s){ console.log(value) }
- 遍歷鍵名
應用
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) {1, 2, 3, 4, 5}
const union = new Set([...s1,...s2])
//交集 Set(3) {2, 3, 4}
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)))])
Set 基本的用法就先講到這裡,有不對的地方歡迎大家指正