一.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. CSS3中transform,transition和animation的简单介绍和使用方法演示样例

    transform是一个属性,本质跟width,height是一样的,加上transform也就是为类添加一个变换属性. transition是一个属性.它是用来控制过渡效果的,由于用transfor ...

  2. PHP安全编程之php.ini配置

    1.register_globals=On <?php//ex1.php  if(check_admin())  {  $is_admin=true;  }  if($is_admin)  {  ...

  3. Symfony 如何使用ckeditor

    首先: 1)加载以下两个bundle "egeloen/ckeditor-bundle": "^4.0","helios-ag/fm-elfinder ...

  4. java_Ninja实战过程

    使用Ninja马上两年了,之前多多少少的都是跟着项目模仿着写,今年上半年准备从一个小项目开始从始至终走一遍; 首先官网:http://www.ninjaframework.org; github: h ...

  5. sprintf在51单片机中的使用

    sprintf在51单片机中的使用 unsigned char ch20_str[4]; unsigned char ch2o_m_str[6]; ch2o = 123; ch2o_m = 23456 ...

  6. python基础20 -------python中的异常处理

    一.python程序中的会出现的错误. 1.语法错误:这种错误根本过不了python解释器的语法检测阶段,必须在程序执行之前进行改正. 2.逻辑错误:这种错误虽然过了语法检测阶段但是程序在执行的过程中 ...

  7. python基础14 ---函数模块4(configparser模块)

    configparser模块 一.configparser模块 1.什么是configparser模块:configparser模块操作配置文件,配置文件的格式与windows ini和linux的c ...

  8. IImage--factory

    <?php /* 实例4 */ /* 使用工厂类解析图像工作 */ interface IImage { function getWidth(); function getHeight(); f ...

  9. 剑指offer之 从上往下打印二叉树

    import java.util.ArrayList; import java.util.LinkedList; /** public class TreeNode { int val = 0; Tr ...

  10. Android平台及其架构(部分转载)

    一.Android的系统架构 1.      应用程序 同Android系统一起发布的核心应用程序,如email 客户端,SMS 短消息程序,日历,地图,浏览器,联系人管理程序等. 这些应用程序都是用 ...