一文吃透 JavaScript 中 Object 和 Map 的区别

本文由技术评估与在线 Coding 面试平台 ShowMeBug 技术团队翻译。

在 JavaScript 中，Object 和 Map 都是键值对的动态集合。虽然两者的定义差不多，但区别也不少。下面跟我一起来看看吧～

1.构造方式不同

在 JavaScript 中创建 Object 最简单的方法是通过字面量。

const smbObj = {
  1: 'ShowMeBug',
  2: 'ShowMeMoney'  
};

Map 则是通过内置构造函数 Map 创建。

const smbMap = new Map([
  [1, 'ShowMeBug'],
  [2, 'ShowMeMoney']
]);

接下来，我会用“对象”或“对象映射”来表示通过字面量创建的键值集合，用“映射”来表示通过内置构造函数 Map 创建的映射。

2.对象中的键是字符串，映射中的键可以是任意类型

Object 是键值对的集合，但键只能是字符串。而 Map 的键可以是任意类型。

比如，如果用数字作 Object 的键，则该数字将转换为字符串。

因为键已经被转换成字符串，所以无论我们是获取数字 1 还是字符串 '1' 的值时，得到的结果都一样。

console.log(smbObj[1]);
//'ShowMeBug'
console.log(smbObj['1']);
//'ShowMeBug'

而 Map 的键可以为任意类型，数字 1 的键和字符串 '1' 的键并不一样。

console.log(smbMap[1]);
//'ShowMeBug'
console.log(smbMap['1']);
//undefined

无论是对象还是映射，键都是唯一的。对象中不能有两个相同键的属性，映射中也不能有两个相同键的条目。

3.对象会从原型中继承多余的键

另一个区别是，使用字面量创建的 Object 会继承一组来自 Object.prototype 的键值对。

打印 Object.prototype，你会发现它还有 hasOwnProperty、isPrototypeOf、toLocaleString、toString 等属性。

console.log(Object.prototype);

通过字面量创建的 Object 也会有这些属性。空对象 {} 并不是真的为空。可以看看下列代码。

const socalledEmptyObject = {};
console.log(socalledEmptyObject['toString']);
//ƒ toString() { [native code] }

我们创建了一个所谓的“空”对象，却能够访问其上的 toString 键。创建对象映射最好是用 Object.create(null) 来做。

const emptyObject = Object.create(null);
console.log(emptyObject['toString']);
//undefined

Object.create(null) 能构建出没有原型的对象。

4.Map 会保留键的顺序，对象不会

键值对的原始顺序会在 Map 中得到保留，而在对象中则不会。

const smbObj = {
  2: 'ShowMeMoney',
  1: 'ShowMeBug'  
};

const keys = Object.keys(smbObj);
console.log(keys);
//["1", "2"]

const keyValuePairs = Object.entries(smbObj);
console.log(keyValuePairs);
//["1", "ShowMeBug"]
//["2", "ShowMeMoney"]

注意，创建对象时，键 2 出现在键 1 之前。但在检索所有键时，2 在 1 后面。

下面用 Map 构造函数创建一个类似的集合。这一次键的初始顺序得到了保留。

const smbMap = new Map([
  [2, 'ShowMeMoney'],
  [1, 'ShowMeBug']
]);

const keys = smbMap.keys();
console.log(keys);
//MapIterator {2, 1}

const keyValuePairs = smbMap.entries();
console.log(keyValuePairs);
//MapIterator {2 => "ShowMeMoney", 1 => "ShowMeBug"}

5.Map 提供了更好的接口来访问键值对

获取

访问对象上的属性可以通过点运算符或方括号运算符来完成。在本文的例子中，因为键用的是数字，所以只能用方括号运算符。

smbObj[1];
//'ShowMeBug'

而在 Map 上，则需要用 get(key) 方法来获取值。

smbMap.get(1);
//'ShowMeBug'

检查键是否存在

Map 可以用 has(key) 来检查键是否存在。

smbMap.has(1);
//true
smbMap.get(3);
//false

对象则可以用 hasOwnProperty(key) 方法。

smbObj.hasOwnProperty(1);
//true
smbObj.hasOwnProperty(3);
//false

添加键值对

用 set(key, value) 在 Map 中添加新的键值对。

smbMap.set(3, 'ShowMeFeature'); 
//{1=>'ShowMeBug', 2=>'ShowMeMoney', 3=>'ShowMeFeature'}

而对于对象，我们使用方括号或点运算符来添加新的键值对。

smbObj[3] = 'ShowMeFeature';
//{ 1: 'ShowMeBug', 2: 'ShowMeMoney', 3: 'ShowMeFeature'};

删除键值对

Map 可以通过 delete(key) 方法来删除键值对。

smbMap.delete(1);

对象则可以用 delete 操作符。

delete smbObj[1];

读取键值对数量

Map 有 size 属性来记录内部的键值对数量。

console.log(smbMap.size);

对象没有获取键值对数量的特定方法。我们需要使用像 Object.keys() 这样的外部帮助函数。

const size = Object.keys(smbObj).length;
console.log(size);

6.对象需要帮助函数来访问键值对

我们可以用 forEach 方法遍历 Map 中的条目。

const smbMap = new Map([
  [1, 'ShowMeBug'],
  [2, 'ShowMeMoney']
]);



smbMap.forEach((value, key)=>{
   console.log(`${key} - ${value}`)
});
//1 - ShowMeBug
//2 - ShowMeMoney

至于对象，我们可以用 Object.entries() 辅助函数进行迭代。

Object.entries() 会以 [key, value] 键值对数组的形式返回对象的所有属性。一旦拿到这一数组，就能用 forEach 这样的数组方法了。

const smbObj = {
  1: 'ShowMeBug',
  2: 'ShowMeMoney'  
};

Object
  .entries(smbObj)
  .forEach(([key, value])=>{
    console.log(`${key} - ${value}`)
  });
//1 - ShowMeBug
//2 - ShowMeMoney

7.JSON支持对象，但不支持 Map

const smbObj = {
  1: 'ShowMeBug',
  2: 'ShowMeMoney'  
};

const json = JSON.stringify(smbObj);
console.log(json);
//{"1":"ShowMeBug","2":"ShowMeMoney"}

JSON 不支持 Map，序列化的结果是一个空对象。

const smbMap = new Map([
  [1, 'ShowMeBug'],
  [2, 'ShowMeMoney']
]);

const json = JSON.stringify(smbMap);
console.log(json);
//{}

总结

JavaScript 中的对象在其他语言中被称为哈希映射。访问映射对象中的键所需时间为 O(1)，这意味着获取键所需的时间为常量，而不管对象映射中的数据量如何。

不管这些键值集合是用 Map 构造函数还是对象字面量创建的，它们都主要用于快速搜索数据，键的访问时间都是 O(1)，检索键也不需要扫描所有数据。

Map 为管理键值对提供了更好的接口。在需要添加和删除条目的场景中，Map 是更好的选择。而如果创建键值集合只是用来搜索键时，对象就够了。

原文链接：7 Differences between Objects and Maps in JavaScript