JS中 Object 与 Map 的区别

概述

• 在很多时候，我们都把Object当成Map来使用，例如

• 使用Object

let dict = {
	'hello': '你好',
	'world': '世界'
}

console.log(dict['hello'], dict['world'])
// 你好 世界

• 使用Map

let dict = new Map([
	['hello', '你好'],
	['world', '世界']
])

console.log(dict.get('hello'), dict.get('world'))
// 你好 世界

• 从功能上看，它们都可以维护键值对的映射关系，并且完成同样的任务。
• 本文总结它们的不同之处。

键的类型不同

---

Object

• Object 只能使用字符串类型（现在还有Symbol）的值作为键，如下

let key = {k: 'v'}

let obj = {}
obj[key] = 'value'

obj[key]	// "value"
obj[key.toString()]	// "value"
obj["[object Object]"]	// "value"

let fn = ()=>{}
dict[fn] = 'function'

dict[()=>{}]	// "function"
dict[(()=>{}).toString()]	// "function"
dict["()=>{}"]	// "function"


obj[123] = 123
obj['123']	// 123

• 可以看到，不管我们传入什么类型的键，最终都会被转换成字符串类型，具体来说就是会先对键调用toString()方法，再用其返回值作为最终的键

• 注：Symbol类型例外

let dict = {}

dict[Symbol(123)] = 123
dict[Symbol(123)] = 234

Map

• Map 可以使用任意类型的值作为键，如下

let dict = new Map()

let x = {}
let y = {}
let z = ()=>{}
let a = ()=>{}

dict.set(x, 'objx')
dict.set(y, 'objy')
dict.set(z, 'fnz')
dict.set(a, 'fna')

• 使用Map时，用引用类型的值作为键，并没有像Object那样，将其转换为字符串再作为键，而是直接作为键使用

遍历方式不一样

---

Object

• Object 可以通过 Object.keys、Object.value、Object.entries、for...in等遍历拿到键或者值，如下

let dict = {
	'hello': '你好',
	'world': '世界'
}
Object.keys(dict)
Object.values(dict)
Object.entries(dict)

for (let k in dict) {
    console.log(k)
}

Map

• Map可以通过 this.keys、this.values、this.entries、for...of等遍历拿到键或者值，如下

let dict = new Map([
	['hello', '你好'],
	['world', '世界']
])
dict.keys()
dict.values()
dict.entries()

for (let entry of dict) {
    console.log(entry)
}

• 注意，Object使用前三个方法，得到的返回值是数组对象，而Map使用前三个方法得到的返回值是迭代器对象

Map的常用方法

---

• Map相比于Object，是以字典的身份出道的，那么它就存在一些字典特有的方法，如下图
  
• 依次演示一下

let dict = new Map([
	['hello', '你好'],
	['world', '世界']
])