别把对象当Map
Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想。
使用 JavaScript 开发过程中，我们经常会借助对象 Object 来存储数据，从某种意义上，其作用类似 Map，均为 key: value 键值对的方式存储。
那二者又有啥区别的？（YY：一定有，否则 Map 的存在就没有意义了）
结论：JavaScript 中的对象是糟糕的 Map，只能使用字符串类型作为 key，并且存在访问原型属性的风险。因此，使用内置的 Map 集合！！！
访问原型属性的风险
const dictionary = {
zh: {
name: '姓名'
},
en: {
name: 'Name'
}
}
typeof dictionary.zh['constructor'] === 'undefined' // false
// "ƒ Object() { [native code] }"原因很清楚，是由于 JavaScript 原型对象导致（constructor 是原型对象的属性，指向构造函数本身）；但，当做 Map 使用时，原型对象的属性需要格外注意，避免造成混乱！
只能字符串作为 key 的风险
<p id="first">p>
<p id="second">p>const map = {}
const firstElement = document.querySelector('#first')
const secondElement = document.querySelector('#second')
map[firstElement] = {data: 'first element'}
map[secondElement] = {data: 'second element'}
map[firstElement].data = 'new data' 这里map中值保留了secondElement的信息，且修改信息也会同步到secondElement上。
上述结果和我们预期的完全不一致，导致的原因就是：”只能字符串作为key“。当使用非字符串类型时，其值会被 toString 方法转换为字符串。
firstElement.toString() // '[object HTMLParagraphElement]'
secondElement.toString() // '[object HTMLParagraphElement]'
map // {'[object HTMLParagraphElement]': {data: 'new data'}}Map
关于 Map 的具体用法不再赘述
Map | Object | |
|---|---|---|
key | 可以使用任意类型的数据作为key | 只能使用字符串 |
遍历 | 可以确保遍历的顺序与插入的顺序一致 | 不能保证输出顺序 |
- https://tc39.es/ecma262/#sec-map-objects
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-07-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录