Libon

Object vs Map and Array vs Set

12Mins #JavaScript
也许我们在日常开发里更应该用 Map/Set 来替代 Object/Array

ToC

语法的差异

也许在开始之前,我们可以先来看看这两者在 JavaScript 里语法上的差异:

1
// Object
2
3
// 初始化
4
const object = {}
5
// 添加属性
6
object.name = 'object'
7
// 删除属性
8
delete object.name
1
// Map
2
3
// 初始化
4
const map = new Map()
5
// 添加属性
6
map.set('name', 'map')
7
// 删除属性
8
map.delete('name')

性能测试

这两个达到的效果是差不多的,但他们在语法上却不一样,Map 的语法看上去更符合函数式开发的风格,而 Object 的语法看上去更像是命令式的代码。我们再来看看他们在相同操作下执行 100000 次的情况下的性能差异:

1
// Object 的执行代码
2
const object = {}
3
for(let i = 0; i < 100000; i++){
4
object.a = i;
5
delete object.a
6
}
7
8
// Map 的执行代码
9
const map = new Map()
10
for(let i = 0; i < 100000; i++){
3 collapsed lines
11
map.set('a', i)
12
map.delete('a')
13
}

除了这种测试方式之外,我还找到了另一种测试方式(example benchmark)。当然了,这种基准测试的结果是不可靠的,因为它们依赖于 JavaScript 引擎的实现,也同时和浏览器的版本有关系,客户端的机器配置也会影响到测试结果,所以我们只能用它们来做一个参考。也就是说,你完全可以不相信任何人的测试结果,因为在 MDN 上的 Map 一节中也有提到过 Map 在频繁增删键值对的场景下是有特殊优化的,而 Object 则没有。

MapObject
省略…省略…省略…
PerformancePerforms better in scenarios involving frequent additions and removals of key-value pairs.(在频繁增删键值对的场景下表现更好。)Not optimized for frequent additions and removals of key-value pairs.(在频繁添加和删除键值对的场景下未作出优化。)

当然如果是只有这一点微乎其微的性能,那可能很难说服你使用 Map,但接下来的内容可能可以改变你的想法。

内置键值对属性的问题

1
const obj = { toString: 'hello' }
2
3
const map = new Map([['toString', 'hello']])
4
5
console.log(obj.toString) // ?
6
console.log(map.toString) // ?

这里的 objmap 都有一个 toString 属性,但是它们的值是不一样的,objtoString 属性是一个字符串,而 maptoString 属性是一个函数,对于 obj 来讲,自行设置的 toString 会覆盖原型链上的属性,而 map 中设置的 toString 键却不会。我认为仅此一点就足以说明 Map 的优势了,因为 Map 中的键值对是不会被覆盖的,而 Object 中的键值对则会被覆盖。

迭代陷阱

在 JS 中迭代对象的时候,我们通常会使用 for...in 循环,但是这种方式有一个陷阱,就是它会遍历原型链上的属性,而 Map 中的 for...of 循环则不会遍历原型链上的属性,所以 Map 更加安全。

1
// 正常情况下你可能会这么做
2
for (const key in obj) {
3
console.log(key)
4
}
5
6
// 经验丰富一点的你可能会这么做
7
for (const key in obj) {
8
if (obj.hasOwnProperty(key)) {
9
console.log(key)
10
}
1 collapsed line
11
}

但这么做依然是有问题的,因为 hasOwnProperty 方法也是从原型链上继承来的,没人能保证 hasOwnProperty 方法不会被覆盖。所以你最终可能需要这么做:

1
for (const key in obj) {
2
if (Object.prototype.hasOwnProperty.call(obj, key)) {
3
console.log(key)
4
}
5
}

当然如果你不想这么麻烦,则可以完全放弃 for...in 循环,进而采用 Object.keysforEach

1
Object.keys(obj).forEach(key => {
2
console.log(key)
3
})

Map 就不存在这些问题,因为它的 for...of 循环不会遍历原型链上的属性,所以你可以放心的使用 for...of 循环来遍历 Map

1
for (const [key, value] of map) {
2
console.log(key, value)
3
}

键值对的顺序

在 JS 中,对象的键值对是无序的,但 Map 中的键值对是有序的,这意味着你可以通过 Map 来实现一个有序的对象。

1
const [
2
[key1, value1],
3
[key2, value2],
4
[key3, value3]
5
] = new Map([
6
['a', 1],
7
['b', 2],
8
['c', 3]
9
])
10
3 collapsed lines
11
console.log(key1, value1) // a 1
12
console.log(key2, value2) // b 2
13
console.log(key3, value3) // c 3

数据拷贝

在 JS 中,对象的拷贝是浅拷贝,而 Map 的拷贝是深拷贝,这意味着你可以通过 Map 来实现一个深拷贝的对象。

1
const copied = {...obj}
2
const copied = Object.assign({}, obj)

简简单单对吧,但其实 Map 也很容易实现拷贝功能:

1
const copied = new Map(map)

而之所以可以这么做,主要是因为 Map 的构造函数接收了一个可迭代的 [[key, value]] 元组,所以 Map 也可以接收一个 Map 实例,这样就可以实现深拷贝了。当然,Map 也是支持使用浏览器内置原生支持的 structuredClone 方法来实现深拷贝的,但因为兼容性的问题,所以这里就不展开了。语法如下:

1
const copied = structuredClone(map)
2
const copied = new Map(map, [structuredClone])

Map 和 Object 的相互转换

1
const obj = { a: 1, b: 2, c: 3 }
2
3
// Object to Map
4
const map = new Map(Object.entries(obj))
5
6
// Map to Object
7
const obj = Object.fromEntries(map)

在你理解了这种转换欢喜以后,你就可以用对象的形式来构造一个 Map 了:

1
// 原本你可能会这么做
2
const myMap = new Map([['key', 'value'], ['keyTwo', 'valueTwo']])
3
4
// 现在你可以这么做
5
const myMap = new Map(Object.entries({
6
key: 'value',
7
keyTwo: 'valueTwo'
8
}))
9
10
// 你还可以封装一个函数
6 collapsed lines
11
const makeMap = obj => new Map(Object.entries(obj))
12
13
const myMap = makeMap({
14
key: 'value',
15
keyTwo: 'valueTwo'
16
})

如果你需要使用 TypeScript,那你可以这么做:

1
const makeMap = <Value = unknown>(obj: Record<string, Value>) => new Map<string, Value>(Object.entries(obj))
2
3
const myMap = makeMap({ key: 'value' }) // => Map<string, string>

键名的类型

在 JS 中,对象的键名只能是字符串或者 Symbol,而 Map 的键名可以是任意值,这意味着你可以使用 Map 来实现一个类似于 WeakMap 的功能,但是 Map 可以使用任意值作为键名,而 WeakMap 只能使用对象作为键名。

1
const map = new Map()
2
const key = {}
3
map.set(key, 'value')
4
console.log(map.get(key)) // value

这适用于想将数据扁平化从而建立一种数据联结的场景,你可以以整个对象作为键名,同时将对象的某个属性作为键值,这样你就既可以使用对象来获取键值,也可以使用键值来获取对象了。

Map 的其他属性

当然,Map 上还有很多有用的属性:

Set

当我们讨论 Map 时,我们也可以讨论一下 Set,因为它们是一对好基友,它们的功能也是相似的,但是 Set 只有键名,没有键值,所以 Set 中的键名和键值是相同的。

1
const set = new Set([1, 2, 3])
2
3
set.add(3)
4
set.delete(4)
5
set.has(5)

在某些情况下,Set 可以完全替代 Array 做一些等效操作,且拥有 更好的性能。当然这种结果可能并不准确,所以你可以自己测试一下。同样的,我们可以使用 WeakSet 来帮我们解决内存泄漏的问题。

1
const checkedTodos = new Set([todo1, todo2, todo3])

序列化

MapSet 都是可序列化的,这意味着你可以使用 JSON.stringify 来序列化它们,但是你需要注意的是,MapSet 中的键名和键值都必须是可序列化的,否则就会抛出错误。但是你有没有注意到,如果你想要打印出带有缩进格式或者其他任意风格的 JSON 时,你总是需要添加一个 null 作为参数,而这个 null 被称之为替换器。如果你想要使用替换器,你可以使用 JSON.stringify 的第二个参数来指定替换器,或者使用第三个参数来指定缩进空格的数量。这两个参数都是可选的,但是如果你想要使用第三个参数,你就必须使用第二个参数来指定替换器,即使你不需要使用替换器。

1
JSON.stringify(obj, null, 2)

我们可以写一个转换器来解析 Map 和 Set,这样我们就可以使用 JSON.stringify 来序列化它们了,同时增加一个特殊属性来标识它们的类型。

1
function replacer(key, value) {
2
if (value instanceof Map) {
3
return { __type: 'Map', value: Object.fromEntries(value) }
4
}
5
if (value instanceof Set) {
6
return { __type: 'Set', value: Array.from(value) }
7
}
8
return value
9
}
10
14 collapsed lines
11
function reviver(key, value) {
12
if (value?.__type === 'Set') {
13
return new Set(value.value)
14
}
15
if (value?.__type === 'Map') {
16
return new Map(Object.entries(value.value))
17
}
18
return value
19
}
20
21
const obj = { set: new Set([1, 2]), map: new Map([['key', 'value']]) }
22
const str = JSON.stringify(obj, replacer)
23
const newObj = JSON.parse(str, reviver)
24
// { set: new Set([1, 2]), map: new Map([['key', 'value']]) }

什么时候该用哪个

最后,我们再来讨论一下,在什么时候、什么场景该用哪一个。

以上。


  1. When You Should Prefer Map Over Object In JavaScript
  2. What’s up with monomorphism?

CD ..
回顾上一篇
JSON.stringify