大前端JS篇之搞懂【Set】

要愛學習鴨發表於2022-02-12
前端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 的例項屬性和方法

  1. 操作方法
    1. 新增 
      const s = new Set()
// add 方法返回Set例項本身，所以可以執行鏈式操作
const ret = s.add(1).add('one').add({1:'one'})
    2. 刪除 
      const s = new Set([1,2,3,4,5])
// delete 方法返回被刪除元素是否刪除成功
const flag = s.delete(1) // true
const flag = s.delete('2') // false
    3. 查詢 
      const s = new Set([1,2,4,5,6,7])
const flag = s.has(2)
    4. 清空 
      const s = new Set([12,324,1])
//clear 方法沒有返回值，返回undefined
s.clear()
    5. 兩個例項屬性
      const s = new Set()
// 例項還有兩個屬性
s.size //返回當前集合中元素個數
s.constructor // 返回例項構造器，也就是Set

       

  2. 遍歷方法
    1. 遍歷鍵名 
      const s = new Set(['javascript','html','css'])

for(let key of s.keys()){
    console.log(key)
}
//javascript
//html
//css
//遍歷順序就是插入順序，利用這個特性可以儲存一些需要按順序呼叫的函式
    2. 遍歷鍵值 
      const s = new Set(['javascript','html','css'])

for(let value of s.values()){
    console.log(value)
}
//Set不存在鍵名，只有鍵值，也可以認為鍵名和鍵值是同一個，所以keys和values返回的值是一樣的
    3. 遍歷鍵值對 
      const s = new Set(['javascript','html','css'])

for(let entry of s.entries()){
    console.log(entry)
}
//['javascript', 'javascript']
//['html', 'html']
//['css', 'css']
//遍歷的每一對都是一個包括鍵名和鍵值的陣列
    4. 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
    5. 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 基本的用法就先講到這裡，有不對的地方歡迎大家指正

相關文章