JavaScript Map vs. Object

afishhhhh commented 5 years ago

1. 什么是 Map

Map 是一种存储键值对的数据集合类型，每一对键值对都能从唯一的键映射到对应的值，所以 Map 中不存在重复的键值对。

1.1 `new Map()`

Map 通过调用构造函数的方式来创建一个 Map 实例，以下代码创建了一个空 Map 实例，使用 set 方法关联键值对，使用 get 方法获取键对应的值。

const m = new Map()
m.set('key1', 'value1')
m.get('key1') // value1

该构造函数接受一个 [[key, value], ...] 形式的二维数组或者其他可迭代对象作为参数。

const m = new Map([
  [1, 'value1'], [2, 'value2'], [3, 'value3']
])
m.get(1) // value1
m.get(2) // value2
m.get(3) // value3

1.2 迭代 Map

可以使用 for..of 以及 forEach 来迭代 Map 实例

for (let [key, value] of map) { ... }
map.forEach((value, key) => { ... }

可以使用 typeof <obj>[Symbol.iterator] === 'function' 来判断是否为可迭代对象

1.3 Map 的键

Map 的键可以是任意的数据类型，在使用 set 方法取值的时候 Map 根据 === 的运算结果来判断应该取哪个值。但是有一个特例是 NaN，虽然 NaN !== NaN，但是对于 Map 来说，NaN 与其自身相等。

afishhhhh commented 5 years ago

2. 关于 Object

在 JavaScript 中，一个普通的 Object 也是一个类似 Map 的集合数据类型，遵循键值对存储的概念，每一个 property 都有一个唯一的值与其对应。 JavaScript 中所有的对象都继承自 Object，包括 Map。

afishhhhh commented 5 years ago

3. Object vs. Map

3.1 构造

Object 可以通过构造函数或者字面量来创建一个实例，Map 则只能通过 new Map 来创建一个实例。因为字面量构建的效率比构造函数更高，由此看来创建一个 Object 实例的效率比 Map 更胜一筹。

3.2 键

Map 的键可以是任意数据类型，而 Object 只能是 String 或者 Symbols。 虽然看上去 Object 可以接受一个 Number、Function 甚至 Object 作为属性名，但是实际上 JavaScript 会对 Object 的属性名做一次 toString()，所以属性名还是一个 String 类型。

const fn = function () {}
const o = {}
o[fn] = 'function'
o[fn] // function
o['function () {}'] // function

另外 Map 的键是有序的，能够保持键值对添加时的顺序，但 Object 是无序的。

3.3 操作元素

3.3.1 检查元素是否存在

Map

使用 has 方法检查元素是否存在

const m = new Map()
m.set(1, 'value1')
m.has(1) // true
m.has(2) // false

Object

使用 undefined 来判断是否存在该元素。如果 o 中的确存在一个 prop 属性，而且该属性值正好为 undefined，就会出现不一样的结果。
```
const o = {}
o.prop === undefined // true
o.prop = undefined
o.prop === undefined // true
```
使用 in 操作来判断。in 操作会沿着继承链寻找属性，当属性存在于继承链上，而不存在于对象自身时，in 操作也能得到 true 的结果。
```
const o = {}
'prop' in o // false
o.prop = 'someValue'
'prop' in o // true
```

const o = Object.create({ prop: 'someValue' }) 'prop' in o // true

- 使用 `hasOwnProperty()`。该方法只会在对象自身寻找是否存在某个属性。
```javascript
const o = {}
Object.prototype.hasOwnProperty.call(o, 'prop') // false

3.3.2 删除元素

Map

使用 delete() 来删除元素，如果 Map 实例中存在该键并且删除成功，返回 true，否则返回 false。
```
m.delete(key)
```
Object
使用 delete 来删除属性，只有当该属性是 non-configurable 的时候（configurable: false），返回 false，其他情况都返回 true，包括成功删除属性或者对象根本没有该属性。use strict 的时候尝试删除一个 non-configurable 属性会抛出异常。

afishhhhh commented 5 years ago

4. 什么时候使用 Map，什么时候使用 Object

如果仅仅需要一个简单的数据结构来存储数据，Object 可能是个更好的选择，毕竟字面量创建一个对象比构造函数创建一个 map 更高效，对象访问属性比 map 获取键值对更高效（？）。
Map 仅仅是一个哈希表，而 Object 有更多的内在逻辑，当需要频繁增删键值对的时候，Map 有更高的效率。
Map 在存储大型数据时表现更好，特别是当键名在运行时才确定，当所有键是相同类型所有值是相同类型

afishhhhh commented 5 years ago

参考

https://medium.com/front-end-hacking/es6-map-vs-object-what-and-when-b80621932373

afishhhhh / blog