前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >分享 Map 对象和普通对象的 7 个区别

分享 Map 对象和普通对象的 7 个区别

作者头像
前端达人
发布2022-06-09 20:03:24
1.2K0
发布2022-06-09 20:03:24
举报
文章被收录于专栏:前端达人

来源 | https://levelup.gitconnected.com/7-differences-between-map-objects-and-plain-objects-9690a78fbc06

在 JavaScript 中,普通对象和 ES6 的新对象 Map 都可以存储键值对,但是,它们之间有什么区别呢?本文将为您一一揭晓。

1、初始化与使用

普通对象可以直接使用字面量进行初始化,而 Map 需要 Map() 构造函数进行初始化,如果想要有初始值,则需要传递一个数组或其他元素为键值对的可迭代对象。这些键值对中的每一个都将被添加到一个新的 Map 中。

代码语言:javascript
复制
const obj = {
  name: 1,
  age: 2,
};
const map = new Map([
  ['name', 1],
  ['age', 2],
]);

与普通对象相比,Map 作为哈希表提供了许多有用的功能。比如判断一个key是否在hash表中,在map中可以使用has方法轻松判断,但是在普通对象中可能会增加复杂度。

另外,set方法可以为Map设置key值,get方法可以获取value,size属性可以返回当前Map中key/value对的数量,而plain对象需要手动计算使用 自己的方法等。详情见MDN。

2、 密钥类型

普通对象只接受字符串和符号作为键值,其他类型将被强制转换为字符串类型,而 Map 可以接受任何类型的键值(包括函数、对象或任何原语)。

代码语言:javascript
复制
const obj = {};
const map = new Map();
const key = function () {};
obj[key] = 1;
map.set(key, 1);
// { 'function () {}': 1 }
console.log('obj: ', obj);
// Map(1) { [Function: key] => 1 }
console.log('map: ', map);

3、Accidental keys

普通对象从原型继承了许多属性键,例如构造函数等。因此,自己的密钥很可能与原型上的密钥发生冲突。但是 Map 默认不包含任何键,它只包含那些显式放入的。

代码语言:javascript
复制
const obj = {};
const map = new Map();
console.log(obj.constructor); // ƒ Object() { [native code] }
console.log(map.get('constructor')); // undefined

4、Key order

虽然现在对普通对象的键进行了排序,但情况并非总是如此,而且排序很复杂。例如,如果对象中有键需要转换为字符串,则不保留对象键的原始顺序。虽然 Map 以简单的方式排序,但它始终与我们插入的顺序相同。

代码语言:javascript
复制
const obj = {
  name: 1,
  age: 2,
  3: 4,
};
const map = new Map([
  ['name', 1],
  ['age', 2],
  [3, 4],
]);
// The original order is not preserved.
// {3: 4, name: 1, age: 2}
console.log('obj: ', obj);
// Map(3) { 'name' => 1, 'age' => 2, 3 => 4 }
console.log('map: ', map);

5、迭代

我们可以使用 for...of 语句或 Map.prototype.forEach 直接迭代 Map 的属性,而普通对象不能直接迭代。

代码语言:javascript
复制
const obj = {
  name: 1,
  age: 2,
};
const map = new Map([
  ['name', 1],
  ['age', 2],
]);
for (const [key, value] of map) {
  console.log(`${key}: `, value); // name: 1, age: 2
}
map.forEach((value, key) => {
  console.log(`${key}: `, value); // name: 1, age: 2
});
// Plain objects are not iterable directly.
// But we can use functions like `Object.keys` to help us.
Object.keys(obj).forEach((key) => {
  console.log(`${key}: `, obj[key]); // name: 1, age: 2
});

6、序列化和解析

普通对象支持 JSON 序列化,但 Map 默认无法获取正确数据。

代码语言:javascript
复制
const obj = {
  name: 1,
  age: 2,
};
const map = new Map([
  ['name', 1],
  ['age', 2],
]);
console.log(JSON.stringify(obj)); // "{"name":1,"age":2}"
console.log(JSON.stringify(map)); // "{}"

7、性能

Map 对象在涉及频繁添加和删除键值对的场景中表现更好,而普通对象没有优化。

总结

那么普通对象应该被 Map 对象替换吗?

不,如果我们想在 JSON 和原始数据之间转换或包含特定的业务逻辑,那么我们应该使用普通对象。因为当我们只想存储键值对和循环操作或不断添加和删除属性时,使用 Map 对象是更好的选择。

Map对象虽然也是继承自底层的Object.prototype,但它为我们提供了很多实用的方法来减轻我们的认知负担,比普通对象更高级。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-04-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
文件存储
文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档