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 使用时,原型对象的属性需要格外注意,避免造成混乱!
<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 | Object | |
---|---|---|
key | 可以使用任意类型的数据作为key | 只能使用字符串 |
遍历 | 可以确保遍历的顺序与插入的顺序一致 | 不能保证输出顺序 |