|
写法
|
关键字
|
描述
|
|
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
|
大小
|
返回当前元素个数
|
🎨
示例
：
let map =
new
Map
()
map.
set
(
'1'
,
'str1'
);
map.
set
(
1
,
'num1'
);
console.
log
(map.
get
(
1
));
console.
log
(map.
get
(
'1'
));
console.
log
(map.size)
Objects和maps的比较
Objects
和
Maps
类似的是，它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。
Map：不包含任何键（
Map默认情况不包含任何键。只包含显式插入的键。
）
Object：有一个原型（
一个 Object有一个原型, 原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
）
Map：任意值（
一个 Map的键可以是任意值，包括函数、对象或任意基本类型。
）
Object：必须是 String 或Symbol（
一个Object 的键必须是一个 String 或是Symbol。
）
Map：有序（
Map 中的 key 是有序的。因此，当迭代的时候，一个 Map 对象以插入的顺序返回键值。
）
Object：无序（
一个 Object 的键是无序的
）
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 类似
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') );
方法：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)
方法：Object.fromEntries 从 Map 得到一个普通对象（plain object）
原理：给定一个具有 [key, value] 键值对的数组，该方法会根据给定数组创建一个对象
复制合并Maps
📙 Map的复制
let clone = new Map(original)
📙 Map之间的合并
let merged = new Map([...first, ...second]);
📙 Map和数组合并
let merged = new Map([...first, ...second, [1, 'eins']]);
参考资料：
MDN Map
Map and Set
🎨【点赞】【关注】不迷路，更多前端干货等你解锁
👉 一定要知道的JavaScript高阶函数
👉 最全的CSS阴影总结
👉 图解JavaScript的垃圾回收机制
👉JavaScript里this的绑定规则
