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 相关文章推荐
JavaScript中的this实例分析
Apr 28 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
微信小程序之电影影评小程序制作代码
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
DISCUZ 分页代码
2007/01/02 PHP
escape unescape的php下的实现方法
2007/04/27 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
探讨php中header的用法详解
2013/06/07 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
Python字符串格式化输出方法分析
2016/04/13 Python
python实现猜数字游戏
2020/03/25 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
python一些性能分析的技巧
2020/08/30 Python
Python urllib3软件包的使用说明
2020/11/18 Python
python eventlet绿化和patch原理
2020/11/21 Python
详解python的变量缓存机制
2021/01/24 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
图书室管理制度
2014/01/19 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
活动总结怎么写啊
2014/05/07 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
民主生活会主持词
2015/07/01 职场文书
运动会广播稿50字
2015/08/19 职场文书
英语导游欢迎词
2015/09/30 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis