文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-11 18:49

关注

[[334841]]

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

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

Map 基本用法

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

[[334842]] 

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

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

比较 Map 和 Object

定义 

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

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

键名类型

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

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

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

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

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

原型 Prototype

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

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

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

[[334843]]

[[334844]] 

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

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

迭代器

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

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

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

[[334845]] 

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

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

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

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

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

元素顺序和长度

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

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

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

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

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

Object/Map 何为最佳实践

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

  1. const userCustomFields = {  
  2.   'color':    'blue',  
  3.   'size':     'medium',  
  4.   'toString': 'A blue box'  
  5. }; 

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

  1. function isMap(value) {  
  2.   return value.toString() === '[object Map]';  
  3.  
  4. const actorMap = new Map(); 
  5. actorMap.set('name', 'Harrison Ford');  
  6. actorMap.set('toString', 'Actor: Harrison Ford');  
  7. // Works!  
  8. isMap(actorMap); // => true 
  1. var map = new Map()  
  2. map.set('key','value')  
  3. JSON.stringify(map)  //"{}" 
  1. const actions = ()=> 
  2.   const functionA = ()=>{}  
  3.   const functionB = ()=>{}  
  4.   const functionC = ()=>{}  
  5.   returnnewMap([  
  6.     [/^guest_[1-4]$/,functionA],  
  7.     [/^guest_5$/,functionB],  
  8.     [/^guest_.*$/,functionC],  
  9.     //...  
  10.   ])  
  11. const onButtonClick = (identity,status)=> 
  12.   let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`)))  
  13.   action.forEach(([key,value])=>value.call(this))  

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

总结:

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

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

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

 

来源:前端大全内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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