前言
Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。
JS中的Object类型实际上是一种键值对映射(key-value pairs)，但是JS中这种键值对映射有点问题：key只能为string类型。为了和其他编程语言有相似的数据结构(如Map, Dict等)，ES6中新增了Map类型。
属性与方法
size：是可访问属性，用于返回 一个Map 对象的成员数量。
Map()：构造方法。
clear()：移除Map对象中的所有元素。
delete(key)：移除 Map 对象中指定的元素；如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 false。
entries()：返回一个新的包含 [key, value] 对的 Iterator 对象，返回的迭代器的迭代顺序与 Map 对象的插入顺序相同。
keys()：返回一个引用的 Iterator 对象。它包含按照顺序插入 Map 对象中每个元素的key值。
values()：返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值。
forEach()：按照插入顺序依次对 Map 中每个键/值对执行一次给定的函数。
get()：返回某个 Map 对象中的一个指定元素。
set(key, value)：为 Map 对象添加或更新一个指定了键（key）和值（value）的（新）键值对。
has()：返回一个bool值，用来表明map 中是否存在指定元素.文章来源：https://www.toymoban.com/news/detail-485723.html
Map 对象遍历
let map = new Map()
// forEach
map.forEach((value, key, map) => {
console.log(map.get(key) === value)
})
// for..of
for (const key of map.keys()) {
console.log(key);
}
for (const value of map.values()) {
console.log(value);
}
for (const [key, value] of map.entries()) {
console.log(key, value);
}
Map 与数组的关系
const kvArray = [["key1", "value1"], ["key2", "value2"]];
// 将二维键值对数组转换成一个Map对象
let map = new Map(kvArray)
console.log(Array.from(map)) // 输出 [[key, value], ...] 数组
console.log([...map]); // 输出 [[key, value], ...] 数组
console.log(Array.from(map.keys())); // 输出 ["key1", "key2", ...] key 数组
console.log([...map.keys()]); // 输出 ["key1", "key2", ...] key 数组
console.log(Array.from(map.values())); // 输出 ["value1", "value2", ...] key 数组
console.log([...map.values()]); // 输出 ["value1", "value2", ...] key 数组
Map 和 Object 的区别
| Map | Object | |
|---|---|---|
| 默认值 | 默认不包含任何值，只包含显式插入的键 | 一个 Object 有一个原型，原型上的键名有可能和自己对象上设置的键名冲突 |
| 类型 | 任意 | String 或 Symbol |
| 长度 | 键值对个数通过 size 属性获取 | 键值对个数只能手动计算 |
| 性能 | 频繁增删键值对的场景下表现更好 | 频繁添加和删除键值对的场景下未作出优化 |
问题记录
如果Map的值是对象或者数组，可以直接修改生效，不需要再调用 map.set()，如：文章来源地址https://www.toymoban.com/news/detail-485723.html
// array or object
const map = new Map()
map.set('cc', [1])
const value = map.get('cc')
value.push(2)
console.log(map.get('cc')) // [1, 2]
到了这里，关于JS中Map对象的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
