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扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
php 修改密码实现代码
May 24 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
javascript中call,apply,bind的区别详解
Dec 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设计模式小结
2013/02/15 PHP
PHP模块memcached使用指南
2014/12/08 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
浅谈Python 对象内存占用
2016/07/15 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python看某个模块的版本方法
2018/10/16 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
如何使用PHP session
2015/04/21 面试题
运动会方队口号
2014/06/07 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
校本教研活动总结
2014/07/01 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
导游词之日月潭
2019/11/05 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python