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 相关文章推荐
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
js实现无缝循环滚动
Jun 23 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 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
Zerg基本策略
2020/03/14 星际争霸
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
php源码的安装方法和实例
2019/09/26 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
DataFrame中的object转换成float的方法
2018/04/10 Python
python3中zip()函数使用详解
2018/06/29 Python
python标识符命名规范原理解析
2020/01/10 Python
德国网上药房:Apotal
2017/04/04 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
祖国在我心中演讲稿400字
2014/05/04 职场文书
个性车贴标语
2014/06/24 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
家长评语怎么写
2014/12/30 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
redis连接被拒绝的解决方案
2021/04/12 Redis