一.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. 基于Spring框架的Shiro配置(转发:http://kdboy.iteye.com/blog/1103794)

    一.在web.xml中添加shiro过滤器 <!-- Shiro filter--> <filter> <filter-name>shiroFilter</f ...

  2. 网络的分层协议总结(转发:https://www.cnblogs.com/Zhang-wj/p/5907534.html)

    网络的分层协议总结 OSI七层模型OSI 中的层            功能                                                        TCP/IP ...

  3. 深度问答之提取语料,导入了yml模块

    根据目录下的yml文件循环创建同名文件夹,并从yml文件读取问答并给每个文件夹写入question和answer文件 #!/usr/bin/env python # coding:utf8 # aut ...

  4. MYSQL:基础——触发器

    MYSQL基础——触发器 引入触发器 什么是触发器 如果你想要某条语句(或某些语句)在事件发生时自动执行.比如: 每当订购一个产品时,都从库存数量中减去订购的数量:无论何时删除一行,都在某个存档表中保 ...

  5. WPF之基础概念

    一:App环境承载 我们都知道Console和WinForm程序的入口都是Main函数,WPF同样也不例外,好了,我们就新建一个WPF应用程序,VS会给我们自动生成一个MainWindow.xaml和 ...

  6. 【leetcode刷题笔记】Valid Number

    Validate if a given string is numeric. Some examples:"0" => true" 0.1 " => ...

  7. shell 定义变量

    注意定义变量的语法: var="ABC" 等号之间不能有空格,否则会报错

  8. PostgreSQL基本操作

    列出当前数据库所有表 \dt 列出表名 SELECT tablename FROM pg_tables; WHERE tablename NOT LIKE 'pg%' AND tablename NO ...

  9. 剑指offer之 从尾到头打印链表

    package Problem5; import java.util.Stack; //首先定义链表结构class LinkNode{ LinkNode next; int node_value;} ...

  10. java深入探究05

    通讯录小程序 需求说明: 功能: 添加联系人 修改联系人 删除联系人 查询所有联系人 要求: console控制 数据保存在xml 1.创建联系人类 /** * 联系人实体对象 * @author A ...