一.Iterator(它是一种接口,为各种不同的数据结构提供统一的访问机制。Iterator 接口主要供for...of消费)

默认Iterator接口(默认的 Iterator 接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”(iterable)。Symbol.iterator属性本身是一个函数)

  • 部署Iterator 接口:
const obj = {
[Symbol.iterator] : function () {  //Symbol需要使用中括号括起来
return {
next: function () {
return {
value: 1,
done: true
};
}
};
}
};
  • 默认原始具有Iterator 接口的数据结构:Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象
  • 对于类似数组的对象(存在数值键名和length属性),部署 Iterator 接口,有一个简便方法,就是Symbol.iterator方法直接引用数组的 Iterator 接口。
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
// 或者
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator]; [...document.querySelectorAll('div')] // 可以执行了

二、For...of(循环遍历具有Symbol.iterator属性的数据结构:Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象及部署了Symbol.iterator属性的数据结构)

for...of循环调用遍历器接口,数组的遍历器接口只返回具有数字索引的属性。

let arr = [3, 5, 7];
arr.foo = 'hello'; for (let i in arr) {
console.log(i); // "0", "1", "2", "foo"
} for (let i of arr) {
console.log(i); // "3", "5", "7"
}

For...of可以与breakcontinuereturn配合使用

for (var n of fibonacci) {
if (n > 1000)
break;
console.log(n);
}

ES6学习之Iterator和For...of循环的更多相关文章

  1. es6 语法 (iterator和for...of循环)

    Iterator遍历器 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据 ...

  2. ES6 之 Set数据结构和Map数据结构 Iterator和for...of循环

    ECMAScript 6 入门 Set数据结构 基本用法 ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. va ...

  3. es6笔记(6) Iterator 和 for...of循环

    概要 js中的数组.对象,加上ES6中增加的Map.Set四种数据集合. Iterator提供了一种机制,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍 ...

  4. ES6的新特性(14)——Iterator 和 for...of 循环

    Iterator 和 for...of 循环 Iterator(遍历器)的概念 JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Ma ...

  5. ES6(Iterator 和 for...of 循环)

    Iterator 和 for...of 循环 1.什么是 Iterator 接口 Iterator 接口功能:用一种相同办法的接口让不同的数据结构得到统一的读取命令的方式 2.Iterator的基本用 ...

  6. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  7. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  8. JS&ES6学习笔记(持续更新)

    ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...

  9. 14 Iterator和for...of循环

    Iterator和for...of循环 首先 Iterator 是一个接口. 标准是 function makeIterator(array) { var nextIndex = 0; return ...

随机推荐

  1. 怎样解决KEIL 5 编译KEIL4的带有RTX系统的project解决方法

        1.笔者个人对KEIL5与KEIL4的比較             相较于KEIL 5 的"华丽",笔者还是喜欢KEIL4的"内敛".主要也还是习惯了, ...

  2. linux 中解压与压缩 常用操作详细讲解

    平时有时候 会在服务器进行一些文件的操作,比如安装一些服务与软件等等,都有解压操作,一般在 导出一些简单的服务器文件,也是先压缩后再导出,因此,在这里根据平时用到解压与压缩命令的频率来记录下: 1.最 ...

  3. SAP ATP邏輯可用性檢查

    [转http://tqmeng.blog.163.com/blog/static/169263916201162002414612/]SAP ATP邏輯可用性檢查1.可用性檢查群組OVZ2主要用於檢查 ...

  4. cloudera impala编译 安装 配置 启动

    无论是采用GDB调试impala或者尝试修改impala源码,前提都是需要本地环境编译impala,这篇文章详细的分享一下impala编译方法以及编译过程遇到的棘手的问题: 前言: impala官方的 ...

  5. MySQL——视图

    核心知识点: 1.视图定义 2.视图的好处:安全.节约资源.操作简单,数据的同一性 3.视图的基本操作 一.视图概论 视图是一个虚拟表,其内容由查询定义. 同真实的表一样,视图包含一系列带有名称的列和 ...

  6. 第12条:不要在for和while循环后面写else块

    核心知识点: (1)一般的if/else是前面不执行,后面才执行,循环下面的else是前面执行完后面才会执行,如果是break打断也不会执行.循环为空或False也不执行. (2)try/expect ...

  7. CSS3环形动画菜单

    在线演示 本地下载

  8. Linux内核源码中的likely和unlikely释疑【转】

    本文转载自:https://my.oschina.net/armsky/blog/15320 ikely()与unlikely()在2.6内核中,随处可见,那为什么要用它们?它们之间有什么区别呢? 首 ...

  9. java入门了解06

    1.进程 :     (一)正在执行的程序称作为一个进程. 进程负责了内存空间的划分. (二)问题: windows号称是多任务的操作系统,那么windows是同时运行多个应用程序吗? 从宏观的角度: ...

  10. Linux课程---4、Linux目录结构及常用命令(目录结构)

    Linux课程---4.Linux目录结构及常用命令(目录结构) 一.总结 一句话总结: 家目录:./root:root用户的家目录 能执行的程序:./bin:所有用户都能执行的程序:./sbin:只 ...