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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
vue-loader教程介绍
Jun 14 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
JS轮播图的实现方法2
Aug 25 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
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
PHP 图片处理
2020/09/16 PHP
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python3实现生成随机密码的方法
2014/08/23 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Python实现控制台输入密码的方法
2015/05/29 Python
开始着手第一个Django项目
2015/07/15 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
对python中Json与object转化的方法详解
2018/12/31 Python
简单了解Python生成器是什么
2019/07/02 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Python中的__init__作用是什么
2020/06/09 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
国际语言毕业生求职信
2014/07/08 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
运动会开幕式致辞
2015/07/29 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers