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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 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 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
Python中logging实例讲解
2019/01/17 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
英国探险旅游专家:Explore
2018/12/20 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
初一新生军训方案
2014/05/22 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
干部考察材料范文
2014/12/24 职场文书
清洁工岗位职责
2015/02/13 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
欠条格式范本
2015/07/03 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python