存储键值对是我们在 JavaScript 中必须处理的常见问题。最基本的方法是使用对象：

const person = {}
person.name = 'Foo'
person.age = 20

// or
const person = {
  name: 'Foo',
  age: 20
}

从 ES6 引入的 Map 数据结构提供了相同的功能。上面的示例代码可以用 Map 重写，如下所示：

const person = new Map()
person.set('name', 'Foo')
person.set('age', 20)

区别

  • 对象仅接受字符串和 Symbol 键。其他类型将自动转换为字符串。另一方面，Map 接受任何类型的键。

  • 我们可以使用 forEach 或 for...of 直接迭代 map 的属性：

const styles = new Map()
styles.set('color', 'blue')
styles.set('fontSize', '12px')

styles.forEach((value, key) => console.log(key, '=', value))

// color = blue
// fontSize = 12px

对象不能直接进行迭代。为了循环对象的属性，我们必须使用 object.keys、object.values 或 object.entries 来接收键、值或键值对的列表。

const styles = {
  color: 'blue',
  fontSize: '12px'
}

Object.keys(styles).forEach(key => console.log(key, '=', styles[key]))

// color = blue
// fontSize = 12px

对象具有特殊属性，如 constructor、proto 等。

let person = {}
person['constructor'] // ƒ Object() { [native code] }

而 Map 仅包含我们定义的内容：

let person = new Map()
person.get('constructor') // undefined

JSON 支持 Object：

const person = {}
person.name = 'Foo'
person.age = 20

JSON.stringify(person) // "{"name":"Foo","age":20}"

使用 Map，当使用 JSON 序列化时，无法获取正确的数据：

const person = new Map()
person.set('name', 'Foo')
person.set('age', 20)

JSON.stringify(person) // "{}"

很高兴知道

map 保持项目的顺序。这意味着，当您在 map 的关键点上循环时，我们将看到与它们插入 map 时相同的顺序。

对于仅由 string 键和 symbol 键组成的对象也是如此。如果存在需要转换为 string 的键，则不会保留 object 键的顺序。

let codes = { A: 65, B: 66, C: 67, 0: 48 }
codes // {0: 0, A: 65, B: 66, C: 67}
Object.keys(codes) // ["0", "A", "B", "C"]

建议

如果我们想存储键/值对而不关心在 JSON 中序列化它们，那么就使用 map。通过循环获取 map 的大小比使用对象更舒适。

如果我们希望在原始数据和 JSON 之间来回转换，或者包含特定的业务逻辑，则应使用 Object：

const person = {
  firstName: 'Foo',
  lastName: 'Bar',
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

其他差异

对于对象，我们需要手动计算。而 map 有一个内置的 size 属性，可以用来跟踪键/值对的数量。

const obj = new Map()
obj.set('name', 'O.O')
obj.set('age', 18)

obj.size // 2

您可以查看如何在 JavaScript 中获取对象的长度，以了解获取对象长度的多种方式。

  • 清除对象需要手动操作，并且在某些情况下可能并不简单。map 通过使用 Map.prototype.clear() 解决这个问题。
  • 您可以使用 in 运算符或 Object.prototype.hasOwnProperty() 检查对象中是否存在给定键。map 使用 Map.prototype.has() 完成同样的事情。