别把对象当Map

Posted 2022-11-10 奋飛

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