一直以来，js只能使用数组和对象来保存多个数据，缺乏像其他语言那样拥有丰富的集合类型。因此，ES6新增了两种集合类型（set 和 map），用于在不同的场景中发挥作用。
map 集合
键值对（key value pair）数据集合的特点：键不可重复。
map 集合专门用于存储多个键值对数据。
在 map 出现之前，我们使用的是对象的方式来存储键值对，键是属性名，值是属性值。
使用对象存储有以下问题：
- 键名只能是字符串；
- 获取数据的数量不方便；
- 键名容易跟原型上的名称冲突。
- 如何创建 mp 集合？
new Map(); // 创建一个空的 map
new Map(iterable); // 创建一个具有初始内容的 map，初始内容来自于可迭代对象每一次迭代的结果，但是，它要求每一次迭代的结果必须是一个长度为 2 的数组，数组第一项表示键，第二项表示值。
const arr = [["a", 1], ["b", 2], ["c", 3]];
const m = new Map(arr);
console.log(m); // Map(3) {"a" => 1, "b" => 2, "c" => 3}
- 如何进行后续操作？
- size：只读属性，获取当前 map 中键的数量。
const arr = [["a", 1], ["b", 2], ["c", 3]];
const m = new Map(arr);
console.log(m, m.size); // Map(3) {"a" => 1, "b" => 2, "c" => 3} 3
- set(键， 值)：设置一个键值对，键和值可以是任何类型。
如果键不存在，则添加一项；如果键已存在，则修改它的值；比较方式和 set 集合相同。
const arr = [["a", 1], ["b", 2], ["c", 3]];
const m = new Map(arr);
m.set(4, "b");
m.set("a", 123);
console.log(m); // Map(4) {"a" => 123, "b" => 2, "c" => 3, 4 => "b"}
- get(键)：根据一个键得到对应的值。
const arr = [["a", 1], ["b", 2], ["c", 3]];
const m = new Map(arr);
m.set(4, "b");
m.set("a", 123);
console.log(m.get(4)); // b
console.log(m.get(5)); // undefined
- has(键)：判断某个键是否存在。
const arr = [["a", 1], ["b", 2], ["c", 3]];
const m = new Map(arr);
m.set(4, "b");
m.set("a", 123);
console.log(m.has(4)); // true
console.log(m.has(5)); // false
- delete(键)：删除指定的键。
const arr = [["a", 1], ["b", 2], ["c", 3]];
const m = new Map(arr);
m.set(4, "b");
m.set("a", 123);
m.delete("a");
console.log(m); // Map(3) {"b" => 2, "c" => 3, 4 => "b"}
- clear()：清空map。
const arr = [["a", 1], ["b", 2], ["c", 3]];
const m = new Map(arr);
m.set(4, "b");
m.set("a", 123);
m.delete("a");
m.clear();
console.log(m); // Map(0) {}
- 如何与数组进行转换？
和 set 集合一样。
const arr = [["a", 1], ["b", 2], ["c", 3]];
const m = new Map(arr);
const arr1 = [...m];
console.log(arr1); // [Array(2), Array(2), Array(2)]
- 如何遍历？
- for-of，每次迭代得到的是一个长度为2的数组。
const arr = [["a", 1], ["b", 2], ["c", 3]];
const m = new Map(arr);
// for(const [key, value] of m) {
// console.log(key, value); // a 1 b 2 c 3
// }
for(const item of m) {
console.log(item[0], item[1]); // a 1 b 2 c 3
}
- forEach，通过回调函数遍历。参数1，每一项的值；参数2，每一项的键；参数3，map 本身。
const arr = [["a", 1], ["b", 2], ["c", 3]];
const m = new Map(arr);
m.forEach((value, key, item) => {
console.log(value, key, item);
});
[扩展]手写 map
class MyMap {
constructor(iterable = []) {
// 验证是否是可迭代的对象
if (typeof iterable[Symbol.iterator] !== "function") {
throw new TypeError(`你提供的${iterable}不是一个可迭代的对象`);
}
this._datas = [];
for (const item of iterable) {
// item 也是一个可迭代对象
if (typeof item[Symbol.iterator] !== "function") {
throw new TypeError(`你提供的${item}不是一个可迭代的对象`);
}
const iterator = item[Symbol.iterator]();
const key = iterator.next().value;
const value = iterator.next().value;
this.set(key, value);
}
}
set(key, value) {
const obj = this._getObj(key);
if (obj) {
// 修改
obj.value = value;
} else {
this._datas.push({
key,
value
})
}
}
get(key) {
const item = this._getObj(key);
if(item) {
return item.value;
}
return undefined;
}
get size() {
return this._datas.length;
}
delete(key) {
for(let i = 0; i < this._datas.length; i ++) {
const element = this._datas[i];
if(this.isEqual(element.key, key)) {
this._datas.splice(i, 1);
return true;
}
}
return false;
}
clear() {
this._datas.length = 0;
}
// 根据key值从内部数组中，找到对应的数组项
_getObj(key) {
for (const item of this._datas) {
if (this.isEqual(item.key, key)) {
return item;
}
}
}
has(key) {
return this._getObj(key) !== undefined
}
// 判断两个数据是否相等
isEqual(data1, data2) {
if (data1 === 0 && data2 === 0) {
return true;
}
return Object.is(data1, data2);
}
*[Symbol.iterator]() {
for(const item of this._datas) {
yield [item.key, item.value];
}
}
forEach(callback) {
for(const item of this._datas) {
callback(item.value, item.key, this);
}
}
}