ES6 Map vs ES5 Object

Map vs Object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#Objects_vs._Maps

Maps 和 Objects 的区别

  1. 键类型不同,一个 Object 的键只能是字符串或者 Symbols,但一个 Map 的键可以是任意值;

  2. 键顺序不同,Map 中的键值是有序的(FIFO 原则),而添加到对象中的键则不是;

  3. 键长度获取方式不同,Map 的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算;

  4. 键值读写方式不同,Object 通过key字符串下标或key, Map 使用 get, set

  5. 是否存在键名冲突不同, Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突;

  6. 遍历方式不同,Object 支持 for ...in, for ...of , Map 支持 for ...of

  7. 性能差异,

Map

Map 对象保存键值对;

任何值(对象或者原始值) 都可以作为一个键或一个值;

  1. const map = new Map();
  2. // undefined
  3. map.set(`a`, 1);
  4. // Map(1) {"a" => 1}
  5. map.set(`c`, 3);
  6. // Map(2) {"a" => 1, "c" => 3}
  7. map.set(`b`, 2);
  8. // Map(3) {"a" => 1, "c" => 3, "b" => 2}
  9. map;
  10. // Map(3) {"a" => 1, "c" => 3, "b" => 2}
  11. map[0];
  12. // undefined
  13. map["a"];
  14. // undefined
  15. map.get("a");
  16. // 1
  17. map.size;
  18. // 3
  19. map.length;
  20. // undefined
  21. // set to array, [...set]
  22. // ??? map to object, {...map} ??? not work at all
  23. Object.keys(map).length;
  24. // 0
  25. let obj = {...map};
  26. // undefined
  27. obj;
  28. // {}

Object


  1. const obj = {};
  2. // undefined
  3. obj.a = 1;
  4. // 1
  5. obj.c = 3;
  6. // 3
  7. obj.b = 2;
  8. // 2
  9. obj;
  10. // {a: 1, c: 3, b: 2}
  11. obj[0];
  12. // undefined
  13. obj["a"];
  14. // 1
  15. obj.a;
  16. // 1
  17. obj.length;
  18. // undefined
  19. Object.keys(obj).length;
  20. // 3

Map 转换成 Object


Set 转换成 Array

https://www.cnblogs.com/xgqfrms/p/13757290.html

  1. const set = new Set();
  2. set.add(1)
  3. const arr = [...set];

same Value Zero algorithm

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality


refs

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

https://www.runoob.com/w3cnote/es6-map-set.html



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


ES6 Map vs ES5 Object的更多相关文章

  1. ES6 - Map

    含义和基本用法   Map对象就是简单的键值对映射.其中的键和值可以使任意值.(ps : 对象的键只能是字符串 ) JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构) ...

  2. ES6 Set vs ES5 Array

    ES6 Set vs ES5 Array Set https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Ob ...

  3. js es6 map 与 原生对象区别

    区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...

  4. ES6 Map All In One

    ES6 Map All In One Map 字典/地图 Set 集合 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...

  5. ES6学习(1)——如何通过babel将ES6转化成ES5

    使用babel编译ES6 babel是一个工具,可以通过多个平台,让js文件从ES6转化成ES5,从而支持一些浏览器并未支持的语法. Insall babel $ sudo npm install b ...

  6. es6开发环境搭建,babel 将es6转化成es5

    工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...

  7. ES6 & Map & hashMap

    ES6 & Map & hashMap 01 two-sum https://leetcode.com/submissions/detail/141732589/ hashMap ht ...

  8. 使用babel将ES6编译成ES5

    现在ES6已经非常成熟了,我的需求很明确,就是只需要将ES6编译成ES5. 项目目录为 借鉴的博客链接为https://blog.csdn.net/suwu150/article/details/77 ...

  9. es6 javascript对象方法Object.assign()

    es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1  基本用法 Object.assign方法用于对象的合并,将源对象 ...

随机推荐

  1. 干货 | 携程多语言平台-Shark系统的高可用演进之路

    https://mp.weixin.qq.com/s/cycZslUlfyVNm2GVrZm1Cw 干货 | 携程多语言平台-Shark系统的高可用演进之路 原创 Fenlon 携程技术 2020-1 ...

  2. PB 级大规模 Elasticsearch 集群运维与调优实践

    PB 级大规模 Elasticsearch 集群运维与调优实践 https://mp.weixin.qq.com/s/PDyHT9IuRij20JBgbPTjFA | 导语 腾讯云 Elasticse ...

  3. 监听套接字描述字 已连接套接字描述字 和打电话的情形非常不一样的地方 完成了 TCP 三次握手,操作系统内核就为这个客户生成一个已连接套接字

    1. accept: 电话铃响起了-- 当客户端的连接请求到达时,服务器端应答成功,连接建立,这个时候操作系统内核需要把这个事件通知到应用程序,并让应用程序感知到这个连接.这个过程,就好比电信运营商完 ...

  4. gstack pstack strace

    gstack pstack strace 通过进程号 查看 进程的工作目录 Linux神器strace的使用方法及实践 - 知乎 https://zhuanlan.zhihu.com/p/180053 ...

  5. redis6.0多线程

    https://www.sohu.com/a/331991216_268033 执行还是单线程     读写解析多线程   6.0 https://segmentfault.com/a/1190000 ...

  6. 中央事件总线 事件驱动架构(EDA) 解析事件总线的4种实现方式

    事件驱动架构(EDA)https://mp.weixin.qq.com/s/nA8XFD2Rx_7qA_LxltGGHw https://mp.weixin.qq.com/s/cD3auglgKzOb ...

  7. jsaper子报表Subreport(父子报表互相传值)

    有很多人都说Jasperreports不适合中国式复杂报表,实际上运用好父子报表可以解决大部分问题了.例如下面的表.每个学生的学科数目不固定,且每个学生后有相当于小计的平均分.有点复杂度的报表,可以使 ...

  8. python实现文件查找功能,excel写入功能

    因为要丛UE文档中过滤关键字来统计解码时间,第一次自己完成了一个自动化统计的小工具,用起来颇有成就感. UE文件的内如如下: 需要丛这份关键字中过滤红色标记的两个关键字,取 一个关键字的最后一位,和取 ...

  9. Java 性能调优的 11 个实用技巧

    大多数开发人员认为性能优化是个比较复杂的问题,需要大量的经验和知识.是的,这并不没有错.诚然,优化应用程序以获得最好的性能并不是一件容易的事情,但这并不意味着你在没有获得这些经验和知识之前就不能做任何 ...

  10. msf+cobaltstrike联动(二):把cs中的机器spwan给msf

    前提:CS已经获取到session,可以进入图形化管理机器,现在需要使用msf进行进一步渗透,需要msf的metepreter. 开启msf msf设置监听 msf > use exploit/ ...