ES6教程之for循环和Map,Set用法分析


Posted in Javascript onApril 10, 2017

本文实例讲述了ES6教程之for循环和Map,Set用法。分享给大家供大家参考,具体如下:

现在大家先想一想,如果要你遍历一个数组的元素,你会选择如何去做呢?一般都会想起for循环:

for (var index = 0; index < myArray.length; index++) {
 console.log(myArray[index]);
}

可惜我得告诉你,这个方法是二十年的人才应该使用的方法,在ES5中已经提出了更为简便的forEach方法,代码如下:

myArray.forEach(function (value) {
 console.log(value);
});

虽然forEach方法简短一点,但是它也有它的缺点,就是不能够break来中途退出循环,也不能通过return来退出循环。

那么不是还有for-in方法吗:

for (var index in myArray) { 
 console.log(myArray[index]);
}

可是for-in方法实际上是为存储key的键值对型对象准备的,而不是为数组准备的,它的下标为字符串“1”,“2”……相信大家都知道“1”+“2”会怎么样吧?

for-of循环

ES6为了不影响以前的代码,为了满足很多人已经养成的习惯,只能推出一种新的循环语法for-of:

for (var value of myArray) {
 console.log(value);
}

对比for-in和for-of:

var a = ["a","b","c","d","e"];
for (var idx in a) {
  console.log( idx ); 
  }// 0 1 2 3 4 
for (var val of a) {
  console.log( val ); 
  }// "a" "b" "c" "d" "e"

for-of不仅仅可以用于数组,还可以用在dom对象上,同样作用于Map和Set对象

下面介绍一下Map和Set对象

Map,Set

JavaScript的默认对象表示方式是{},但是JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。

为了解决这个问题,最新的ES6规范引入了新的数据类型Map。

Map是具有极快查找速度的键值对结构。

我们看看Map的使用示例:

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

上面的has方法比indexOf速度快。

Set和Map类似,也是存在key的列表,只不过Set中的元素不能够重复。

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

可以看到,再次添加的重复数据会被过滤掉。

那么这两种对象的运用场景有哪些呢?

Map可以用来存储键值对,比如姓名和年龄,而Set可以用来存储不能重复的目标,比如学号列表。

for-of用于对象

好啦,介绍完了两种类型的新对象,让我们看看for-of如何作用于Set对象上的:

var uniqueWords = new Set(words);
for (var word of uniqueWords) {
 console.log(word);
}

遍历Map对象则不同,因为Map是以键值对存储的,所以我们需要分开两个单独的变量来遍历:

for (var [key, value] of phoneBookMap) {
 console.log(key + "'s phone number is: " + value);
}

但是需要注意一点。for-of并不是用来遍历普通的对象的属性的,如果我们一定要这么做,可以使用for-in或者如下方法:

for (var key of Object.keys(someObject)) {
 console.log(key + ": " + someObject[key]);
}

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
web打印小结
Jan 11 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 #Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 #Javascript
ES6生成器用法实例分析
Apr 10 #Javascript
基于javascript的异步编程实例详解
Apr 10 #Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 #Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 #Javascript
js实现适配不同的屏幕大小
Apr 10 #Javascript
You might like
php xml 入门学习资料
2011/01/01 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php简单判断文本编码的方法
2015/07/30 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
react基本安装与测试示例
2020/04/27 Javascript
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
简单了解python反射机制的一些知识
2019/07/13 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
Python分类测试代码实例汇总
2020/07/23 Python
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
超市5.1促销活动
2014/01/15 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
在职证明书模板
2015/06/15 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
浅谈MySQL之select优化方案
2021/08/07 MySQL