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 相关文章推荐
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
vue webuploader 文件上传组件开发
Sep 23 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
微信支付开发发货通知实例
2016/07/12 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
python 阶乘累加和的实例
2019/02/01 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Python实现验证码识别
2020/06/15 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
NFL官方在线商店:NFLShop
2020/07/29 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
入党积极分子思想汇报
2014/01/02 职场文书
优良学风班总结材料
2014/02/08 职场文书
公司档案管理制度
2015/08/05 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
python如何读取和存储dict()与.json格式文件
2022/06/25 Python