本文首发于微信公众号:大迁世界, 我的微信:qq449245884,我会第一时间和你分享前端行业趋势,学习途径等等。 更多开源作品请看 GitHub github.com/qq449245884… ,包含一线大厂面试完整考点、资料以及我的系列文章。
在 JavaScript 中,对象是很方便的。它们允许我们轻松地将多个数据块组合在一起。 在ES6之后,又出了一个新的语言补充– Map。在很多方面,它看起来像是一个功能更强的对象,但接口却有些笨拙。
然而,大多数开发者在需要 hash map 的时候还是会使用对象,只有当他们意识到键值不能只是字符串的时候才会转而使用 Map。因此,Map 在当今的 JavaScript 社区中仍然没有得到充分的使用。
在本文本中,我会列举一些应该更多考虑使用 Map 的一些原因。
为什么对象不符合 Hash Map 的使用情况
在 Hash Map 中使用对象最明显的缺点是,对象只允许键是字符串和 symbol。任何其他类型的键都会通过 toString
方法被隐含地转换为字符串。
const foo = []
const bar = {}
const obj = {[foo]: 'foo', [bar]: 'bar'}
console.log(obj) // {"": 'foo', [object Object]: 'bar'}
更重要的是,使用对象做 Hash Map 会造成混乱和安全隐患。
不必要的继承
在ES6之前,获得 hash map 的唯一方法是创建一个空对象:
const hashMap = {}
然而,在创建时,这个对象不再是空的。尽管 hashMap
是用一个空的对象字面量创建的,但它自动继承了 Object.prototype
。这就是为什么我们可以在 hashMap
上调用hasOwnProperty
、toString
、constructor
等方法,尽管我们从未在该对象上明确定义这些方法。
由于原型继承,我们现在有两种类型的属性被混淆了:存在于对象本身的属性,即它自己的属性,以及存在于原型链的属性,即继承的属性。
因此,我们需要一个额外的检查(例如hasOwnProperty
)来确保一个给定的属性确实是用户提供的,而不是从原型继承的。
除此之外,由于属性解析机制在 JavaScrip t中的工作方式,在运行时对 Object.prototype
的任何改变都会在所有对象中引起连锁反应。这就为原型污染攻击打开了大门,这对大型的JavaScript 应用程序来说是一个严重的安全问题。
不过,我们可以通过使用 Object.create(null)
来解决这个问题,它可以生成一个不继承Object.prototype
的对象。
名称冲突
当一个对象自己的属性与它的原型上的属性有名称冲突时,它就会打破预期,从而使程序崩溃。
例如,我们有一个函数 foo
,它接受一个对象。
function foo(obj) {
//...
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
}
}
}
obj.hasOwnProperty(key)
有一个可靠性风险:考虑到属性解析机制在JavaScript中的工作方式,如果 obj
包含一个开发者提供的具有相同名称的 hasOwnProperty
属性,那就会对Object.prototype.hasOwnProperty
产生影响。因此,我们不知道哪个方法会在运行时被准确调用。
可以做一些防御性编程来防止这种情况。例如,我们可以从 Object.prototype
中 “借用””真正的 hasOwnProperty
来代替:
function foo(obj) {
//...
for (const key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
// ...
}
}
}
还有一个更简短的方法就是在一个对象的字面量上调用该方法,如{}.hasOwnProperty.call(key)
,不过这也挺麻烦的。这就是为什么还会新出一个静态方法Object.hasOwn
的原因了。
次优的人机工程学
Object
没有提供足够的人机工程学,不能作为 hash map 使用,许多常见的任务不能直观地执行。
size
Object
并没有提供方便的API来获取 size
,即属性的数量。而且,对于什么是一个对象的 size ,还有一些细微的差别:
-
如果只关心字符串、可枚举的键,那么可以用
Object.keys()
将键转换为数组,并获得其length -
如果k只想要不可枚举的字符串键,那么必须得使用
Object.getOwnPropertyNames
来获得一个键的列表并获得其 length -
如果只对 symbol 键感兴趣,可以使用
getOwnPropertySymbols
来显示 symbol 键。或者可以使用Reflect.ownKeys
来一次获得字符串键和 symbol 键,不管它是否是可枚举的。
上述所有选项的运行时复杂度为O(n),因为我们必须先构造一个键的数组,然后才能得到其长度。
iterate
循环遍历对象也有类似的复杂性
我们可以使用 for...in
循环。但它会读取到继承的可枚举属性。
Object.prototype.foo = 'bar'
const obj = {id: 1}
for (const key in obj) {
console.log(key) // 'id', 'foo'
}
我们不能对一个对象使用 for ... of
,因为默认情况下它不是一个可迭代的对象,除非我们明确定义 Symbol.iterator
方法在它上面。
我们可以使用 Object.keys
、Object.values
和 Object.entry
来获得一个可枚举的字符串键(或/和值)的列表,并通过该列表进行迭代,这引入了一个额外的开销步骤。
还有一个是 插入对象的键的顺序并不是按我们的顺序来的,这是一个很蛋疼的地方。在大多数浏览器中,整数键是按升序排序的,并优先于字符串键,即使字符串键是在整数键之前插入的:
const obj = {}
obj.foo = 'first'
obj[2] = 'second'
obj[1] = 'last'
console.log(obj) // {1: 'last', 2: 'second', foo: 'first'}
clear
没有简单的方法来删除一个对象的所有属性,我们必须用 delete
操作符一个一个地删除每个属性,这在历史上是众所周知的慢。
检查属性是否存在
最后,我们不能依靠点/括号符号来检查一个属性的存在,因为值本身可能被设置为 undefined
。相反,得使用 Object.prototype.hasOwnProperty
或 Object.hasOwn
。
const obj = {a: undefined}
Object.hasOwn(obj, 'a') // true
Map
ES6 为我们带来了 Map,首先,与只允许键值为字符串和 symbols 的 Object 不同,Map 支持任何数据类型的键。
但更重要的是,Map 在用户定义的和内置的程序数据之间提供了一个干净的分离,代价是需要一个额外的 Map.prototype.get
来获取对应的项。
Map 也提供了更好的人机工程学。Map 默认是一个可迭代的对象。这说明可以用 for ... of
轻松地迭代一个 Map,并做一些事情,比如使用嵌套的解构来从 Map 中取出第一个项。
const [[firstKey, firstValue]] = map
与 Object 相比,Map 为各种常见任务提供了专门的API:
-
Map.prototype.has
检查一个给定的项是否存在,与必须在对象上使用Object.prototype.hasOwnProperty/Object.hasOwn
相比,不那么尴尬了。 -
Map.prototype.get 返回与提供的键相关的值。有的可能会觉得这比对象上的点符号或括号符号更笨重。不过,它提供了一个干净的用户数据和内置方法之间的分离。
-
Map.prototype.size
返回 Map 中的项的个数,与获取对象大小的操作相比,这明显好太多了。此外,它的速度也更快。 -
Map.prototype.clear
可以删除 Map 中的所有项,它比 delete 操作符快得多。
性能差异
在 JavaScript 社区中,似乎有一个共同的信念,即在大多数情况下,Map
要比 Object
快。有些人声称通过从 Object 切换到 Map 可以看到明显的性能提升。
我在 LeetCode 上也证实了这种想法,对于数据量大的 Object 会超时,但 Map 上则不会。
然而,说 “Map 比 Object 快” 可能是算一种归纳性的,这两者一定有一些细微的差别,我们可以通过一些例子,把它找出来。
测试
测试用例有一个表格,主要测试 Object 和 Map 在插入、迭代和删除数据的速度。
插入和迭代的性能是以每秒的操作来衡量的。这里使用了一个实用函数 measureFor
,它重复运行目标函数,直到达到指定的最小时间阈值(即用户界面上的 duration
输入字段)。它返回这样一个函数每秒钟被执行的平均次数。
function measureFor(f, duration) {
let iterations = 0;
const now = performance.now();
let elapsed = 0;
while (elapsed < duration) {
f();
elapsed = performance.now() - now;
iterations++;
}
return ((iterations / elapsed) * 1000).toFixed(4);
}
至于删除,只是要测量使用 delete
操作符从一个对象中删除所有属性所需的时间,并与相同大小的 Map 使用 Map.prototype.delete
的时间进行比较。也可以使用Map.prototype.clear
,但这有悖于基准测试的目的,因为我知道它肯定会快得多。
在这三种操作中,我更关注插入操作,因为它往往是我在日常工作中最常执行的操作。对于迭代性能,很难有一个全面的基准,因为我们可以对一个给定的对象执行许多不同的迭代变体。这里我只测量 for ... in
循环。
在这里使用了三种类型的 key。
- 字符串,例如:Yekwl7caqejth7aawelo4。
- 整数字符串,例如:123
- 由
Math.random().toString()
生成的数字字符串,例如:0.4024025689756525。
所有的键都是随机生成的,所以我们不会碰到V8实现的内联缓存。我还在将整数和数字键添加到对象之前,使用 toString
明确地将其转换为字符串,以避免隐式转换的开销。
最后,在基准测试开始之前,还有一个至少100ms的热身阶段,在这个阶段,我们反复创建新的对象和 Map,并立即丢弃。
如果你也想玩,代码已经放在 CodeSandbox 上。
我从大小为 100 个属性/项的 Object
和 Map
开始,一直到 5000000,并让每种类型的操作持续运行 10000ms,看看它们之间的表现如何。下面是测试结果:
string keys
一般来说,当键为(非数字)字符串时,Map
在所有操作上都优于 Object
。
但细微之处在于,当数量并不真正多时(低于100000
),Map 在插入速度上 是Object 的两倍,但当规模超过 100000
时,性能差距开始缩小。
上图显示了随着条目数的增加(x轴),插入率如何下降(y轴)。然而,由于X轴扩展得太宽(从100 到 1000000),很难分辨这两条线之间的差距。
然后用对数比例来处理数据,做出了下面的图表。
可以清楚地看出这两条线正在重合。
这里又做了一张图,画出了在插入速度上 Map 比 Object 快多少。你可以看到 Map 开始时比 Object 快 2 倍左右。然后随着时间的推移,性能差距开始缩小。最终,当大小增长到 5000000时
,Map 只快了 30%。
虽然我们中的大多数人永远不会在一个 Object 或 Map 中拥有超过1 00 万的条数据。对于几百或几千个数据的规模,Map 的性能至少是 Object 的两倍。因此,我们是否应该就此打住,并开始重构我们的代码库,全部采用 Map?
这不太靠谱……或者至少不能期望我们的应用程序变得快 2 倍。记住我们还没有探索其他类型的键。下面我们看一下整数键。
integer keys
我之所以特别想在有整数键的对象上运行基准,是因为V8在内部优化了整数索引的属性,并将它们存储在一个单独的数组中,可以线性和连续地访问。但我找不到任何资源来证实它对 Map 也采用了同样的优化方式。
我们首先尝试在 [0, 1000]
范围内的整数键。
如我所料,Object 这次的表现超过了 Map。它们的插入速度比 Map 快65%
,迭代速度快16%
。
接着, 扩大范围,使键中的最大整数为 1200。
似乎现在 Map 的插入速度开始比 Object 快一点,迭代速度快 5 倍。
现在,我们只增加了整数键的范围,而不是 Object 和 Map 的实际大小。让我们加大 size,看看这对性能有什么影响。
当属性 size 为 1000 时,Object 最终比 Map 的插入速度快 70%,迭代速度慢2倍。
我玩了一堆 Object/Map
size 和整数键范围的不同组合,但没有想出一个明确的模式。但我看到的总体趋势是,随着 size 的增长,以一些相对较小的整数作为键值,Object
在插入方面比Map
更有性能,在删除方面总是大致相同,迭代速度慢4或5倍。
Object 在插入时开始变慢的最大整数键的阈值会随着 Object 的大小而增长。例如,当对象只有100个条数据,阈值是1200;当它有 10000 个条目时,阈值似乎是 24000 左右。
numeric keys
最后,让我们来看看最后一种类型的按键–数字键。
从技术上讲,之前的整数键也是数字键。这里的数字键特指由 Math.random().toString()
生成的数字字符串。
结果与那些字符串键的情况类似。Map 开始时比 Object 快得多(插入和删除快2倍,迭代快4-5倍),但随着我们规模的增加,差距也越来越小。
内存使用情况
基准测试的另一个重要方面是内存利用率.
由于我无法控制浏览器环境中的垃圾收集器,这里决定在 Node 中运行基准测试。
这里创建了一个小脚本来测量它们各自的内存使用情况,并在每次测量中手动触发了完全的垃圾收集。用 node --expose-gc
运行它,就得到了以下结果。
{
object: {
'string-key': {
'10000': 3.390625,
'50000': 19.765625,
'100000': 16.265625,
'500000': 71.265625,
'1000000': 142.015625
},
'numeric-key': {
'10000': 1.65625,
'50000': 8.265625,
'100000': 16.765625,
'500000': 72.265625,
'1000000': 143.515625
},
'integer-key': {
'10000': 0.25,
'50000': 2.828125,
'100000': 4.90625,
'500000': 25.734375,
'1000000': 59.203125
}
},
map: {
'string-key': {
'10000': 1.703125,
'50000': 6.765625,
'100000': 14.015625,
'500000': 61.765625,
'1000000': 122.015625
},
'numeric-key': {
'10000': 0.703125,
'50000': 3.765625,
'100000': 7.265625,
'500000': 33.265625,
'1000000': 67.015625
},
'integer-key': {
'10000': 0.484375,
'50000': 1.890625,
'100000': 3.765625,
'500000': 22.515625,
'1000000': 43.515625
}
}
}
很明显,Map 比 Object 消耗的内存少20%到50%,这并不奇怪,因为 Map 不像 Object 那样存储属性描述符,比如 writable
/enumerable
/configurable
。
总结
那么,我们能从这一切中得到什么呢?
-
Map 比 Object 快,除非有小的整数、数组索引的键,而且它更节省内存。
-
如果你需要一个频繁更新的 hash map,请使用 Map;如果你想一个固定的键值集合(即记录),请使用Object,并注意原型继承带来的陷阱。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
交流
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub github.com/qq449245884… 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
今天的文章在 JavaScript 中,什么时候使用 Map 或胜过 Object分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/14217.html