ES6学习教程之Map的常用方法总结


Posted in Javascript onAugust 03, 2017

前言

ES6包含了许多新的语言特性,这会让JS变的更加强大且富有表现力。本文将给大家详细介绍关于ES6中Map的常用方法,话不多说,来一起看看详细的介绍:

1.Map 结构转为数组结构

比较快速的方法是结合使用扩展运算符(...)

let map = new Map([
 [1, 'one'],
 [2, 'two'],
 [3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

2.Map 循环遍历

Map 原生提供三个遍历器:

  • keys():返回键名的遍历器。
  • values():返回键值的遍历器。
  • entries():返回所有成员的遍历器。

下面是使用实例。

let map = new Map([
 ['F', 'no'],
 ['T', 'yes'],
]);

for (let key of map.keys()) {
 console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
 console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
 console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
 console.log(key, value);
}

// 等同于使用map.entries()
for (let [key, value] of map) {
 console.log(key, value);
}

上面代码最后的那个例子,表示 Map 结构的默认遍历器接口(Symbol.iterator 属性),就是 entries 方法。

map[Symbol.iterator] === map.entries // true

3.Map 获取长度

map.size;

4.Map 获取第一个元素

const m = new Map();
m.set('key1', {})
m.set('keyN', {})

console.log(m.entries().next().value); // [ 'key1', {} ]

获取第一个key

console.log(m.keys().next().value); // key1

获取第一个value

console.log(m.values().next().value); // {}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
纯javascript版日历控件
Nov 24 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 #Javascript
Form表单上传文件(type="file")的使用
Aug 03 #Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 #Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 #Javascript
浅谈pc端rem字体设置的问题
Aug 03 #Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 #Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 #Javascript
You might like
PHP默认安装产生系统漏洞
2006/10/09 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
php中异常处理方法小结
2015/01/09 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
快速创建python 虚拟环境
2020/11/28 Python
儿媳婚宴答谢词
2014/01/14 职场文书
初中校园之声广播稿
2014/01/15 职场文书
个人自我剖析材料
2014/09/30 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
党支部审查意见
2015/06/02 职场文书
初中数学教学随笔
2015/08/15 职场文书