【JS】Object和Map的区别(图文详解)

Object和Map

Object和Map两者的比较

Object：Object是最常用的一种引用类型数据，可用于存储键值对的集合，在ECMAScript 1st中添加

Map：Map是键值对的集合，采用Hash结构存储，在ES6中新增

共同点

共同点：键值对的动态集合，支持增加和删除键值对

Object：

const obj = {	//定义
	a:1,
	b:2
}
obj.c = 3;  	//添加键值对
delete obj.c; 	//删除键值对

Map：

const map = new Map()	//定义
map.set('a',1);			//添加键值对
map.set('b',2);
map.delete('a');  		//删除键值对

不同点

1、构造方式

Object

1、
const obj = {
    a:1,
	b:2
}
2、
const a = new Object()
3、
const a = Object.create()

Map

1、
const m = new MAp()
2、
const m = new MAp([
	['a','1'],
	['b','2'],
])

2、键的类型

Object

键类型必须是String或者Symbol，如果非String类型，会进行数据类型转换

Map

键类型可以是任意类型，包括对象，数组，函数等，不会进行类型转换

在添加键值对是，通过严格相等（===）来判断键属性是否已经存在

3、键的顺序

Object

key是无序的，不会按照添加的顺序返回

1、对于大于等于0的整数，会按照添加的顺序返回；对于小数和负数会当作字符串处理

2、对于String类型，按照定义的顺序进行输出，并且数字优于字符串

3、对于Symbol类型，会直接过滤，不会进行输出

如果想要输出，可以通过**Object.getOwnPropertySymbols()**方法

Map

key是有序的，按照插入的顺序进行返回

4、键值对大小

Object

只能手动计算，通过Object.keys()方法或者for…in循环统计

Map

直接通过size属性访问

5、键值对访问

Object

Map

6、迭代器

Object：本身并不具备lterator特性，默认情况下不能使用for…of进行遍历

Map：MAp结构的keys(),values(),entries()方法返回值都具有lterator特性

7、JSON序列化

Object类型可以通过**JSON.stringify()**进行序列化操作

Map结构不能直接进行JSON序列化，但是可以通过Array.from()来将map转换成数组，然后通过**JSON.stringify()**进行序列化操作

Object和Map适用场景

Object

1、仅做数据存储，并且属性仅为字符串或者Symbol

2、需要进行序列化转换为json传输

3、当作一个对象的实例，需要保留自己的属性和方法

Map

1、会频繁更新或删除键值对

2、存储大量的数据，尤其是key类型未知的情况下

3、需要频繁的进行迭代处理