Map和Set兩種數據結構在ES6的作用

作者：佚名 2020-10-22 10:55:55

開發前端

Set是一種叫做集合的數據結構，Map是一種叫做字典的數據結構。集合、字典都可以存儲不重復的值,集合是以[值，值]的形式存儲元素，字典是以[鍵，值]的形式存儲。

[[347780]]

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

Set是一種叫做集合的數據結構，Map是一種叫做字典的數據結構

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

集合

集合，是由一堆無序的、相關聯的，且不重復的內存結構【數學中稱為元素】組成的組合

字典

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

它們之間又有什么區別呢？

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

背景

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

然而 JavaScript 直到ES6的發布之前，只擁有數組（array）和對象（object）這兩個內建的數據集合

在 ES6 之前,我們通常使用內置的 Object 模擬Map

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

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

Set

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

Set本身是一個構造函數，用來生成 Set 數據結構

基本使用

語法

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

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

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

屬性及方法

屬性

size: 返回集合中所包含的元素的數量

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(): 使用回調函數遍歷每個成員

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

應用場景

因為 Set 結構的值是唯一的，我們可以很輕松的實現以下

// 數組去重  
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 對象是一些對象值的集合, 并且其中的每個對象值都只能出現一次。在WeakSet的集合中是唯一的

WeakSet 的出現主要解決弱引用對象存儲的場景, 其結構與Set類似

與Set的區別

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

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

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

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

Map

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

基本使用

語法

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

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

屬性及方法

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

size: 返回 Map 結構的元素總數

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)})

應用場景

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

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的區別

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

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

類型的轉換

Map 轉為 Array

// 解構  
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 轉為 Map

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

Map 轉為 Object

// 非字符串鍵名會被轉換為字符串  
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 轉為 Map

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

總結

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

責任編輯：龐桂玉來源：前端大全