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 select(列表)的操作(取值/赋值)
Aug 06 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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
JpGraph php柱状图使用介绍
2011/08/23 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
10条php编程小技巧
2015/07/07 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python callable()函数用法实例分析
2018/03/17 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
应聘自荐信
2013/12/14 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
保洁员岗位职责
2015/02/04 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js
redis lua限流算法实现示例
2022/07/15 Redis