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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
JS解析XML实例分析
Jan 30 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
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一些有意思的小区别
2006/12/06 PHP
php 空格,换行,跳格使用说明
2009/12/18 PHP
php实现httpclient类示例
2014/04/08 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
最基础的Python的socket编程入门教程
2015/04/23 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Python编写万花尺图案实例
2021/01/03 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
秘书英文求职信范文
2014/01/31 职场文书
小学国庆节活动方案
2014/02/11 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
军训通讯稿范文
2015/07/18 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
一行Python命令实现批量加水印
2022/04/07 Python
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis