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 Accessor实现说明
Dec 06 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
vue路由插件之vue-route
Jun 13 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
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
PHP 地址栏信息的获取代码
2009/01/07 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
php中explode与split的区别介绍
2012/10/03 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
python批量提取word内信息
2015/08/09 Python
浅谈Python处理PDF的方法
2017/11/10 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Python实现京东秒杀功能代码
2019/05/16 Python
Django  ORM 练习题及答案
2019/07/19 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
师范大学音乐表演专业求职信
2013/10/23 职场文书
写好求职信第一句话的技巧
2013/10/26 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
小学校本培训方案
2014/06/06 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS