詳解ES6中的 Set Map 資料結構學習總結
阿新 • • 發佈:2018-12-22
ES6中的 Set 資料結構
ES6 新增了一種 Set 資料結構。它類似陣列。 最重要的一點是 Set中的結構成員沒有重複的, 可用這點 一行程式碼實現陣列去重。 Set 本身是一個建構函式。通過 new Set() 來建立Set結構。
let arr1 = ['Hello', 'World', 'ES6']
let set1 = new Set()
arr1.forEach(type => {
set1.add(type)
})
通過new Set建立一個Set結構。 forEach 遍歷arr1陣列。把每一項通過Set.prototype.add 方法向Set結構中新增成員。
Set 也可以接受一個數組作為引數。
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
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力,群內有大量PDF可供自取,更有乾貨實戰專案視訊進群免費領取。
上面的new Set() 建立 Set 資料結構時, 將一個數組作為它的引數。最後通過 for of 遍歷 set2。因為 結構成員沒有重複, 所以列印 1 2 3 4 5
Set 接受的引數不會進行 型別轉換 , new Set(5, ‘5’) 這完全是兩個值。
Set 實現陣列去重
// 方法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() 中傳入一個數組, 利用 Set結構成員都是唯一的特性, 最後通過擴充套件運算子…, 或者ES6提供的一種將類陣列轉換為陣列的方法 Array.from()。
Set 操作方法
- Set.prototype.add(value) 向Set結構中新增一名成員, 返回值為Set結構
- 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
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力,群內有大量PDF可供自取,更有乾貨實戰專案視訊進群免費領取。
Set 遍歷方法
- keys() 鍵名的遍歷器
- values() 鍵值的遍歷器
- entries() 鍵值對的遍歷器,以陣列形式返回
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() 遍歷的結果一樣
}
// 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()沒有區別。entries 遍歷返回的是陣列, 分別是keys() values()結果。