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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
JavaScript中的Function函数
Aug 27 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
Django和Flask框架优缺点对比
2019/10/24 Python
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
监理员的岗位职责
2013/11/13 职场文书
个人自我评价分享
2013/12/20 职场文书
企业安全标语
2014/06/07 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
2015年新教师工作总结
2015/04/28 职场文书