python入门指南bl-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' }