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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
JavaScript运算符小结
Jun 03 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
angular directive的简单使用总结
May 24 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
JavaScript 作用域实例分析
Oct 02 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
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
php常用数组函数实例小结
2016/12/29 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
javascript 一些用法小结
2009/09/11 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
python中的set实现不重复的排序原理
2018/01/24 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
岗位明星事迹材料
2014/05/18 职场文书
法制演讲稿
2014/09/10 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
旅游安全责任协议书
2016/03/22 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript