「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」
导读
你将收获......
🍉 Map的基本使用！
🍉 Objects和maps的异同点，使用场景，以及如何互相转化！
🍉 Map的循环、复制、合并、等操作的使用！
Map基本使用
🍇【定义】：一个带键的数据项的集合
🍈【区别】：像一个 Object 一样，它们最大的差别是 Map 允许任何类型的键（key）。
🍉【方法和属性】：
| 写法 | 关键字 | 描述 |
|---|---|---|
| new Map() | 创建 | 创建map |
| map.set(key, value) | 设置 | 根据键存储值 |
| map.get(key) | 获取 | 根据键来返回值，如果 map 中不存在对应的 key，则返回 undefined |
| map.has(key) | 是否存在 | 如果 key 存在则返回 true，否则返回 false |
| map.delete(key) | 删除 | 删除指定键的值 |
| map.clear() | 清空 | 清空 map |
| map.size | 大小 | 返回当前元素个数 |
🎨示例：
//创建map
let map = new Map()
//设置值
map.set('1', 'str1'); // 字符串键
map.set(1, 'num1'); // 数字键
//获取值（根据key）
console.log(map.get(1)); // 'num1'
console.log(map.get('1')); // 'str1'
//map的大小
console.log(map.size) //3
Objects和maps的比较
Objects和 Maps 类似的是，它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。
对比：
意外的键
- Map：不包含任何键（
Map默认情况不包含任何键。只包含显式插入的键。） - Object：有一个原型（
一个 Object有一个原型, 原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。）
键的类型
- Map：任意值（
一个 Map的键可以是任意值，包括函数、对象或任意基本类型。） - Object：必须是 String 或Symbol（
一个Object 的键必须是一个 String 或是Symbol。）
键的顺序
- Map：有序（
Map 中的 key 是有序的。因此，当迭代的时候，一个 Map 对象以插入的顺序返回键值。） - Object：无序（
一个 Object 的键是无序的）
Size
- Map：可直接获取长度（
Map 的键值对个数可以轻易地通过size 属性获取） - Object：不能直接获取长度（
Object 的键值对个数只能手动计算）
性能
- Map：在频繁增删键值对的场景下表现更好。
- Object：在频繁添加和删除键值对的场景下未作出优化。
Map的链式调用
每一次 map.set 调用都会返回 map 本身，所以可以进行“链式”调用
🎨示例：
map.set('1', 'str1')
.set(1, 'num1')
Map的初始化
当创建一个 Map 后，可以传入一个带有键值对的数组（或其它可迭代对象）来进行初始化。换句话说使用常规的Map构造函数可以将一个二维键值对数组转换成一个Map对象
let map = new Map([
['1', 'str1'],
[1, 'num1']
])
Map迭代
在map里使用循环
| 方法 | 描述 |
|---|---|
| map.keys() | 遍历并返回所有的键 |
| map.values() | 遍历并返回所有的值 |
| map.entries() | 遍历并返回所有的实体 |
🎨示例：
let recipeMap = new Map([
['cucumber', 500],
['tomatoes', 350],
['onion', 50]
]);
for(let...of...){}
Map和forEach
Map 有内置的 forEach 方法，与 Array 类似
// 对每个键值对 (key, value) 运行 forEach 函数
recipeMap.forEach( (value, key, map) => {
console.log(`${key}: ${value}`);
});
Map和Objects互相转化
📖已有对象obj，转为map
let obj = {
name: "John",
age: 30
};
let map = new Map(Object.entries(obj));
console.log( map.get('name') ); // John
方法：Object.entries(obj) 从普通对象（plain object）创建
Map原理：Object.entries
返回的键/值对数组：[ ["name","John"], ["age", 30] ]是Map所需要的格式。
📖已有map，转对象obj
let prices = Object.fromEntries([
['banana', 1],
['orange', 2]
]);
// 现在 prices = { banana: 1, orange: 2}
console.log(prices.orange); // 2
方法：Object.fromEntries 从
Map得到一个普通对象（plain object）原理：给定一个具有
[key, value]键值对的数组，该方法会根据给定数组创建一个对象
复制合并Maps
📙 Map的复制
let clone = new Map(original);
📙 Map之间的合并
// 合并两个Map对象时，如果有重复的键值，则后面的会覆盖前面的。
// 展开运算符本质上是将Map对象转换成数组。
let merged = new Map([...first, ...second]);
📙 Map和数组合并
// Map对象同数组进行合并时，如果有重复的键值，则后面的会覆盖前面的。
let merged = new Map([...first, ...second, [1, 'eins']]);
参考资料：
🎨【点赞】【关注】不迷路，更多前端干货等你解锁
往期推荐
