本文由技术评估与在线 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