ES6中的 Set 數(shù)據(jù)結(jié)構(gòu)

ES6 新增了一種 Set 數(shù)據(jù)結(jié)構(gòu)。它類似數(shù)組。 最重要的一點(diǎn)是 Set中的結(jié)構(gòu)成員沒有重復(fù)的, 可用這點(diǎn) 一行代碼實(shí)現(xiàn)數(shù)組去重。 Set 本身是一個(gè)構(gòu)造函數(shù)。通過 new Set() 來(lái)創(chuàng)建Set結(jié)構(gòu)。

  let arr1 = ['Hello', 'World', 'ES6']
  let set1 = new Set() 
  arr1.forEach(type => {
    set1.add(type)
  }) 

通過new Set創(chuàng)建一個(gè)Set結(jié)構(gòu)。 forEach 遍歷arr1數(shù)組。把每一項(xiàng)通過Set.prototype.add 方法向Set結(jié)構(gòu)中添加成員。

Set 也可以接受一個(gè)數(shù)組作為參數(shù)。

  let arr2 = [1,2,3,4,1,5,2]
  let set2 = new Set(arr2) 
  for (let type of set2) {
   console.log(type)
  }
  // 1
  // 2
  // 3
  // 4
  // 5

上面的new Set() 創(chuàng)建 Set 數(shù)據(jù)結(jié)構(gòu)時(shí), 將一個(gè)數(shù)組作為它的參數(shù)。最后通過 for of 遍歷 set2。因?yàn)?結(jié)構(gòu)成員沒有重復(fù), 所以打印 1 2 3 4 5

Set 接受的參數(shù)不會(huì)進(jìn)行 類型轉(zhuǎn)換 , new Set(5, '5') 這完全是兩個(gè)值。

Set 實(shí)現(xiàn)數(shù)組去重

  // 方法1 
  [...new Set([1,2,3,1,2])] // 1 2 3
  
  // 方法2
  Array.from(new Set([1,2,3,1,2])) // 1 2 3

都是通過向 new Set() 中傳入一個(gè)數(shù)組, 利用 Set結(jié)構(gòu)成員都是唯一的特性, 最后通過擴(kuò)展運(yùn)算符..., 或者ES6提供的一種將類數(shù)組轉(zhuǎn)換為數(shù)組的方法 Array.from()。

Set 操作方法

• Set.prototype.add(value) 向Set結(jié)構(gòu)中添加一名成員, 返回值為Set結(jié)構(gòu)
• Set.prototype.delete(value) 刪除一名成員, 返回值為布爾值。 true成功, false失敗
• Set.prototype.has(value) Set 成員是否存在, true為存在, false為不存在
• Set.prototype.clear() 清空所有的成員

  let arr3 = [7,8,9]
  let set3 = new Set(arr3)
  set3.add(10)
  set3.size() // 4
  set3.delete(8)
  set3.size() // 3
  set3.clear() // 0

Set 遍歷方法

• keys() 鍵名的遍歷器
• values() 鍵值的遍歷器
• entries() 鍵值對(duì)的遍歷器,以數(shù)組形式返回

  let arr4 = ['javascript', 'vue', 'node.js', 'typescript']
  let set4 = new Set(arr4) 
  
  // set.keys()
  for (let k of set4.keys()) {
   console.log(k)\
   // javascript
   // vue 
   // node.js
   // typescript
  } 

 // set.values()
 for (ket v of set4.values()) {
  console.log(v)
  // 和上面的set4.keys() 遍歷的結(jié)果一樣
 } 

 // set.entries()
 for (let e of set3.entries()) {
  console.log(e)
  // ['javascript', 'javascript']
  // ['vue', 'vue']
  // ['node.js', 'node.js']
  // ['typescript', 'typescript']
 }

可見, keys()和values() 遍歷是一模一樣的, 以后遍歷使用keys()還是values()沒有區(qū)別。entries 遍歷返回的是數(shù)組, 分別是keys() values()結(jié)果。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。