JavaScript之iterable_动力节点Java学院整理


Posted in Javascript onJune 29, 2017

遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历。

for ... of循环是ES6引入的新的语法,请测试你的浏览器是否支持:

'use strict';
var a = [1, 2, 3];
for (var x of a) {
}
alert('你的浏览器支持for ... of');

for ... of循环遍历集合,用法如下:

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
  alert(x);
}
for (var x of s) { // 遍历Set
  alert(x);
}
for (var x of m) { // 遍历Map
  alert(x[0] + '=' + x[1]);
}

你可能会有疑问,for ... of循环和for ... in循环有何区别?

for ... in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后,for ... in循环将带来意想不到的意外效果:

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
  alert(x); // '0', '1', '2', 'name'
}
for ... in循环将把name包括在内,但Array的length属性却不包括在内。
for ... of循环则完全修复了这些问题,它只循环集合本身的元素:
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
  alert(x); // 'A', 'B', 'C'
}

这就是为什么要引入新的for ... of循环。

然而,更好的方式是直接使用iterable内置的forEach方法,它接收一个函数,每次迭代就自动回调该函数。以Array为例:

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
  // element: 指向当前元素的值
  // index: 指向当前索引
  // array: 指向Array对象本身
  alert(element);
});

注意,forEach()方法是ES5.1标准引入的,你需要测试浏览器是否支持。

SetArray类似,但Set没有索引,因此回调函数的前两个参数都是元素本身:

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
  alert(element);
});

Map的回调函数参数依次为valuekeymap本身:

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
  alert(value);
});

如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以忽略它们。例如,只需要获得Arrayelement

var a = ['A', 'B', 'C'];
a.forEach(function (element) {
  alert(element);
});
Javascript 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
在chrome中window.onload事件的一些问题
Mar 01 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
jquery实现手风琴效果
Nov 20 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 #Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 #Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 #Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 #jQuery
You might like
mysql建立外键
2006/11/25 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
python利用正则表达式提取字符串
2016/12/08 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
计算机应用应届生求职信
2014/07/12 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python