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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
vue实现计算器功能
Feb 22 Javascript
js实现随机点名器精简版
Jun 29 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 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中jpgraph类库的使用介绍
2013/08/08 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
js微信分享实现代码
2020/10/11 Javascript
vue组件生命周期详解
2017/11/07 Javascript
vue二级路由设置方法
2018/02/09 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
python 循环while和for in简单实例
2016/08/16 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
Python异常处理知识点总结
2019/02/18 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
如何高效率的查找一个月以内的数据
2012/04/15 面试题
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
机械专业应届生求职信
2013/09/21 职场文书
志愿者活动总结范文
2014/04/26 职场文书
个人授权委托书
2014/09/15 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
学校运动会感想
2015/08/10 职场文书