ES6（七）—— Set & Map

目錄

• Set數據結構

  • 聲明Set

  • Set方法

    • 存儲數據
    • 刪除數據
    • 清空數據
    • 查找數據
    • size長度

    • 讀取數據

      • get API & keys API & values API & entries API
      • forEach API
      • for-of API
    • 修改數據
  • 數組去重ES6能夠用Set處理

• Map數據結構（字典類型）

  • 以前對象的鍵都是字符串，會出錯？
  • map的key能夠是任意類型
  • 若是實例化一個map對象

  • Map方法

    • 添加/編輯數據
    • 刪除數據
    • 清空數據
    • 查找數據
    • Size長度

    • 讀取數據

      • get API & keys API & values API & entries API
      • forEach API
      • for-of API
  • Map和Object的區別
• WeakSet和WeakMap
• ES6-ES10學習版圖

Set數據結構

ES6除了可使用Object存儲數據，還可使用Set存儲數據

1. Set存儲的成員是惟一的，不是重複的，若是有重複會自動過濾掉（用於數組去重，下面有解釋）
2. 能夠鏈式調用 add、forEach、delete、clear、has、size、for-of

聲明Set

// 聲明瞭一個Set
let s = new Set()
// 聲明並初始化數據，傳入的參數是可遍歷的對象，不僅是數組
let s = new Set([1, 2, 3, 4])

Set方法

存儲數據

add API

let s = new Set()
s.add('hello')
s.add('goodbye')
console.log(s)
// Set(2) {"hello", "goodbye"}

//可使用簡寫形式，由於其返回的是當前對象
s.add('hello').add('goodbye')
console.log(s)
// Set(2) {"hello", "goodbye"}

// 遇到重複數據會進行過濾
s.add('hello').add('goodbye').add('hello')
console.log(s)
// Set(2) {"hello", "goodbye"}

刪除數據

delete API

let s = new Set()
s.add('hello').add('goodbye')
console.log(s)
// Set(2) {"hello", "goodbye"}
s.delete('goodbye') // 刪除成功會返回一個true
console.log(s)
// Set(1) {"hello"}

清空數據

clear API

let s = new Set()
s.add('hello').add('goodbye')
console.log(s)
// Set(2) {"hello", "goodbye"}
s.clear()
console.log(s)
// Set(0) {}

查找數據

has API

let s = new Set()
s.add('hello').add('goodbye')
console.log(s.has('hello'))
// true

size長度

size Property

let s = new Set()
s.add('hello').add('goodbye')
console.log(s.size)
// 2

讀取數據

keys API & values API & entries API

let s = new Set()
s.add('hello').add('goodbye')
// 返回鍵集合，SetIterator是遍歷器
console.log(s.keys())
// SetIterator {"hello", "goodbye"}

// 返回值集合
console.log(s.values())
// SetIterator {"hello", "goodbye"}

// 返回鍵值對集合
console.log(s.entries())
// SetIterator{"hello" => "hello", "goodbye" => "goodbye"}
// Set本質仍是Object，仍是以鍵值對的形式存在。

forEach API

let s = new Set()
s.add('hello').add('goodbye')
s.forEach(item => {
    console.log(item)
})

for-of API

let s = new Set()
s.add('hello').add('goodbye')
for(let item if s) {
    console.log(item)
}

修改數據

目前沒有提供修改的API，關於修改須要先刪除再添加

數組去重ES6能夠用Set處理

const arr = [1,2,1,3,4,1]
const result = Array.from(new Set(arr)]
// [ 1, 2, 3, 4 ]
// or
const result = [... new Set(arr)]
// [ 1, 2, 3, 4 ]

Map數據結構（字典類型）

以前對象的鍵都是字符串，會出錯？

ES6以前對象的鍵是一個字符串，會遇到下面的問題。鍵被直接toString了，那麼咱們裏面隨便傳一個對象均可以訪問到值

const obj = {}
obj[true] = 'value'
obj[123] = 'value'
obj[{a: 1, b: 2}] = 'haha'

console.log(Reflect.ownKeys(obj)) // [ '123', 'true', '[object Object]' ]

console.log(obj[{}]) // haha
console.log(obj['[object Object]']) // haha

map的key能夠是任意類型

下面的key是對象

const m = new Map()

const tom = {name: 'xm'}

m.set(tom, 90)

console.log(m) // Map { { name: 'xm' } => 90 }
console.log(m.get(tom)) // 90

下面的key是數字，也能夠是函數

let map = new Map()
map.set(1, 'value-2')
let o = function () {
    console.log('o')
}
map.set(o, 4)
console.log(map)
// Map(2) {1 => "value-2", ƒ => 4} ƒ表示一個函數function
console.log(map.get(o))
// 4

若是實例化一個map對象

// 聲明瞭一個Map
let map = new Map()
// 聲明並初始化數據，傳入的參數是可遍歷的對象
// 可是對其可遍歷的元素有條件限制，必需要用key
let map = new Map([1, 2, 3])
// 報錯 Iterator value 1 is not an entry object 不是一個字典形式

// 正確寫法
// 對於外層數據知足可遍歷對象，內層數組是外層對象的一個元素，前面1是key，後面2是value，一樣前面的3是key，後面的4是value
let map = new Map([[1, 2]], [3, 4])
console.log(map)
// Map(2) {1 => 2, 3 => 4}
// 區別：map裏面的key能夠是任意值，set裏面的元素能夠是任意值

Map方法

map方法有set、delete、has、clear、size、forEach、for-of

添加/編輯數據

set API ——（添加的是能夠修改的）

let map = new Map()
map.set(1, 2)
map.set(3, 4)
console.log(map)
// Map(2) {1 => 2, 3 => 4}
map.set(1, 2).set(3, 4)
console.log(map)
// Map(2) {1 => 2, 3 => 4}
map.set(1, 3)
console.log(map)
// Map(2) {1 => 3, 3 => 4}

刪除數據

delete API —— （刪除索引值）

let map = new Map()
map.set(1, 2).set(3, 4)
// Map(2) {1 => 2, 3 => 4}
map.delete(1)
console.log(map)
// Map(1) {3 => 4}

清空數據

clear API

let map = new Map()
map.set(1, 2).set(3, 4)
// Map(2) {1 => 2, 3 => 4}
map.clear()
console.log(map)
// Map(0) {}

查找數據

has API —— （查找索引值）

let map = new Map()
map.set(1, 2).set(3, 4)
console.log(map.has(1))
// true

Size長度

size Property

let map = new Map()
map.set(1, 2).set(3, 4)
console.log(map.size)
// 2

讀取數據

數據的順序是根據初始化的順序一致的

get API & keys API & values API & entries API

let map = new Map()
map.set(1, 2).set(3, 4)
console.log(map.get(1))
// 2
console.log(map.keys())
// MapIterator {1, 3}
console.log(map.values())
// MapIterator {2, 4}
console.log(map.entries())
// MapIterator {1 => 2, 3 => 4}

forEach API

let map = new Map()
map.set(1, 'value-2').set(3, 'value-4')
map.forEach((value, key) => {
    console.log(value, key)
})
// value-2 1
// value-4 3

for-of API

let map = new Map()
map.set(1, 'value-2').set(3, 'value-4')
// map是一個可遍歷對象，[key, value]和以前定義的數據結構是一致的
for (let [key, value] of map) {
    console.log(key, value)
}
// 1 "value-2"
// 3 "value-4"

Map和Object的區別

上面的區別以外：

Map和Object的區別	Map	Object
鍵的類型	Map的鍵能夠是任意值，包括函數、對象、基本類型	Object的鍵只能是字符串和Symbols
鍵的順序	Map中的鍵值是有序的	對象的鍵是無序的，<br/>- Object若是是整數或者整數類型的字符串，則按照從小到大的順序進行排列，其他的數據結構按照輸入的順序排列。<br/>- Object若是裏面有整數還有其餘數據類型，整數放在最前面
鍵值對的統計	你能夠經過size屬性直接獲取一個Map的鍵值對個數	Object只能進行手動計算
鍵值對的遍歷	Map可直接進行迭代，而Object的迭代須要獲取它的鍵數組	Object的遍歷方法沒有Map多
性能	Map在涉及頻繁增刪鍵值對的場景下會有性能優點	-

WeakSet和WeakMap

不經常使用、API都同樣

WeakSet和Set的區別：

• 存儲的數據只能是對象

WeakMap和Map的區別：

• 只能接受對象類型的key

學習版圖