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 对象保存键值对;

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

const map = new Map();
// undefined map.set(`a`, 1);
// Map(1) {"a" => 1}
map.set(`c`, 3);
// Map(2) {"a" => 1, "c" => 3}
map.set(`b`, 2);
// Map(3) {"a" => 1, "c" => 3, "b" => 2}
map;
// Map(3) {"a" => 1, "c" => 3, "b" => 2} map[0];
// undefined
map["a"];
// undefined
map.get("a"); // 1
map.size;
// 3
map.length;
// undefined // set to array, [...set]
// ??? map to object, {...map} ??? not work at all Object.keys(map).length;
// 0
let obj = {...map};
// undefined
obj;
// {}

Object


const obj = {};
// undefined
obj.a = 1;
// 1
obj.c = 3;
// 3
obj.b = 2;
// 2
obj;
// {a: 1, c: 3, b: 2}
obj[0];
// undefined
obj["a"];
// 1
obj.a;
// 1 obj.length;
// undefined
Object.keys(obj).length;
// 3

Map 转换成 Object


Set 转换成 Array

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

const set = new Set();
set.add(1) 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. Centos 安装postgreSQL9.4.3

    rpm -ivh http://download.postgresql.org/pub/repos/yum/9.4/redhat/rhel-7.2-x86_64/pgdg-centos94-9.4-3 ...

  2. VMware中安装Ubuntu后,安装VMwareTools提示“Not enough free space to extract VMwareTools-10.3.10-13959562.tar.gz”的解决办法

    将加载后的Vmware Tools中的*.tar.gz文件复制到桌面后提取,否则会报错:

  3. Bitter.Core系列五:Bitter ORM NETCORE ORM 全网最粗暴简单易用高性能的 NETCore ORM 之 示例 分页聚联查询

    Bitter.Core 在聚联/分页聚联查询的时候,采用原生的MSSQL, MYSQL 语句查询,做过复杂高级项目的人知道,原生的聚合查询代码执行效率更高,更快,更容易书写,开发量最少. 借助原生的M ...

  4. redis中的小秘密和持久化小细节

    https://www.jianshu.com/p/36c301ac87df 持久化的情况 https://www.cnblogs.com/wdliu/p/9377278.html 集群搭建 主从  ...

  5. 强制杀死进程后,进程相关的socket未必发送RST

    强制杀死进程后,进程相关的socket未必发送RST

  6. 服务端渲染 数据驱动 不是渲染后的网页,而是一个由html和Javascript组成的app ssr 隐藏接口服务器

    小结: 1. 服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务器给到客户端的已经是 ...

  7. 服务注册中心:Eureka

    第一章 注册中心介绍 1.1.什么是注册中心 注册中心可以说是微服务架构中的"通讯录",它记录了服务和服务地址的映射关系.在分布式系统中,服务会注册到这里,当服务需要调用其它服务时 ...

  8. Python学习【第5篇】:数据类型和变量总结

    字符串,数字,列表,元组,字典 可变不可变 1.可变:列表 如: p.p1 { margin: 0; font: 11px Menlo; color: rgba(0, 0, 0, 1); backgr ...

  9. CAS+Tomcat SSL第三方数据证书导入(jks)

    首先,为CAS SERVER配置HTTPS 切换到证书 xxx.jks的目录下,查看证书的信息 keytool -list -keystore  XXX.jks  -storepass **** XX ...

  10. 2.二层常用技术-Portfast和BPDU Guard、BPDU Filter

    PortFast (生成树端口加速) 1.在交换机上使用portfast命令,可以防止出现由于STP的收敛时间太长,导致主机的DHCP请求超时,从而使主机不能接收到DHCP地址的问题. 确保有一台服务 ...