qt 中 Map根據value排序_Map 和 Set 兩種資料結構在ES6的作用 如果要用一句來描述，我們可以說
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
本身是一個構造函數，用來生成
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, 否則傳回falseclear(): 移除集合中的所有項
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的集合中是唯一的
WeakSet
的出現主要解決弱引用對象存儲的場景, 其結構與
Set
類似
與
Set
的差別
與Set相比，WeakSet 隻能是對象的集合，而不能是任何類型的任意值WeakSet集合中對象的引用為弱引用。如果沒有其他的對WeakSet中對象的引用，那麼這些對象會被當成垃圾回收掉。這也意味着WeakSet中沒有存儲目前對象的清單。正因為這樣，WeakSet 是不可枚舉的
WeakSet
的屬性跟操作方法與
Set
一緻，不同的是
WeakSet
沒有周遊方法，因為其成員都是弱引用，弱引用随時都會消失，周遊機制無法保證成員的存在
上面一直有提到弱引用，那弱引用到底是指什麼呢？
弱引用是指不能確定其引用的對象不會被垃圾回收器回收的引用，換句話說就是可能在任意時間被回收
Map
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 對用的值，如果沒有，傳回 undefinedhas(key): 某個鍵是否在 Map 對象中，在傳回 true 否則傳回 falsedelete(key): 删除某個鍵，傳回 true, 如果删除失敗傳回 falseclear(): 删除所有元素
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
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 屬于弱引用不可周遊
參考文獻
參考文獻
https://zh.wikipedia.org/wiki/%E5%BC%B1%E5%BC%95%E7%94%A8https://developer.mozilla.org/https://es6.ruanyifeng.com/近期一篇文章上手Vue3中新增的API
小程式雲開發支援公衆号網頁開發了
qt 中 Map根據value排序_Map 和 Set 兩種資料結構在ES6的作用
若此文有用，何不素質三連❤️