本文摘要: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. IE8浏览器总是无响应或卡死崩溃怎么办

    IE8浏览器总是无响应或卡死崩溃怎么办 2016-05-11 11:22:31 来源:百度经验 作者:qq675495787 编辑:Jimmy51 我要投稿 IE在打开某些网页的时候经常崩溃或无响应, ...

  2. dpkg dependency problems prevent configuration

    dpkg: dependency problems prevent configuration of cr3: cr3 depends on libpng12-0 (>= 1.2.13-4); ...

  3. jquery click嵌套 事件重复注册 多次执行的问题

    jquery click嵌套 事件重复注册 多次执行的问题 上面只是参考,我自己的解决方法是先使用unbind("click")解除事件然后再绑定新事件: $("#tes ...

  4. (转)Linux系统重要子目录及内容小结

    Linux系统重要子目录及内容小结 原文:http://blog.csdn.net/xiaolong361/article/details/52318834 1.首先来介绍下根目录下的一些重要目录含义 ...

  5. Linux网络编程函数

    1. Server端-socket/bind/listen/accept/read socket(AF_INET, SOCK_STREAM, 0); //指定端口,内核将端口上的数据转发给该socke ...

  6. 将MySQL转化为mysqli

    <?php/** * Created by PhpStorm. * User: 大神 * Date: 2017/7/24 * Time: 11:29 */ header('content-typ ...

  7. springboot相关的pom依赖文件

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  8. Golang: runnerw.exe: CreateProcess failed with error 216 (no message available)

    话说这个我应该遇到几次了 每次新项目都有这问题,我的记忆是金鱼的记忆吗? 好在这次隐约记起是包名的问题... 方法 修改包名为main

  9. 生产消费者模式与python+redis实例运用(中级篇)

    上一篇文章介绍了生产消费者模式与python+redis实例运用(基础篇),但是依旧遗留了一个问题,就是如果消费者消费的速度跟不上生产者,依旧会浪费我们大量的时间去等待,这时候我们就可以考虑使用多进程 ...

  10. 前端seo基础规范

    基本规范 TDK代码规范 A: 关键词,一般3~4个最好,要与当前页面内容相关(根据实际情况,不适宜过多堆积关键词): B: 杜绝不同URL的页面标题重复现象,作为搜索结果摘要的重要选择目标之一,一定 ...