别把对象当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] }"
1
2
3
4
5
6
7
8
9
10
11

原因很清楚，是由于 JavaScript 原型对象导致（constructor 是原型对象的属性，指向构造函数本身）；但，当做 Map 使用时，原型对象的属性需要格外注意，避免造成混乱！

只能字符串作为 key 的风险

<p id="first">p>
<p id="second">p>
1
2

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'	
1
2
3
4
5
6
7
8

这里map中值保留了secondElement的信息，且修改信息也会同步到secondElement上。

上述结果和我们预期的完全不一致，导致的原因就是：”只能字符串作为key“。当使用非字符串类型时，其值会被 toString 方法转换为字符串。

firstElement.toString() 	// '[object HTMLParagraphElement]'
secondElement.toString()	// '[object HTMLParagraphElement]'

map // {'[object HTMLParagraphElement]': {data: 'new data'}}
1
2
3
4

Map

关于 Map 的具体用法不再赘述

• https://tc39.es/ecma262/#sec-map-objects