JavaScript Map 和 Object 区别
m0_67402341 人气:0在JavaScript中,Map
和 Object
看起来都是用键值对来存储数据,那么他们有什么不同呢?
不同点
Key filed
在 Object 中, key 必须是简单数据类型(整数,字符串或者是 symbol),而在 Map 中则可以是 JavaScript 支持的所有数据类型,也就是说可以用一个 Object 来当做一个Map元素的 key。
元素顺序
Map 元素的顺序遵循插入的顺序,而 Object 的则没有这一特性。
继承
Map 继承自 Object 对象。
新建实例
Object 支持以下几种方法来创建新的实例:
var obj = {...}; var obj = new Object(); var obj = Object.create(null);
Map 仅支持下面这一种构建方法:
var map = new Map([[1, 2], [2, 3]]); // map = {1 => 2, 2 => 3}
数据访问
Map 想要访问元素,可以使用 Map 本身的原生方法:
map.get(1) // 2
Object 可以通过 .
和 [ ]
来访问
obj.id; obj['id'];
判断某个元素是否在 Map 中可以使用
map.has(1);
判断某个元素是不是在 Object 中需要以下操作:
obj.id === undefined; // 或者 'id' in obj;
另外需要注意的一点是,Object 可以使用
Object.prototype.hasOwnProperty()
来判断某个key是否是这个对象本身的属性,从原型链继承的属性不包括在内。
新增一个数据
Map 可以使用 set() 操作:
map.set(key, value) // 当传入的 key 已经存在的时候,Map 会覆盖之前的值
Object 新增一个属性可以使用:
obj['key'] = value; obj.key = value; // object也会覆盖
删除数据
在 Object 中没有原生的删除方法,我们可以使用如下方式:
delete obj.id; // 下面这种做法效率更高 obj.id = undefined
需要注意的是,使用 delete 会真正的将属性从对象中删除,而使用赋值 undefined 的方式,仅仅是值变成了 undefined。属性仍然在对象上,也就意味着 在使用 for … in… 去遍历的时候,仍然会访问到该属性。
Map 有原生的 delete 方法来删除元素:
var isDeleteSucceeded = map.delete(1); console.log(isDeleteSucceeded ); // true // 全部删除 map.clear();
获取size
Map 自身有 size 属性,可以自己维持 size 的变化。
Object 则需要借助 Object.keys()
来计算
console.log(Object.keys(obj).length);
Iterating
Map 自身支持迭代,Object 不支持。
如何确定一个类型是不是支持迭代呢? 可以使用以下方法:
console.log(typeof obj[Symbol.iterator]); // undefined console.log(typeof map[Symbol.iterator]); // function
何时使用 Map ,何时使用 Object?
虽然Map 在很多时候优于 Object,但是作为 JavaScript 最基础的数据类型,还是有很多情景更适合使用 Object。
- 当所要存储的是简单数据类型,并且 key 都为字符串或者整数或者 Symbol 的时候,优先使用 Object ,因为Object可以使用 字符变量 的方式创建,更加高效。
- 当需要在单独的逻辑中访问属性或者元素的时候,应该使用 Object,例如:
var obj = { id: 1, name: “It's Me!”, print: function(){ return Object Id: ${this.id}, with Name: ${this.name}; } } console.log(obj.print());//Object Id: 1, with Name: It's Me. // 以上操作不能用 Map 实现
- JSON 直接支持 Object,但不支持 Map
- Map 是纯粹的 hash, 而 Object 还存在一些其他内在逻辑,所以在执行 delete 的时候会有性能问题。所以写入删除密集的情况应该使用 Map。
- Map 会按照插入顺序保持元素的顺序,而Object做不到。
- Map 在存储大量元素的时候性能表现更好,特别是在代码执行时不能确定 key 的类型的情况。
加载全部内容