什么是 Map
Map 是 ECMAScript 6 新增的一种数据结构，其实就是一种键值对的集合。Map 与 Object 的区别在于，Object 的 key 只能是字符串类型，而 Map 的 key 可以是任何数据类型。
Map 的优势在于可以快速获取一个键对应的值，而且对于排序和遍历等操作更加高效。因此，当需要存储键值对的时候，建议优先使用 Map。
如何使用 Map
创建 Map
创建 Map 可以使用构造函数或字面量的形式。
// 使用构造函数 const map = new Map() // 使用字面量 const map = new Map([['name', 'Lucy'], ['age', 18]])
添加元素
向 Map 中添加元素可以使用 set 方法。
const map = new Map()
map.set('name', 'Lucy')
map.set('age', 18)获取元素
获取 Map 中元素的方法有两种：get 和 has。
const map = new Map([['name', 'Lucy'], ['age', 18]])
console.log(map.get('name')) // 'Lucy'
console.log(map.has('age')) // true删除元素
删除 Map 中的元素可以使用 delete 方法。
const map = new Map([['name', 'Lucy'], ['age', 18]])
map.delete('name')
console.log(map.has('name')) // false清空 Map
清空 Map 中所有元素可以使用 clear 方法。
const map = new Map([['name', 'Lucy'], ['age', 18]]) map.clear() console.log(map.size) // 0
遍历 Map
Map 中元素的遍历有四种方式：keys、values、entries 和 forEach。
-- -------------------- ---- ------- ----- --- - --- ------------- -------- ------- ----- --- ---- --- -- ----------- - ---------------- -- ------ ----- - --- ---- ----- -- ------------- - ------------------ -- ------ -- - --- ------ ------ -- -------------- - ---------------- ------ -- ------ ------ ----- -- - --------------------------- ---- - ---------------- ------ -- ------ ------ ----- -- --
使用 Map 解决问题
统计字符串中的单词数量
在传统的方法中，需要定义一个对象，然后遍历字符串，对每个单词计数后存入对象中。
-- -------------------- ---- -------
--- --- - ------ ----- ----- -----
--- --- - --
--- --- - ----------- --
--- ---- - - -- - - ----------- ---- -
-- ------------- -
-------------
- ---- -
----------- - -
-
-
---------------- -- ------- -- ------ -- ----- --使用 Map 可以解决这个问题，代码更加简洁。
let str = 'hello world hello node'
let map = new Map()
let arr = str.split(' ')
for (let i = 0; i < arr.length; i++) {
let count = map.get(arr[i]) || 0
map.set(arr[i], count + 1)
}
console.log(map) // Map(3) {"hello" => 2, "world" => 1, "node" => 1}存储 JSON 对象
在传统的方法中，需要将 JSON 对象转换成字符串后存入 localStorage 中，读取后再转换成 JSON 对象。
let obj = {name: 'Lucy', age: 18}
localStorage.setItem('person', JSON.stringify(obj))
let objJson = JSON.parse(localStorage.getItem('person'))
console.log(objJson) // {name: "Lucy", age: 18}使用 Map 可以解决这个问题，代码更加简洁。
let obj = {name: 'Lucy', age: 18}
let map = new Map()
map.set('person', obj)
let objJson = map.get('person')
console.log(objJson) // {name: "Lucy", age: 18}总结
Map 是 ECMAScript 6 中新增的一种数据结构，键值对可以是任何数据类型。使用 Map 可以使得代码更加简洁高效，尤其在排序和遍历等操作时具有优势。在实际开发中，适当使用 Map 可以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b22ba048841e9894e769a2