什么时候适合使用Map而不是Object

首先我们先有请「Map」简单介绍下自己

成都创新互联长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为荥经企业提供专业的成都网站制作、网站设计，荥经网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

「Map」映射是一种经典的数据结构类型，其中数据以 「key/value」 的键值对形式存在

  Map Object
默认值 默认不包含任何值，只包含显式插入的键 一个 Object 有一个原型，原型上的键名有可能和自己对象上设置的键名冲突
类型 任意 String 或 Symbol
长度 键值对个数通过 size 属性获取 键值对个数只能手动计算
性能 频繁增删键值对的场景下表现更好 频繁添加和删除键值对的场景下未作出优化

Map 基本用法

接受任何类型的键 划重点，是任何 any!!!

 
 
 
 
    
  
  
  
  
  1. const testMap = new Map() 
    2. 
  
  
  
  
  2. let str = '今天不学习', 
    3. 
  
  
  
  
  3.     num = 666, 
    4. 
  
  
  
  
  4.     keyFunction = function () {}, 
    5. 
  
  
  
  
  5.     keySymbol = Symbol('Web'), 
    6. 
  
  
  
  
  6.     keyNull = null, 
    7. 
  
  
  
  
  7.     keyUndefined = undefined, 
    8. 
  
  
  
  
  8.     keyNaN = NaN 
    9. 
  
  
  
  
  9. //添加键值对 
    10. 
  
  
  
  
  10. //基本用法 
    11. 
  
  
  
  
  11. testMap.set('key', 'value') // Map(1) {"key" => "value"} 
    12. 
  
  
  
  
  12. testMap.set(str, '明天变辣鸡') 
    13. 
  
  
  
  
  13. testMap.set(num, '前端Sneaker') 
    14. 
  
  
  
  
  14. testMap.set(keyFunction, '你的函数写的好棒棒哦') 
    15. 
  
  
  
  
  15. testMap.set(keySymbol, '大前端') 
    16. 
  
  
  
  
  16. testMap.set(keyNull, '我是个Null') 
    17. 
  
  
  
  
  17. testMap.set(keyUndefined, '我是个Undifined') 
    18. 
  
  
  
  
  18. testMap.set(keyNaN, '我是个NaN') 
    19. 
  
  
  
  
  19. testMap.get(function () {}) //undefined 
    20. 
  
  
  
  
  20. testMap.get(Symbol('Web')) //undefined 
    21. 
  
  
  
  
  21. //虽然NaN !== NaN 但是作为Map键名并无区别 
    22. 
  
  
  
  
  22. testMap.get(NaN) //"我是个NaN" 
    23. 
  
  
  
  
  23. testMap.get(Number('NaN')) //"我是个NaN"
    24.

除了NaN比较特殊外，其他「Map」的get方法都是通过对比键名是否相等（===）来获取，不相等则返回undefined

比较 Map 和 Object

定义

 
 
 
 
    
  
  
  
  
  1. //Map 
    2. 
  
  
  
  
  2. const map = new Map(); 
    3. 
  
  
  
  
  3. map.set('key', 'value'); // Map(1) {"key" => "value"} 
    4. 
  
  
  
  
  4. map.get('key'); // 'value' 
    5. 
  
  
  
  
  5. //Object 
    6. 
  
  
  
  
  6. const someObject = {}; 
    7. 
  
  
  
  
  7. someObject.key = 'value'; 
    8. 
  
  
  
  
  8. someObject.key; // 'value'
    9.

这里可以明显看出其实其定义行为是十分相似的，想必看到这里大家还没看出来「Map」到底在何时使用才是最佳实践，别急接着来。

键名类型

JavaScript 「Object」只接收两种类型的键名 String 和 Symbol，你可以使用其他类型的键名，但是最终 JavaScript 都会隐式转换为字符串

 
 
 
 
    
  
  
  
  
  1. const obj = {} 
    2. 
  
  
  
  
  2. //直接看几种比较特殊的键名 
    3. 
  
  
  
  
  3. obj[true] = 'Boolean' 
    4. 
  
  
  
  
  4. obj[1] = 'Number' 
    5. 
  
  
  
  
  5. obj[{'前端':'Sneaker'}] = '666' 
    6. 
  
  
  
  
  6. Object.keys(obj) // ["1", "true", "[object Object]"]
    7.

再来看看 「Map」 的，其接收任何类型的键名并保留其键名类型 (此处简单举例，详细可看文章开头「Map」基本使用)

 
 
 
 
    
  
  
  
  
  1. const map = new Map(); 
    2. 
  
  
  
  
  2. map.set(1, 'value'); 
    3. 
  
  
  
  
  3. map.set(true, 'value'); 
    4. 
  
  
  
  
  4. map.set({'key': 'value'}, 'value'); 
    5. 
  
  
  
  
  5. for (const key of map.keys()) { 
    6. 
  
  
  
  
  6.   console.log(key); 
    7. 
  
  
  
  
  7. } 
    8. 
  
  
  
  
  8. // 1 
    9. 
  
  
  
  
  9. // true 
    10. 
  
  
  
  
  10. // {key: "value"} 
    11. 
  
  
  
  
  11. //除此之外，Map还支持正则作为键名 
    12. 
  
  
  
  
  12. map.set(/^1[3456789]\d{9}$/,'手机号正则') 
    13. 
  
  
  
  
  13. //Map(1) {/^1[3456789]\d{9}$/ => "手机号正则"}
    14.

「Map」支持正则表达式作为键名，这在Object是不被允许的直接报错

原型 Prototype

「Object」不同于「Map」，它不仅仅是表面所看到的。「Map」只包含你所定义的键值对，但是「Object」对象具有其原型中的一些内置属性

 
 
 
 
    
  
  
  
  
  1. const newObject = {}; 
    2. 
  
  
  
  
  2. newObject.constructor; // ƒ Object() { [native code] }
    3.

如果操作不当没有正确遍历对象属性，可能会导致出现问题，产生你意料之外的 bug

 
 
 
 
    
  
  
  
  
  1. const countWords = (words) => { 
    2. 
  
  
  
  
  2.   const counts = { }; 
    3. 
  
  
  
  
  3.   for (const word of words) { 
    4. 
  
  
  
  
  4.     counts[word] = (counts[word] || 0) + 1; 
    5. 
  
  
  
  
  5.   } 
    6. 
  
  
  
  
  6.   return counts; 
    7. 
  
  
  
  
  7. }; 
    8. 
  
  
  
  
  8. const counts = countWords(['constructor', 'creates', 'a', 'bug']); 
    9. 
  
  
  
  
  9. // {constructor: "function Object() { [native code] }1", creates: 1, a: 1, bug: 1}
    10.

这个例子灵感来源于《Effective TypeScript》[1]一书

迭代器

「Map」 是可迭代的，可以直接进行迭代，例如forEach循环或者for...of...循环

 
 
 
 
    
  
  
  
  
  1. //forEach 
    2. 
  
  
  
  
  2. const map = new Map(); 
    3. 
  
  
  
  
  3. map.set('key1', 'value1'); 
    4. 
  
  
  
  
  4. map.set('key2', 'value2'); 
    5. 
  
  
  
  
  5. map.set('key3', 'value3'); 
    6. 
  
  
  
  
  6. map.forEach((value, key) => { 
    7. 
  
  
  
  
  7.   console.log(key, value); 
    8. 
  
  
  
  
  8. }); 
    9. 
  
  
  
  
  9. // key1 value1 
    10. 
  
  
  
  
  10. // key2 value2 
    11. 
  
  
  
  
  11. // key3 value3 
    12. 
  
  
  
  
  12. //for...of... 
    13. 
  
  
  
  
  13. for(const entry of map) { 
    14. 
  
  
  
  
  14.   console.log(entry); 
    15. 
  
  
  
  
  15. } 
    16. 
  
  
  
  
  16. // ["key1", "value1"] 
    17. 
  
  
  
  
  17. // ["key2", "value2"] 
    18. 
  
  
  
  
  18. // ["key3", "value3"]
    19.

但是对于「Object」是不能直接迭代的，当你尝试迭代将导致报错

 
 
 
 
    
  
  
  
  
  1. const object = { 
    2. 
  
  
  
  
  2.   key1: 'value1', 
    3. 
  
  
  
  
  3.   key2: 'value2', 
    4. 
  
  
  
  
  4.   key3: 'value3', 
    5. 
  
  
  
  
  5. }; 
    6. 
  
  
  
  
  6. for(const entry of object) { 
    7. 
  
  
  
  
  7.   console.log(entry); 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9. // Uncaught TypeError: object is not iterable
    10.

这时候你就需要一个额外的步骤来检索其键名、键值或者键值对

 
 
 
 
    
  
  
  
  
  1. for(const key of Object.keys(object)) { 
    2. 
  
  
  
  
  2.   console.log(key); 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. // key1 
    5. 
  
  
  
  
  5. // key2 
    6. 
  
  
  
  
  6. // key3 
    7. 
  
  
  
  
  7. for(const value of Object.values(object)) { 
    8. 
  
  
  
  
  8.   console.log(value);
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10. // value1 
    11. 
  
  
  
  
  11. // value2 
    12. 
  
  
  
  
  12. // value3 
    13. 
  
  
  
  
  13. for(const entry of Object.entries(object)) { 
    14. 
  
  
  
  
  14.   console.log(entry); 
    15. 
  
  
  
  
  15. } 
    16. 
  
  
  
  
  16. // ["key1", "value1"] 
    17. 
  
  
  
  
  17. // ["key2", "value2"] 
    18. 
  
  
  
  
  18. // ["key3", "value3"] 
    19. 
  
  
  
  
  19. for(const [key,value] of Object.entries(object)) { 
    20. 
  
  
  
  
  20.   console.log(key,value); 
    21. 
  
  
  
  
  21. } 
    22. 
  
  
  
  
  22. //"key1", "value1" 
    23. 
  
  
  
  
  23. //"key2", "value2" 
    24. 
  
  
  
  
  24. //"key3", "value3"
    25.

当然也可以使用for...in...进行遍历循环键名

 
 
 
 
    
  
  
  
  
  1. for(const key in object) { 
    2. 
  
  
  
  
  2.   console.log(key); 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. // key1 
    5. 
  
  
  
  
  5. // key2 
    6. 
  
  
  
  
  6. // key3
    7.

元素顺序和长度

Map 保持对长度的跟踪，使其能够在O(1)复杂度中进行访问

 
 
 
 
    
  
  
  
  
  1. const map = new Map(); 
    2. 
  
  
  
  
  2. map.set('key1', 'value1'); 
    3. 
  
  
  
  
  3. map.set('key2', 'value2'); 
    4. 
  
  
  
  
  4. map.set('key3', 'value3'); 
    5. 
  
  
  
  
  5. map.size; // 3
    6.

而另一方面，对于「Object」而言，想要获得对象的属性长度，需要手动对其进行迭代，使其为O(n)复杂度，属性长度为n

在上文提及的示例中，我们可以看到「Map」始终保持按插入顺序返回键名。但「Object」却不是。从 ES6 开始，String和Symbol键是按顺序保存起来的，但是通过隐式转换保存成String的键就是乱序的

 
 
 
 
    
  
  
  
  
  1. const object = { }; 
    2. 
  
  
  
  
  2. object['key1'] = 'value1'; 
    3. 
  
  
  
  
  3. object['key0'] = 'value0'; 
    4. 
  
  
  
  
  4. object; // {key1: "value1", key0: "value0"} 
    5. 
  
  
  
  
  5. object[20] = 'value20'; 
    6. 
  
  
  
  
  6. object; // {20: "value20", key1: "value1", key0: "value0"} 
    7. 
  
  
  
  
  7. Object.keys(object).length; //3
    8.

Object/Map 何为最佳实践

如上就是 「Map」 和 「Object」 的基本区别，在解决问题考虑两者的时候就需要考虑两者的区别。

  •  当插入顺序是你解决问题时需要考虑的，并且当前需要使用除 String 和 Symbol 以外的键名时，那么 「Map」 就是个最佳解决方案
  •  如果需要遍历键值对（并且需要考虑顺序）,那我觉得还是需要优先考虑 「Map」。
  •  Map是一个纯哈希结构，而Object不是（它拥有自己的内部逻辑）。Map 在频繁增删键值对的场景下表现更好，性能更高。因此当你需要频繁操作数据的时候也可以优先考虑 Map
  •  再举一个实际的例子，比如有一个自定义字段的用户操作功能，用户可以通过表单自定义字段，那么这时候最好是使用 Map，因为很有可能会破坏原有的对象
 
 
 
 
    
  
  
  
  
  1. const userCustomFields = { 
    2. 
  
  
  
  
  2.   'color':    'blue', 
    3. 
  
  
  
  
  3.   'size':     'medium', 
    4. 
  
  
  
  
  4.   'toString': 'A blue box' 
    5. 
  
  
  
  
  5. };
    6.

此时用户自定义的 toString 就会破坏到原有的对象 而 「Map」 键名接受任何类型，没有影响

 
 
 
 
    
  
  
  
  
  1. function isMap(value) { 
    2. 
  
  
  
  
  2.   return value.toString() === '[object Map]'; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. const actorMap = new Map();
    5. 
  
  
  
  
  5. actorMap.set('name', 'Harrison Ford'); 
    6. 
  
  
  
  
  6. actorMap.set('toString', 'Actor: Harrison Ford'); 
    7. 
  
  
  
  
  7. // Works! 
    8. 
  
  
  
  
  8. isMap(actorMap); // => true
    9.
  •  当你需要处理一些属性，那么 「Object」 是完全受用的，尤其是需要处理 JSON 数据的时候。由于 「Map」 可以是任意类型，因此没有可以将其转化为 JSON 的原生方法。
 
 
 
 
    
  
  
  
  
  1. var map = new Map() 
    2. 
  
  
  
  
  2. map.set('key','value') 
    3. 
  
  
  
  
  3. JSON.stringify(map)  //"{}"
    4.
  •  当你需要通正则表达式判断去处理一些业务逻辑时，「Map」将是你的最佳解决方案
 
 
 
 
    
  
  
  
  
  1. const actions = ()=>{ 
    2. 
  
  
  
  
  2.   const functionA = ()=>{/*do sth*/} 
    3. 
  
  
  
  
  3.   const functionB = ()=>{/*do sth*/} 
    4. 
  
  
  
  
  4.   const functionC = ()=>{/*send log*/} 
    5. 
  
  
  
  
  5.   returnnewMap([ 
    6. 
  
  
  
  
  6.     [/^guest_[1-4]$/,functionA], 
    7. 
  
  
  
  
  7.     [/^guest_5$/,functionB], 
    8. 
  
  
  
  
  8.     [/^guest_.*$/,functionC], 
    9. 
  
  
  
  
  9.     //... 
    10. 
  
  
  
  
  10.   ]) 
    11. 
  
  
  
  
  11. }
    12. 
  
  
  
  
  12. const onButtonClick = (identity,status)=>{ 
    13. 
  
  
  
  
  13.   let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`))) 
    14. 
  
  
  
  
  14.   action.forEach(([key,value])=>value.call(this)) 
    15. 
  
  
  
  
  15. }
    16.

利用数组循环的特性，符合正则条件的逻辑都会被执行，那就可以同时执行公共逻辑和单独逻辑，因为正则的存在，你可以打开想象力解锁更多的玩法,更多相关 Map 用法样例可以查看JavaScript 复杂判断的更优雅写法

总结：

「Object」对象通常可以很好的保存结构化数据，但是也有相应的局限性：

  1.  键名接受类型只能用 String 或者 Symbol
  2.  自定义的键名容易与原型继承的属性键名冲突（例如 toString，constructor 等）
  3.  对象/正则无法用作键名 而这些问题通过 「Map」 都可以解决，并且提供了诸如迭代器和易于进行大小查找之类的好处

不要将「Map」作为普通「Object」的替代品，而应该是普通对象的补充

新闻名称：什么时候适合使用Map而不是Object
网页地址：http://www.stwzsj.com/qtweb/news33/10633.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

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

猜你还喜欢下面的内容

自适应网站知识

行业网站建设

成都企业网站建设　　 　成都学生服定制　　 　网络推广外包　　 　胜锦安防科技　　 　成都微信开发　　 　成都网站建设推广　　 　响应式网站建设　　 　成都营销网站建设　　 　域名注册　　 　微信小程序　　 　成都网站推广　　 　泸县网站建设　　 　网站推广优化　　 　营山网站建设　　 　路面机械及配件　　 　香港云服务器租用　　 　成都App定制　　 　成都手机网站报价　　 　成都网站制作公司　　 　成都网站建设