[[347780]]

 如果要用一句來描述，我們可以說

Set是一種叫做集合的數(shù)據(jù)結(jié)構(gòu)，Map是一種叫做字典的數(shù)據(jù)結(jié)構(gòu)

那什么是集合？什么又是字典呢？

•  集合

集合，是由一堆無序的、相關(guān)聯(lián)的，且不重復(fù)的內(nèi)存結(jié)構(gòu)【數(shù)學(xué)中稱為元素】組成的組合

•  字典

字典（dictionary）是一些元素的集合。每個元素有一個稱作key 的域，不同元素的key 各不相同

它們之間又有什么區(qū)別呢？

•  共同點：集合、字典都可以存儲不重復(fù)的值
•  不同點：集合是以[值，值]的形式存儲元素，字典是以[鍵，值]的形式存儲

背景

大多數(shù)主流編程語言都有多種內(nèi)置的數(shù)據(jù)集合。例如Python擁有列表（list）、元組（tuple）和字典（dictionary）,Java有列表（list）、集合（set)、隊列（queue）

然而  JavaScript 直到ES6的發(fā)布之前，只擁有數(shù)組（array）和對象（object）這兩個內(nèi)建的數(shù)據(jù)集合

在 ES6 之前,我們通常使用內(nèi)置的 Object 模擬Map

但是這樣模擬出來的map會有一些缺陷，如下:

1.  Object的屬性鍵是String或Symbol，這限制了它們作為不同數(shù)據(jù)類型的鍵/值對集合的能力
2.  Object不是設(shè)計來作為一種數(shù)據(jù)集合，因此沒有直接有效的方法來確定對象具有多少屬性

Set

定義: Set 對象允許你存儲任何類型的唯一值，無論是原始值或者是對象引用，Set對象是值的集合，你可以按照插入的順序迭代它的元素。Set中的元素只會出現(xiàn)一次，即 Set 中的元素是唯一的

Set本身是一個構(gòu)造函數(shù)，用來生成 Set 數(shù)據(jù)結(jié)構(gòu)

基本使用

•  語法

new Set([iterable]) 接收一個數(shù)組（或者具有 iterable 接口的其他數(shù)據(jù)結(jié)構(gòu)）, 返回一個新的Set對象 

const set = new Set([1,2,1,2])  
console.log(set) // {1,2}  

上面代碼可以看出 Set 是可以去除數(shù)組中的重復(fù)元素

屬性及方法

屬性

•  size: 返回集合中所包含的元素的數(shù)量 

console.log(new Set([1,2,1,2]).size) // 2 

操作方法

•  add(value): 向集合中添加一個新的項
•  delete(value): 從集合中刪除一個值
•  has(value): 如果值在集合中存在，返回ture, 否則返回false
•  clear(): 移除集合中的所有項 

let set = new Set()  
set.add(1)  
set.add(2)  
set.add(2)  
set.add(3)  
console.log(set) // {1,2,3}  
set.has(2) // true  
set.delete(2)    
set.has(2) // false  
set.clear()  

遍歷方法

•  keys(): 返回鍵名的遍歷器
•  values(): 返回鍵值的遍歷器
•  entries(): 返回鍵值對的遍歷器
•  forEach(): 使用回調(diào)函數(shù)遍歷每個成員 

let set = new Set([1,2,3,4])  
// 由于set只有鍵值，沒有鍵名，所以keys() values()行為完全一致  
console.log(Array.from(set.keys())) // [1,2,3,4]  
console.log(Array.from(set.values())) // [1,2,3,4]  
console.log(Array.from(set.entries())) //  [[1,1],[2,2],[3,3],[4,4]]  
set.forEach((item) => { console.log(item)}) // 1,2,3,4 

應(yīng)用場景

因為 Set 結(jié)構(gòu)的值是唯一的，我們可以很輕松的實現(xiàn)以下 

// 數(shù)組去重  
let arr = [1, 1, 2, 3];  
let unique = [... new Set(arr)];  
let a = new Set([1, 2, 3]);  
let b = new Set([4, 3, 2]);    
// 并集  
let union = [...new Set([...a, ...b])]; // [1,2,3,4]  
// 交集  
let intersect = [...new Set([...a].filter(x => b.has(x)))]; [2,3]    
// 差集  
let difference = Array.from(new Set([...a].filter(x => !b.has(x)))); [1] 

WeakSet

WeakSet 對象是一些對象值的集合, 并且其中的每個對象值都只能出現(xiàn)一次。在WeakSet的集合中是唯一的

WeakSet 的出現(xiàn)主要解決弱引用對象存儲的場景, 其結(jié)構(gòu)與Set類似

與Set的區(qū)別

•  與Set相比，WeakSet 只能是對象的集合，而不能是任何類型的任意值
•  WeakSet集合中對象的引用為弱引用。如果沒有其他的對WeakSet中對象的引用，那么這些對象會被當(dāng)成垃圾回收掉。這也意味著WeakSet中沒有存儲當(dāng)前對象的列表。正因為這樣，WeakSet 是不可枚舉的

WeakSet 的屬性跟操作方法與 Set 一致，不同的是 WeakSet 沒有遍歷方法，因為其成員都是弱引用，弱引用隨時都會消失，遍歷機(jī)制無法保證成員的存在

上面一直有提到弱引用，那弱引用到底是指什么呢？

弱引用是指不能確保其引用的對象不會被垃圾回收器回收的引用，換句話說就是可能在任意時間被回收

Map

Map 對象保存鍵值對，并且能夠記住鍵的原始插入順序。任何值(對象或者原始值) 都可以作為一個鍵或一個值。一個Map對象在迭代時會根據(jù)對象中元素的插入順序來進(jìn)行 — 一個  for...of 循環(huán)在每次迭代后會返回一個形式為[key，value]的數(shù)組

基本使用

•  語法

new Map([iterable]) Iterable 可以是一個數(shù)組或者其他 iterable 對象，其元素為鍵值對(兩個元素的數(shù)組，例如: [[ 1, 'one' ],[ 2, 'two' ]])。每個鍵值對都會添加到新的 Map 

let map = new Map()  
map.set('name', 'vuejs.cn');  
console.log(map.get('name')) 

屬性及方法

基本跟 Set 類似，同樣具有如下方法屬性

•  size: 返回 Map 結(jié)構(gòu)的元素總數(shù) 

let map = new Map()  
map.set('name', 'vuejs.cn'); 
console.log(map.size) // 1  
console.log(new Map([['name','vue3js.cn'], ['age','18']]).size) // 2 

操作方法

•  set(key, value): 向 Map 中加入或更新鍵值對
•  get(key): 讀取 key 對用的值，如果沒有，返回 undefined
•  has(key): 某個鍵是否在 Map 對象中，在返回 true 否則返回 false
•  delete(key): 刪除某個鍵，返回 true, 如果刪除失敗返回 false
•  clear(): 刪除所有元素 

let map = new Map()  
map.set('name','vue3js.cn')  
map.set('age','18') 
console.log(map) // Map {"name" => "vuejs.cn", "age" => "18"}  
map.get('name') // vue3js.cn   
map.has('name') // true  
map.delete('name')    
map.has(name) // false  
map.clear() // Map {}  

遍歷方法

•  keys()：返回鍵名的遍歷器
•  values()：返回鍵值的遍歷器
•  entries()：返回所有成員的遍歷器
•  forEach()：遍歷 Map 的所有成員 

let map = new Map()  
map.set('name','vue3js.cn')  
map.set('age','18')   
console.log([...map.keys()])  // ["name", "age"]  
console.log([...map.values()])  // ["vue3js.cn", "18"]  
console.log([...map.entries()]) // [['name','vue3js.cn'], ['age','18']]  
// name vuejs.cn  
// age 18  
map.forEach((value, key) => { console.log(key, value)})  

應(yīng)用場景

Map 會保留所有元素的順序, 是在基于可迭代的基礎(chǔ)上構(gòu)建的，如果考慮到元素迭代或順序保留或鍵值類型豐富的情況下都可以使用，下面摘抄自 vue3 源碼中依賴收集的核心實現(xiàn) 

let depsMap = targetMap.get(target)  
 if (!depsMap) {  
   targetMap.set(target, (depsMap = new Map()))  
 }  
 let dep = depsMap.get(key)  
 if (!dep) {  
   depsMap.set(key, (dep = new Set()))  
 }  
 if (!dep.has(activeEffect)) {  
   dep.add(activeEffect)  
   activeEffect.deps.push(dep)  
   ...  
 } 

WeakMap

WeakMap 對象是一組鍵/值對的集合，其中的鍵是弱引用的。其鍵必須是對象，而值可以是任意的

與Map的區(qū)別

•  Map 的鍵可以是任意類型，WeakMap 的鍵只能是對象類型
•  WeakMap 鍵名所指向的對象，不計入垃圾回收機(jī)制

WeakMap 的屬性跟操作方法與 Map 一致，同 WeakSet 一樣，因為是弱引用，所以 WeakSet 也沒有遍歷方法

類型的轉(zhuǎn)換

•  Map 轉(zhuǎn)為 Array 

// 解構(gòu)  
const map = new Map([[1, 1], [2, 2], [3, 3]])  
console.log([...map]) // [[1, 1], [2, 2], [3, 3]]  
// Array.from()  
const map = new Map([[1, 1], [2, 2], [3, 3]])  
console.log(Array.from(map)) // [[1, 1], [2, 2], [3, 3]] 

•  Array 轉(zhuǎn)為 Map 

const map = new Map([[1, 1], [2, 2], [3, 3]])  
console.log(map) // Map {1 => 1, 2 => 2, 3 => 3} 

•     Map 轉(zhuǎn)為 Object 

// 非字符串鍵名會被轉(zhuǎn)換為字符串  
function mapToObj(map) {  
    let obj = Object.create(null)  
    for (let [key, value] of map) {  
        obj[key] = value  
    }  
    return obj  
}  
const map = new Map().set('name', 'vue3js.cn').set('age', '18')  
mapToObj(map)  // {name: "vue3js.cn", age: "18"} 

•  Object 轉(zhuǎn)為 Map 

let obj = {"a":1, "b":2};  
let map = new Map(Object.entries(obj)) 

總結(jié)

•  Set、Map、WeakSet、WeakMap、都是一種集合的數(shù)據(jù)結(jié)構(gòu)
•  Set、WeakSet 是[值,值]的集合，且具有唯一性
•  Map 和 WeakMap 是一種[鍵,值]的集合，Map 的鍵可以是任意類型，WeakMap 的鍵只能是對象類型
•  Set 和 Map 有遍歷方法，WeakSet 和 WeakMap 屬于弱引用不可遍歷