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 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
js constructor的实际作用分析
Nov 15 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 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
无限级别菜单的实现
2006/10/09 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
php去掉文件前几行的方法
2015/07/29 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
php自定义时间转换函数示例
2016/12/07 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中isnumeric()方法的使用简介
2015/05/19 Python
批处理与python代码混合编程的方法
2016/05/19 Python
用Python读取几十万行文本数据
2018/12/24 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
创业计划书如何吸引他人眼球
2014/01/10 职场文书
自荐书范文范例
2014/02/13 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
淘宝好评语句大全
2014/12/31 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书