本文摘要:http://www.liaoxuefeng.com/

遍历Array可以采用下标循环,遍历MapSet就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,ArrayMapSet都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历。

for ... of循环是ES6引入的新的语法,请测试你的浏览器是否支持:

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数组实际上也是一个对象,它的每个元素的索引被视为一个属性。

for ... in 遍历的数组里面的每个索引,而for ... of 遍历的是数组里面的每个元素。

当我们手动给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包括在内,但Arraylength属性却不包括在内。

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);
});

forEach

第一个参数: 集合中的元素/值

第二个参数: 集合中的索引/健/本身(set没有索引,只有值,所以这个参数也是元素)

第三个参数: 集合类型(Array,Map,Set)

iterable -------JavaScript的更多相关文章

  1. [Javascript] Manage Application State with Immutable.js

    Learn how Immutable.js data structures are different from native iterable Javascript data types and ...

  2. 理解 JavaScript 中的 for…of 循环

    什么是 for…of 循环 for...of 语句创建一个循环来迭代可迭代的对象.在 ES6 中引入的 for...of 循环,以替代 for...in 和 forEach() ,并支持新的迭代协议. ...

  3. 总结一下几个for循环常见用法和区别

    1.for循环//有人喜欢使用一个临时变量把长度缓存起来,说是数据量大时效果更好(我本人没有去验证) for(j = 0,len=arr.length; j < len; j++) { //执行 ...

  4. JavaScript学习笔记(六)——Map、Set与iterable

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  5. javascript中的iterable

    遍历Array可以采用下标循环,遍历Map和Set就无法使用下标.为了统一集合类型,ES6标准引入了新的iterable类型,Array.Map和Set都属于iterable类型. 具有iterabl ...

  6. 04.Javascript——入门一些方法记录之iterable

    遍历Array可以采用下标循环,遍历Map和Set就无法使用下标.为了统一集合类型,ES6标准引入了新的iterable类型,Array.Map和Set都属于iterable类型. 具有iterabl ...

  7. Iterable object of JavaScript

    数组是可迭代的,所以数组可以用于for of,字符串也是可迭代的,所以字符串也可以用作for of,那么,对象呢? 试一试: var somebody = { start:0, end:100 } f ...

  8. JavaScript判断、循环、Map、Set

     本文是笔者在看廖雪峰老师JavaScript教程时的个人总结      一些判断条件                 JavaScript把null.undefined.0.NaN和空字符串''视为 ...

  9. Javascript.ReactNative-2-javascript-syntax-in-react-native

    JavaScript Syntax in React Native Contents: Arrow Function Let+Const Default + Rest + Spread Destruc ...

随机推荐

  1. 设置Input标签Date默认值为当前时间

    需求:想设置Imput标签Date默认值为当前时间,通过JavaScript实现. <html> ...... <body> <input type="date ...

  2. 禁止tableview 像上滑动

    tableView有一个bounces属性.默认YES,所以tableView上下用力拉都会有弹性滑动,如下设置可以禁止,但是这样的话上下弹性都没了 而经常的需求是上方不要弹性,下方要弹性,可以用监听 ...

  3. JMeter - 如何在多个测试环境中运行多个线程组

    概述: 作为性能测试的一部分,我不得不为我们的应用程序提供各种用例/业务工作流程的性能测试脚本.当我设计我的性能测试脚本时,我将确保我有本文中提到的可重用测试脚本. JMeter - 如何创建可重用和 ...

  4. Vue中全局导入和按需导入的区别

    export {router} //按需导出 import {router} from './router' //按需导入路由模块 export default //全局导出store模块 store ...

  5. 6、python数据类型之元组(dict)

    字典字典的每个元素就是一个键值对,格式如下key:value{key1:value1,key2:value2,......} 1.创建 dict_eg = { "name":&qu ...

  6. git 脚本

    echo $PWD message=$1 content='.' if [ ! -n "$1" ] ;then message=`date` message=$message' 推 ...

  7. BZOJ 2462 [BeiJing2011]矩阵模板 矩阵哈希

    昨天卡了一天常数...然后发现吧$unsigned\space long\space long$改成$unsigned$就可以过了$qwq$ 先把每一行的前缀哈希求出,然后再竖着把每个前缀哈希值哈希起 ...

  8. 网络编程——TCP协议

    1.TCP程序概述 TCP是一个可靠的协议,面向连接的协议. 实现TCP程序,需要编写服务器和客户端,Java API为我们提供了java.net包,为实现网络应用程序提供类. ServerSocke ...

  9. 在myecplise中更新代码发布后没效果

    requestmapping指定路径不能访问: 重新发布,重新访问,清除缓存,重新访问,重启浏览器,清除缓存,重新访问,清除Tomcat相关目录,重新发布,重新访问……折腾了很久,可还是没有解决问题. ...

  10. java 多线程 Callable中的futrue模式

    java实现Callable接口中用到了future模式,所以实现了这个接口就看到了有返回值,那它的基本原理是什么鬼,往下看. 何为future模式? future模式有点类似于商品订单.在网上购物时 ...