ES6及以上 - Map数据结构 - 《前端总结》

键值对关系
创建Map数据
- new Map() 后通过set方法添加
- new Map() 传入参数
Map实例属性和方法

键值对关系

在开发中常常会需要用到 key-value 对应的关系，用来存储多个一一对应的值。JavaScript 中的对象本身也是一种键值对的集合，具备了一一对应的条件。但是如果用对象来存储数据，存在一些问题：

const obj = {
  "9": "BB",
  9: "AA",
};
console.info(obj[9]);
console.info(Object.keys(obj));

上面的代码输出的是：

AA
 [ '9' ]

这意味着对象的键中 number 型的9和 string 型的'9'是一样的，而且多个定义会覆盖对应的值，这是因为对象的属性名不能是 number 型，数值型会被转为 string 类型。对象的属性名只能是string或者Sybmol。所以，如果想用对象来建立这种键值对关系，那么就存在着键名只能是字符串或者Symbol这一弊端。而只有少数情况使用 Symbol 值作为属性名。
这样基本上对象只能实现字符串-值的对应关系。在这个背景下，Map 数据结构出现了，区别于对象只能用string，Symbol类型作键，Map数据结构可以接受各种类型的值当作键，真正实现了值-值对应。所以，如果你需要键值对的数据结构，Map 结构应该是首选。 Map 结构的键的比较和 Set 结构一样是基于同值比较的：

键是基本类型的值的话，则要求严格相等(值和类型都相等)。+0 和-0 是同一个键，undefined和null是两个键。但是对于并不严格等于自身的 NaN，Map 会将其视为同一个键。
键是引用类型的话，则要求引用内存地址是相等，否则都是会被视为不同的键的。但也正因如此，使用对象作为键就可以不用担心覆盖重写的问题。
创建Map数据
new Map() 后通过set方法添加

set 方法传入两个参数，分别对应键和值

const map1 = new Map();
map1.set(+0,1);
map2.set(-0,2);
console.log(map1); // Map { 0 => 2 };
// 因为+0和-0是相等的，所以后面的值会覆盖前面的值

new Map() 传入参数

传入参数时，支持的参数可以是任何具有 Iterator 可遍历接口，且每个成员都是双元素的数组的数据结构。这也意味着，支持传入数组，Set 以及 Map 自身。每个成员，也就是单个的双元素数组会被解析成键值对。

const m1 = new Map([
  ["name", "xuwei"],
  ["gender", "man"],
]);
console.info("m1", m1);
//得到如下：
// m1 Map { 'name' => 'xuwei', 'gender' => 'man' }

Map实例属性和方法

size 属性

返回 Map 数据集中的键值对个数。

const m1 = new Map([
  ["name", "xuwei"],
  ["gender", "man"],
]);
console.info("m1", m1.size);
// 得到
// m1 2

set(key,value) 方法

传入具有对应关系的键和值，返回值是整个 Map 结构，意味着set方法可以链式调用。传入的键在Map结构中存在时，新传如的值会覆盖之前的值，否则才会创建新的键值对。

const map = new Map();
map.set("name", "xw").set("name", "yang").set("gender", "man");
console.info(map);
//得到
// Map { 'name' => 'yang', 'gender' => 'man' }

两次设置字符串的name作为键，后面的值将前面的覆盖。

get(key)方法

读取传入的key对应的值，作为方法的返回值。key 不存在的时候 undefined。

const map = new Map();
map.set([1], 1).set("name", "xw");
console.info(map.get([1])); // undefined
console.info(map.get("name")); //  xw

第一个得到undefined是因为set的时候用的数组[1],取的时候虽然也是[1]，但是两个数组，引用类型的地址并不一样，所以是取不到对应的值的。

has(key)

传入一个 key ，返回一个 boolean 值，用来表示当前的 Map 结构是否包含该 key。

const map = new Map();
map.set([1], 1).set("name", "xw");
console.info(map.has([1]));  // false
console.info(map.has("name")); // true

delete(key)

传入对应的 key，删除 Map 结构中对应的键值对。删除成功返回 true, Map 结构中不存在该 key 时返回 false。

const arr = [1];
const map = new Map();
map.set(arr, 1).set("name", "xw");
console.info(map);  // Map { [ 1 ] => 1, 'name' => 'xw' }
map.delete(arr);  
console.info(map); //Map { 'name' => 'xw' }

clear()

清除 Map 结构中的所有成员。无返回值(undefined)。

const map = new Map();
map.set(arr, 1).set("name", "xw");
map.clear();
console.info(map); // Map {}

Map 成员遍历

对于一个数据集合，从中取出每个值进行操作一定是必要的操作，Map 也不例外，Map 的元素遍历的方式可以通过迭代器和自身的forEach方法。通过下面的 Map 结构逐个示例：

const map = new Map([
  ["k1", "v1"],
  ["k2", "v2"],
]);

迭代器

Map 结构可以有三个方法得到元素的迭代器。

Map.prototype.keys()返回键名的迭代器

通过keys()得到键名的迭代器，再通过每个 key 取值。

console.info(map.keys());  
// [Map Iterator] { 'k1', 'k2' }
for (const iterator of map.keys()) {
  console.info(iterator);
}
// k1
// k2

Map.prototype.entries()返回所有成员的迭代器

console.info(map.entries()); 
// [Map Entries] { [ 'k1', 'v1' ], [ 'k2', 'v2' ] }
for (const iterator of map.entries()) {
console.info(iterator[0] + "--" + iterator[1]);
}
//k1--v1
//k2--v2

得到键值对的迭代器，通过数组取值得到键和值。这个迭代器取值也可以写成如下：

for (const [key, value] of map.entries()) {
console.info(key + "--" + value);
}

forEach() 方法

forEach方法可以接受两个参数，第一个参数是函数，用于接受遍历的value和key，参数依次是 value,key,当前 map。第二个参数可以用于指定第一个参数函数中的 this。

const target = {
say: (key, value) => {
 console.info("key=" + key + "--value" + value);
},
};
map.forEach(function (value, key, map) {
this.say(key, value);   // 这里的 this 就是 target 对象
}, target);
//key=k1--valuev1
//key=k2--valuev2

如上，forEach函数传入的第二个参数就是target，this.say实际上调用的是target.say方法。

Map数据结构