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. 不支持的字符集 (在类路径中添加 orai18n.jar): ZHS16GBK

    不支持的字符集 (在类路径中添加 orai18n.jar): ZHS16GBK 报错图示: 报错内容: Exception in thread "main" java.sql.SQ ...

  2. Spring Security OAuth2.0认证授权六:前后端分离下的登录授权

    历史文章 Spring Security OAuth2.0认证授权一:框架搭建和认证测试 Spring Security OAuth2.0认证授权二:搭建资源服务 Spring Security OA ...

  3. super 多重继承 super() function with multilevel inheritance

    Python | super() function with multilevel inheritance - GeeksforGeeks https://www.geeksforgeeks.org/ ...

  4. OIer 生涯绊脚石

    字符串 哈希进制搞质数 \({\color{OrangeRed}{KMP}}\) 数组别开太大,否则 \({\color{Gold}{TLE}}\) 没有必要 \({\color{Cyan}{strl ...

  5. CSS 文本效果

         对于CSS文本的一些效果,基础一些的知识比较简单,但对于text-indent,vertical-align,text-align等的深入学习能够使我们对HTML5的学习更加轻松,对这部分知 ...

  6. Lambda 表达式 学习

    最近几天在学习Lambda,给我的理解就是一个匿名函数的升级版,代码极大可能的简洁了很多,不需要像以前一样必须使用众多的代码才能实现相关功能. 慢慢积累学习,将Java 8的相关知识进行一个学习. 用 ...

  7. 数据库备份和恢复---MariaDB

    定义 数据备份:将源数据再次存储到新的位置 数据恢复:将备份好的数据重新应用到数据库系统 常见的备份类型: 按照是否备份整个数据集来分 完全备份:备份从开始到执行备份这一时刻的所有数据集 增量备份:备 ...

  8. python --装饰器通俗讲解

    装饰器 什么是装饰器?:在不修改源代码和调用方式的基础上给其增加新的功能,多个装饰器可以装饰在同一个函数上 Python中的装饰器是你进入Python大门的一道坎; 装饰器特点: 不改变原函数原代码: ...

  9. zabbix设置告警

    1.配置告警媒介 邮件: 微信: #!/usr/bin/env python # -*- coding: utf-8 -*- import urllib,urllib2,datetime,hashli ...

  10. OSPF路由汇总

    转载自红茶三杯博客:http://blog.sina.com.cn/s/blog_5ec353710102vtfy.html 1. 关于路由汇总 路由汇总,又被称为路由聚合(Route Aggrega ...