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 相关文章推荐
javascript定义函数的方法
Dec 06 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
JS扩展方法实例分析
Apr 15 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
Vue生命周期示例详解
Apr 12 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
vue穿梭框实现上下移动
Jan 29 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开发需要注意的安全问题
2010/09/01 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
smarty简单应用实例
2015/11/03 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
php将html转为图片的实现方法
2017/05/19 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
js过滤数组重复元素的方法
2010/09/05 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
连接Python程序与MySQL的教程
2015/04/29 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
志愿者活动总结范文
2014/04/26 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
期中考试复习计划
2015/01/19 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python