map与Object的区别

159 阅读1分钟

【相同点】

二者都是以key-value的形式对数据进行存储;

【不同点】

1.key的数据类型范围不同



Object:可以作为key的有:number,string,以及es6里面的symbol;

Map:js目前存在的数据类型均可以作为key;

2.key的顺序



Object: 如果对象的key中同时存在number string symbol 三种类型的时候,通过Object.keys得到的顺序是数字(升序) -> string(symbol)以创建的顺序;

Map: key以声明的顺序进行排序;

3.创建方式不同



Object:创建方式

const obj1 = new Object()

const obj2 = {}

const obj3 = Object.create({})

Map:创建方式:

const map = new Map();

4.key的调用方式不同



通过key取值:

Object:可通过 . 或 []

Map:只能用原生的get方法进行调用;

判断是否有某个属性

Object:'a' in obj;判断obj中是否有a这个属性;

Map:map.has('a');判断map中是否有a这个属性;

5.设置属性的方式不同



Object:

1.obj.a = 1;

2.obj['a'] = 1;

Map:js目前存在的数据类型均可以作为key;

1.map.set('a',1)

6.删除key的方式



Object: 自身没有删除属性的方法;一般删除对象属性的方式: delete obj.a

Map: map.delete('a') ----删除a属性;

map.clear() ----删除所有的属性;

7.获取size



Object: 通过Object.keys(obj) 返回一个数组,通过获取数组的长度来获取size;

Map: 自身带有size属性;map.size,size属性无法修改;

8.Iterating(迭代)



Object: 不可以

Map: 可以;



如何判断一个数据是否可以迭代的方式

typeof [][Symbol.iterator] //function

typeof new Map()[Symbol.iterator] //function

typeof {}[Symbol.iterator] //undefined

typeof 1[Symbol.iterator] //undefined

9.JSON操作



Object: 支持JSON.stringify和JSON.parse的操作;

Map: 不支持;

10.this不同



const f = function(){ console.log(this) }

Object:

const obj = {fn:f}

Map:

const map = new Map()

map.set('fn',f)



obj.fn() //指向obj

map.get('fn')() //取决于函数的调用者;\