为什么使用 Map？

我们都知道其他编程语言中存在一种名为 Hashtable 的数据结构。它是一种存储键值对的数据结构，由于其 O(1) 的常数时间查找而非常出色。它是一种我们可以用来存储数据的优势数据结构。在 JavaScript 中，我们没有像 Hashtable 这样的内置数据结构。但我们可以使用对象来存储键值对。在 JavaScript 中它被称为 Map。

什么是 Map？

Map 是一个元素集合，其中每个元素都存储为键值对。Map 的键和值可以是任何值（对象和原始值）。Map 对象按照插入顺序迭代其元素——for...of 循环在每次迭代中返回一个 [键，值] 数组。

Map 存储键值对，其中键可以是任何数据类型。Map 具有一个表示 Map 大小的属性。Map 会记住键的原始插入顺序。

Map 方法和属性

方法	描述
new Map()	创建一个新的 Map 对象
set()	设置 Map 中键的值
get()	返回键的值
has()	返回一个布尔值，指示 Map 中是否存在键
delete()	从 Map 中删除一个键
clear()	从 Map 中删除所有键
values()	返回 Map 中值的迭代器对象
keys()	返回 Map 中键的迭代器对象
entries()	返回 Map 中键值对的迭代器对象
forEach()	为 Map 中的每个键值对执行提供的函数一次

属性	描述
size	返回 Map 中键值对的数量

Map 示例

const map = new Map()
map.set('name', 'John')
map.set('age', 30)
map.set('isMarried', true)
map.set('address', { city: 'New York', state: 'NY' })
map.set('hobbies', ['reading', 'writing', 'coding'])

console.log(map.get('name')) // John
console.log(map.get('age')) // 30
console.log(map.get('isMarried')) // true
console.log(map.get('address')) // {city: 'New York', state: 'NY'}
console.log(map.get('hobbies')) // ['reading', 'writing', 'coding']

console.log(map.size) // 5

Map 迭代

const map = new Map()
map.set('name', 'John')
map.set('age', 30)
map.set('isMarried', true)
map.set('address', { city: 'New York', state: 'NY' })
map.set('hobbies', ['reading', 'writing', 'coding'])

// 迭代键
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.forEach((value, key) => {
  console.log(key, value)
})

Map vs. Object

Map	Object
Map 是一个键控数据项的集合，就像 Object 一样。但主要区别在于 Map 允许任何类型的键。	Object 的键必须是字符串或符号。
Map 是可迭代的，可以轻松地循环遍历。	Object 不可迭代，不能轻松地循环遍历。
Map 有一个内置的 forEach 方法，所以不需要将其转换为数组。	Object 没有内置的 forEach 方法。
Map 有一个 size 属性，所以我们可以轻松地获得项目的数量。	Object 没有 size 属性。
Map 可以使用对象作为键。	Object 不能使用对象作为键。
通常情况下，Map 比 Object 速度更快。	通常情况下，Object 比 Map 速度更慢。

结论

在本文中，我们学习了 JavaScript 中的 Map。我们学习了 Map 的方法和属性。我们还了解了 Map 和 Object 之间的区别。希望您喜欢这篇文章。如果您有任何问题，请在下方留言。感谢您的阅读。

原文发布在：https://blog.imam.dev/blog/javascript-hashmap

参考

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

https://www.freecodecamp.org/news/what-is-a-javascript-map-what-are-the-differences-between-map-and-object-in-javascript/

https://www.geeksforgeeks.org/map-vs-object-javascript/