ECMAScript6中Map/WeakMap详解


Posted in Javascript onJune 12, 2015

JS的对象本身就是个键值结构,ES6为什么还需要加Map呢,它与普通的JS对象有何区别?

一、Map

1. Map构造器

先看Map的简单用法

// 字符串作为key, 和JS对象类似
var map = new Map()
// set
map.set('name', 'John')
map.set('age', 29)
// get
map.get('name') // John
map.get('age') // 29

这么对代码,看起来确实没有JS对象简洁

但Map的强大之处在于它的key可以是任意类型

// 对象作为key演示
var xy = {x: 10, y: 20}  // 坐标
var wh = {w: 100, h: 200} // 宽高
var map = new Map()
// set
map.set(xy, '坐标')
map.set(wh, '宽高')
// get
map.get(xy) // '坐标'
map.get(wh) // '宽高'

以上演示了用对象作为key的Map。以下为图示

ECMAScript6中Map/WeakMap详解

Map构造器还支持传数组方式

var map = new Map([["name", "John"], ["age", "29"]])
 
// 遍历key
for (var key of map.keys()) {
  console.log(key) // name, age
}

2. 迭代

和Set一样用for of来迭代Map,键调用map.keys(),值调用map.values(),键值实体调用map.entries()

var map = new Map()
// set
map.set('name', 'John')
map.set('age', 29)
// get
map.get('name') // 'John'
map.get('age') // 29
 
// 遍历key
for (var key of map.keys()) {
  console.log(key)
}
 
// 遍历value
for (var val of map.values()) {
  console.log(val)
}
 
// 遍历实体
for (var arr of map.entries()) {
  console.log('key: ' + arr[0] + ', value: ' + arr[1])
}
 
// 遍历实体的简写
for (var [key, val] of map.entries()) {
  console.log('key: ' + key + ', value: ' + val)
}

3. 方法和属性

ECMAScript6中Map/WeakMap详解

二、WeakMap

与Map的区别

不接受基本类型的值作为键名
没有keys、values、entries和size
有以下方法

ECMAScript6中Map/WeakMap详解

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
JavaScript中Date.toSource()方法的使用教程
Jun 12 #Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 #Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 #Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 #Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 #Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 #Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 #Javascript
You might like
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
用Juery网页选项卡实现代码
2011/06/13 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Python面向对象类的继承实例详解
2018/06/27 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
python分数表示方式和写法
2019/06/26 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
学生励志演讲稿
2014/01/06 职场文书
电子银行营销方案
2014/02/22 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
家长给学校的建议书
2014/05/15 职场文书
物流管理专业推荐信
2014/09/06 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
我收到了德劲DE1107
2022/04/05 无线电
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL