我应该使用Object还是Map？

 前言

在日常的 JavaScript 项目中，我们最常用到的数据结构就是各种形式的键值对格式了（key-value pair）。在 JavaScript 中，除了最基础的 Object 是该格式外，ES6 新增的 Map 也同样是键值对格式。它们的用法在很多时候都十分接近。不知道有没有人和我一样纠结过该选择哪个去使用呢？在本菜最近的项目中，我又遇到了这样的烦恼，索性一不做二不休，去对比一下究竟该使用哪一个。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了雨山免费建站欢迎大家使用！

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

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

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

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

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

用法对比

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

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

  •   非负整数会最先被列出，排序是从小到大的数字顺序
  •   然后所有字符串，负整数，浮点数会被列出，顺序是根据插入的顺序
  •   最后才会列出 Symbol，Symbol 也是根据插入的顺序进行排序的

读取 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. 
  
  
  
  
  2. const m = new Map(); 
    3. 
  
  
  
  
  3. o[Symbol.iterator] !== undefined; // false 
    4. 
  
  
  
  
  4. m[Symbol.iterator] !== undefined; // true
    5.

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

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

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

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

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

句法对比

创建时的区别

Obejct

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

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

Map

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

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

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

Obejct

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

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

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

属性名不能以数字开头

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

Map

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

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

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

性能对比

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

测试方法

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

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

创建时的性能

测试用的代码如下：

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

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

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

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

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

新增元素时的性能

测试用的代码如下：

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

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

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

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

读取元素时的性能

测试用的代码如下：

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

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

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

删除元素时的性能

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

测试用的代码如下：

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

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

我们可以发现在进行删除操作时，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 中最基本的引用类型，它的作用也不仅仅是为了储存键值对。

分享文章：我应该使用Object还是Map？
标题网址：http://www.stwzsj.com/qtweb/news37/9987.html

成都网站建设公司_创新互联，为您提供标签优化、外贸网站建设、域名注册、手机网站建设、企业建站、品牌网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站建设知识

分类信息网站

大英网站建设　　 　成都广告招牌　　 　成都微信开发　　 　混凝土搅拌罐车　　 　深圳纱窗安装　　 　建站定制开发　　 　成都微信小程序开发　　 　成都富士康招工　　 　移动APP　　 　造型师设计　　 　成都定制网页设计　　 　成都网站设计制作公司　　 　彭山网站制作　　 　什邡做网站　　 　成都网站建设　　 　东电技服　　 　微信开发　　 　成都网站设计公司　　 　响应式网站建设公司　　 　成都艾瑞格