iterable字面意思:可迭代的,可重复的 、

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

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

for ... of循环是ES6引入的新的语法,

for ... of循环遍历集合,用法如下:

  1. var a = ['A', 'B', 'C'];
  2. var s = new Set(['A', 'B', 'C']);
  3. var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
  4. for (var x of a) { // 遍历Array
  5. console.log(x);
  6. }
  7. for (var x of s) { // 遍历Set
  8. console.log(x);
  9. }
  10. for (var x of m) { // 遍历Map
  11. console.log(x[0] + '=' + x[1]);
  12. }

你可能会有疑问,for ... of循环和for ... in循环有何区别?

for ... in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后,for ... in循环将带来意想不到的意外效果:

  1. var a = ['A', 'B', 'C'];
  2. a.name = 'Hello';
  3. for (var x in a) {
  4. console.log(x); // '0', '1', '2', 'name'
  5. }

for ... in循环将把name包括在内,但Arraylength属性却不包括在内。

for ... of循环则完全修复了这些问题,它只循环集合本身的元素:

  1. var a = ['A', 'B', 'C'];
  2. a.name = 'Hello';
  3. for (var x of a) {
  4. console.log(x); // 'A', 'B', 'C'
  5. }

这就是为什么要引入新的for ... of循环。

然而,更好的方式是直接使用iterable内置的forEach方法,它接收一个函数,每次迭代就自动回调该函数。以Array为例:

  1. a.forEach(function (element, index, array) {
  2. // element: 指向当前元素的值
  3. // index: 指向当前索引
  4. // array: 指向Array对象本身
  5. console.log(element + ', index = ' + index);
  6. });

注意,forEach()方法是ES5.1标准引入的,你需要测试浏览器是否支持。

SetArray类似,但Set没有索引,因此回调函数的前两个参数都是元素本身:

  1. var s = new Set(['A', 'B', 'C']);
  2. s.forEach(function (element, sameElement, set) {
  3. console.log(element);
  4. });

Map的回调函数参数依次为valuekeymap本身:

  1. var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
  2. m.forEach(function (value, key, map) {
  3. console.log(value);
  4. });

如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以忽略它们。例如,只需要获得Arrayelement

  1. var a = ['A', 'B', 'C'];
  2. a.forEach(function (element) {
  3. console.log(element);
  4. });

js中的iterable用法的更多相关文章

  1. [转载]js中return的用法

    一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return;  在大多数情况下,为事件处理函 ...

  2. js中this的用法

    经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay

  3. JQuery之append和appendTo的区别,还有js中的appendChild用法

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

  4. JS中event.keyCode用法及keyCode对…

    js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...

  5. 浅谈JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  6. JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  7. JS中的this用法详解

    随着对js的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象.闭包.原型链继承等等,而这其中肯定包含令你现在或者曾经费解的this,如果你不把心一横,花点时间还真不明白这个this的用 ...

  8. JS中document.createElement()用法及注意事项

    今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 ...

  9. JS中$含义和用法

    原博客:https://www.cnblogs.com/jokerjason/p/7404649.html$在JS中本身只是一个符号而异,在JS里什么也不是.但在JS应用库JQUERY的作者将之做为一 ...

随机推荐

  1. ELK日志分析平台环境部署 (yum安装)

    前言:通常体质被分散存储在不同的设备上面,在庞大的服务器集群中,我们需要集中化的管理,日志的统计和检索,一般我们使用grep和awk,wc等linux命令虽然能够实现检索和统计,但是呢,对于要求更高的 ...

  2. Python学习(十九) —— 前端基础之HTML

    转载自:http://www.cnblogs.com/liwenzhou/p/7988087.html 一.HTML介绍 1.Web服务本质 import socket sk = socket.soc ...

  3. 今天开始学习php,粘一些重点放这以便查看记忆。

    1.PHP的变量用$定义. PHP 将所有全局变量存储在一个名为 $GLOBALS[index] 的数组中. index 保存变量的名称.这个数组可以在函数内部访问,也可以直接用来更新全局变量. 2. ...

  4. form表单利用iframe高仿ajax

    html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. window下用taskkill杀死进程

    TASKKILL [/S system [/U username [/P [password]]]] { [/FI filter] [/PID processid | /IM imagename] } ...

  6. webstrom中如何将npm菜单调出?

    在package.json文件上点击右键>>>点击show npm scripts就可以了.如图:

  7. CSS规范 - 分类方法

    CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”.“特殊型样式”.“皮肤型 ...

  8. Web界面实现数据库增删改查过程

    实现方法:JSP+Servlet+JavaBean 基本实现思想:jsp文件为显示界面,包括增删改查四个界面,然后使用form或者href超链接的方法将网页获得的值传到Servlet中的方法里:而se ...

  9. Booksort POJ - 3460 (IDA*)

    Description The Leiden University Library has millions of books. When a student wants to borrow a ce ...

  10. python爬取今日头条关键字图集

    1.访问搜索图集结果,获得json如下(右图为data的一条的详细内容).页面以Ajax呈现,每次请求20个图集,其中 title --- 图集名字 artical_url --- 图集的地址 cou ...