Vue 3 高阶指南之 Map
Vue 3 高阶指南之 Map
高阶指南
在进入 Vue 3 组合 API，深入响应式之前，我们需要搞懂 ES6 出现的几个 API，其中包含以下几个
- map
- weakMap
- set
- weakSet
- proxy
- reflect
如果不知道的小伙伴，可以自行到 MDN 进行查阅。
Map
简单来说就是用于保存键值对对象，能够记住键的原始插入顺序，对于 key 来说，任何值都可以作为一个 key，或者 value。
我们都知道，Map 是一个构造函数，也就是传统的面向对象编程的类的概念，所以可以通过以下方式来创建 map 实例:
new Map()
属性
Map.length
属性 length 的值为 0 。想要计算一个Map 中的条目数量， 使用 Map.prototype.size.
Map.prototype.size
返回Map对象的键/值对的数量
new Map().size
方法
Map.prototype.clear()
移除Map对象的所有键/值对 。
Map.prototype.delete(key)
如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 *false*。随后调用 Map.prototype.has(key) 将返回 false 。
Map.prototype.entries()
返回一个新的 Iterator 对象，它按插入顺序包含了Map对象中每个元素的 「[key, value]」 **数组**。
Map.prototype.forEach(callbackFn[, thisArg])
按插入顺序，为 Map对象里的每一键值对调用一次callbackFn函数。如果为forEach提供了thisArg，它将在每次回调中作为this值。
Map.prototype.get(key)
返回键对应的值，如果不存在，则返回undefined。
Map.prototype.has(key)
返回一个布尔值，表示Map实例是否包含键对应的值。
Map.prototype.keys()
返回一个新的 Iterator对象， 它按插入顺序包含了Map对象中每个元素的「键」 。
Map.prototype.set(key, value)
设置Map对象中键的值。返回该Map对象。
Map.prototype.values()
返回一个新的Iterator对象，它按插入顺序包含了Map对象中每个元素的「值」 。
实例
使用 Map 对象
let myMap = new Map();
let keyObj = {};
let keyFunc = function() {};
let keyString = 'a string';
添加 key
myMap.set(keyString, "Ken")
myMap.set(keyObj, 'Ken')
myMap.set(keyFunc,"ken")
size 获取
myMap.size;
读取值
myMap.get(keyFunc)
myMap.get(keyString)
myMap.get(keyObj)
将 NaN 作为 Map 的 key
NaN 也可以作为Map对象的键。虽然 NaN 和任何值甚至和自己都不相等(NaN !== NaN 返回true)，但下面的例子表明，NaN作为Map的键来说是没有区别的:
myMap.set(NaN, 'not a number')
myMap.get(NaN)
let otherNaN = Number('foo')
myMap.get(otherNaN)
使用 for .. of 方法来迭代 Map
Map可以使用for..of循环来实现迭代：
for(let [key, value] of myMap) {
console.log(key + " = " + value)
}
循环 keys
for (let key of myMap.keys()) {
console.log(key);
}
循环 values
for (let value of myMap.values()) {
console.log(value);
}
循环 entries
for (let [key, value] of myMap.entries()) {
console.log(key + " = " + value);
}
使用 forEach() 方法迭代 Map
Map也可以通过forEach()方法迭代：
myMap.forEach(function(value, key) {
console.log(key + " = " + value);
})
Map 与数组的关系
let kvArray = [["key1", "value1"], ["key2", "value2"]]
let map = new Map(kvArray)
map.get('key1')
map.get("key2")
console.log(map)
console.log(Array.from(map))
console.log([...map])
Array.from(map.keys())
Array.from(map.values())
Array.from(map.entries())
复制或合并 Maps
map 能像数组一样被复制：
let original = new Map([
[1, 'one']
]);
let clone = new Map(original);
console.log(clone.get(1)); // one
console.log(original === clone); // false. 浅比较 不为同一个对象的引用
Map 对象间可以进行合并，但是会保持键的唯一性。
let first = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let second = new Map([
[1, 'uno'],
[2, 'dos']
]);
// 合并两个Map对象时，如果有重复的键值，则后面的会覆盖前面的。
// 展开运算符本质上是将Map对象转换成数组。
let merged = new Map([...first, ...second]);
console.log(merged.get(1)); // uno
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three
Map对象也能与数组合并：
let first = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let second = new Map([
[1, 'uno'],
[2, 'dos']
]);
// Map对象同数组进行合并时，如果有重复的键值，则后面的会覆盖前面的。
let merged = new Map([...first, ...second, [1, 'eins']]);
console.log(merged.get(1)); // eins
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three
删除与判断
let myMap = new Map()
myMap.set('bla','blaa')
myMap.set('bla2','blaa2')
console.log(myMap) // Map { 'bla' => 'blaa', 'bla2' => 'blaa2' }
myMap.has('bla') // true
myMap.delete('bla') // true
console.log(myMap) // Map { 'bla2' => 'blaa2' }
腾讯云开发者
