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 学习之二 属性(html()与html(val))
Nov 25 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
Vue关于组件化开发知识点详解
May 13 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
ThinkPHP模型详解
2015/07/27 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
vue项目实战总结篇
2018/02/11 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
python中如何写类
2020/06/29 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
家长给学校的建议书
2014/05/15 职场文书
工地质量标语
2014/06/12 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
2015年材料员工作总结
2015/04/30 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫