文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

我应该使用 Object 还是 Map?

2024-12-03 04:43

关注

本文将会探讨一下 Object 和 Map 的不同,从多个角度对比一下 Object 和 Map:

用法的区别:在某些情况下的用法会截然不同

句法的区别:创建以及增删查改的句法区别

性能的区别:速度和内存占用情况

希望读完本文的你可以在日后的项目中做出更为合适的选择。

用法对比

对于 Object 而言,它键(key)的类型只能是字符串,数字或者 Symbol;而对于 Map 而言,它可以是任何类型。(包括 Date,Map,或者自定义对象)

Map 中的元素会保持其插入时的顺序;而 Object 则不会完全保持插入时的顺序,而是根据如下规则进行排序:

读取 Map 的长度很简单,只需要调用其 .size() 方法即可;而读取 Object 的长度则需要额外的计算:Object.keys(obj).length

Map 是可迭代对象,所以其中的键值对是可以通过 for of 循环或 .foreach() 方法来迭代的;而普通的对象键值对则默认是不可迭代的,只能通过 for in 循环来访问(或者使用 Object.keys(o)、Object.values(o)、Object.entries(o) 来取得表示键或值的数字)迭代时的顺序就是上面提到的顺序。 

  1. const o = {};  
  2. const m = new Map();  
  3. o[Symbol.iterator] !== undefined; // false  
  4. m[Symbol.iterator] !== undefined; // true 

在 Map 中新增键时,不会覆盖其原型上的键;而在 Object 中新增键时,则有可能覆盖其原型上的键: 

  1. Object.prototype.x = 1 
  2.   const o = {x:2};  
  3.   const m = new Map([[x,2]]);  
  4.   o.x; // 2,x = 1 被覆盖了  
  5.   m.x; // 1,x = 1 不会被覆盖 

JSON 默认支持 Object 而不支持 Map。若想要通过 JSON 传输 Map 则需要使用到 .toJSON() 方法,然后在 JSON.parse() 中传入复原函数来将其复原。

对于 JSON 这里就不具体展开了,有兴趣的朋友可以看一下这:JSON 的序列化和解析 

  1. const o = {x:1};  
  2.   const m = new Map([['x', 1]]);  
  3.   const o2 = JSON.parse(JSON.stringify(o)); // {x:1}  
  4.   const m2 = JSON.parse(JSON.stringify(m)) // {} 

句法对比

创建时的区别

Obejct 

  1. const o = {}; // 对象字面量  
  2. const o = new Object(); // 调用构造函数  
  3. const o = Object.create(null); // 调用静态方法 Object.create  

对于 Object 来说,我们在 95%+ 的情况下都会选择对象字面量,它不仅写起来最简单,而且相较于下面的函数调用,在性能方面会更为高效。对于构建函数,可能唯一使用到的情况就是显式的封装一个基本类型;而 Object.create 可以为对象设定原型。

Map 

  1. const m = new Map(); // 调用构造函数  
  2. 和 Object 不同,Map 没有那么多花里胡哨的创建方法,通常只会使用其构造函数来创建。 

除了上述方法之外,我们也可以通过 Function.prototype.apply()、Function.prototype.call()、reflect.apply()、Reflect.construct() 方法来调用 Object 和 Map 的构造函数或者  Object.create() 方法,这里就不展开了。

新增/读取/删除元素时的区别

Obejct 

  1. const o = {};  
  2. //新增/修改  
  3. o.x = 1 
  4. o['y'] = 2;  
  5. //读取  
  6. o.x; // 1  
  7. o['y']; // 2  
  8. //或者使用 ES2020 新增的条件属性访问表达式来读取  
  9. o?.x; // 1  
  10. o?.['y']; // 2  
  11. //删除  
  12. delete o.b; 

对于新增元素,看似使用第一种方法更为简单,不过它也有些许限制:

属性名不能包含空格和标点符号

属性名不能以数字开头

对于条件属性访问表达式的更多内容可以看一下这:条件属性访问表达式

Map 

  1. const m = new Map();  
  2. //新增/修改  
  3. m.set('x', 1);  
  4. //读取  
  5. map.get('x');  
  6. //删除  
  7. map.delete('b'); 

对于简单的增删查改来说,Map 上的方法使用起来也是十分便捷的;不过在进行联动操作时,Map 中的用法则会略显臃肿: 

  1. const m = new Map([['x',1]]);  
  2. // 若想要将 x 的值在原有基础上加一,我们需要这么做:  
  3. m.set('x', m.get('x') + 1);  
  4. m.get('x'); // 2  
  5. const o = {x: 1};  
  6. // 在对象上修改则会简单许多:  
  7. o.x++;  
  8. o.x // 2 

性能对比

接下来我们来讨论一下 Object 和 Map 的性能。不知道各位有没有听说过 Map 的性能优于 Object 的说法,我反正是见过不少次,甚至在 JS 高程四中也提到了 Map 对比 Object 时性能的优势;不过对于性能的概括都十分的笼统,所以我打算做一些测试来对比一下它们的区别。

测试方法

在这里我进行的对于性能测试的都是基于 v8 引擎的。速度会通过 JS 标准库自带的 performance.now() 函数来判断,内存使用情况会通过 Chrome devtool 中的 memory 来查看。

对于速度测试,因为单一的操作速度太快了,很多时候 performance.now() 会返回 0。所以我进行了 10000 次的循环然后判断时间差。因为循环本身也会占据一部分时间,所以以下的测试只能作为一个大致的参考。

创建时的性能

测试用的代码如下: 

  1. let n,  n2 = 5 
  2. // 速度  
  3. while (n2--) {  
  4.   let p1 = performance.now();  
  5.   n = 10000 
  6.   while (n--) { let o = {}; }  
  7.   let p2 = performance.now();  
  8.   n = 10000 
  9.   while (n--) { let m = new Map(); }  
  10.   let p3 = performance.now();  
  11.   console.log(`Object: ${(p2 - p1).toFixed(3)}ms, Map: ${(p3 - p2).toFixed(3)}ms`);  
  12.  
  13. // 内存  
  14. class Test {}  
  15. let test = new Test();  
  16. test.o = o;  
  17. test.m = m; 

首先进行对比的是创建 Object 和 Map 时的表现。对于创建的速度表现如下:

我们可以发现创建 Object 的速度会快于 Map。对于内存使用情况则如下:

我们主要关注其 Retained Size,它表示了为其分配的空间。(即删除时释放的内存大小)

通过对比我们可以发现,空的 Object 会比空的 Map 占用更少的内。所以这一轮 Object 赢得一筹。

新增元素时的性能

测试用的代码如下: 

  1. console.clear();  
  2. let n,  n2 = 5 
  3. let o = {}, m = new Map();  
  4. // 速度  
  5. while (n2--) {  
  6.   let p1 = performance.now();  
  7.   n = 10000 
  8.   while (n--) { o[Math.random()] = Math.random(); }  
  9.   let p2 = performance.now();  
  10.   n = 10000 
  11.   while (n--) { m.set(Math.random(), Math.random()); }  
  12.   let p3 = performance.now();  
  13.   console.log(`Object: ${(p2 - p1).toFixed(3)}ms, Map: ${(p3 - p2).toFixed(3)}ms`);  
  14.  
  15. // 内存  
  16. class Test {}  
  17. let test = new Test();  
  18. test.o = o;  
  19. test.m = m; 

对于新建元素时的速度表现如下:

我们可以发现新建元素时,Map 的速度会快于 Object。对于内存使用情况则如下:

通过对比我们可以发现,在拥有一定数量的元素时, Object 会比 Map 占用多了约 78% 的内存。我也进行了多次的测试,发现在拥有足够的元素时,这个百分比是十分稳定的。所以说,在需要进行很多新增操作,且需要储存许多数据的时候,使用 Map 会更高效。

读取元素时的性能

测试用的代码如下: 

  1. let n;  
  2. let o = {}, m = new Map();  
  3. n = 10000 
  4. while (n--) { o[Math.random()] = Math.random(); }  
  5. n = 10000
  6. while (n--) { m.set(Math.random(), Math.random()); }  
  7. let p1 = performance.now();  
  8. for (key in o) { let k = o[key]; }  
  9. let p2 = performance.now();  
  10. for ([key] of m) { let k = m.get(key); }  
  11. let p3 = performance.now();  
  12. `Object: ${(p2 - p1).toFixed(3)}ms, Map: ${(p3 - p2).toFixed(3)}ms` 

对于读取元素时的速度表现如下:

通过对比,我们可以发现 Object 略占优势,但总体差别不大。

删除元素时的性能

不知道大家是否听说过 delete 操作符性能低下,甚至有很多时候为了性能,会宁可将值设置为 undefined 而不使用 delete 操作符的说法。但其实在 v8 近来的优化下,它的效率已经提升许多了。

测试用的代码如下: 

  1. let n;  
  2. let o = {}, m = new Map();  
  3. n = 10000 
  4. while (n--) { o[Math.random()] = Math.random(); }  
  5. n = 10000 
  6. while (n--) { m.set(Math.random(), Math.random()); }  
  7. let p1 = performance.now();  
  8. for (key in o) { delete o[key]; }  
  9. let p2 = performance.now();  
  10. for ([key] of m) { m.delete(key); }  
  11. let p3 = performance.now();  
  12. `Object: ${(p2 - p1).toFixed(3)}ms, Map: ${(p3 - p2).toFixed(3)}ms` 

对于删除元素时的速度表现如下:

我们可以发现在进行删除操作时,Map 的速度会略占优,但整体差别其实并不大。

特殊情况

其实除了最基本的情况之外,还有一种特殊的情况。还记得我们在前面提到的 Object 中键的排序吗?我们提到了其中的非负整数会被最先列出。其实对于非负整数作为键的值和其余类型作为键的值来说,v8 是会对它们进行区别对待的。负整数作为键的部分会被当成数组对待,即非负整数具有一定的连续性时,会被当成快数组,而过于稀疏时会被当成慢数组。

对于快数组,它拥有连续的内存,所以在进行读写时会更快,且占用更少的内存。更多的内容可以看一下这: 探究JS V8引擎下的“数组”底层实现

在键为连续非负整数时,性能如下:

我们可以看到 Object 不仅平均速度更快了,其占用的内存也大大减少了。

总结

通过对比我们可以发现,Map 和 Object 各有千秋,对于不同的情况下,我们应当作出不同的选择。所以我总结了一下我认为使用 Map 和 Object 更为合适的时机。

使用 Map:

储存的键不是字符串/数字/或者 Symbol 时,选择 Map,因为 Object 并不支持

储存大量的数据时,选择 Map,因为它占用的内存更小

需要进行许多新增/删除元素的操作时,选择 Map,因为速度更快

 需要保持插入时的顺序的话,选择 Map,因为 Object 会改变排序

需要迭代/遍历的话,选择 Map,因为它默认是可迭代对象,迭代更为便捷

使用 Object:

只是简单的数据结构时,选择 Object,因为它在数据少的时候占用内存更少,且新建时更为高效

需要用到 JSON 进行文件传输时,选择 Object,因为 JSON 不默认支持 Map

需要对多个键值进行运算时,选择 Object,因为句法更为简洁

需要覆盖原型上的键时,选择 Object

虽然 Map 在很多情况下会比 Object 更为高效,不过 Object 永远是 JS 中最基本的引用类型,它的作用也不仅仅是为了储存键值对。 

 

来源:前端大全内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯