文章目录

1. 基本语法
2. Iterator 接口与 Generator 函数

MDN : 处理集合中的每个项是很常见的操作。JavaScript 提供了许多迭代集合的方法，从简单的for循环到map()和filter()。迭代器和生成器将迭代的概念直接带入核心语言，并提供了一种机制来自定义for…of循环的行为。

JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。

1. 基本语法

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

Iterator 的作用有三个：

为各种数据结构，提供一个统一的、简便的访问接口
使得数据结构的成员能够按某种次序排列
ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费

function makeIterator(array) {var nextIndex = 0;return {next: function() {return nextIndex < array.length ?{value: array[nextIndex++], done: false} :{value: undefined, done: true};}};
}
var it = makeIterator(['a', 'b']);
it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }

ES6 规定，默认的Iterator接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。

const obj = {[Symbol.iterator] : function () {return {next: function () {return {value: 1,done: true};}};}
};

上面代码中，对象obj是可遍历的（iterable），因为具有Symbol.iterator属性。凡是部署了Symbol.iterator属性的数据结构，就称为部署了遍历器接口。调用这个接口，就会返回一个遍历器对象。

原生具备 Iterator 接口的数据结构如下：

Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

对于原生部署 Iterator接口的数据结构，不用自己写遍历器生成函数，for...of循环会自动遍历它们。除此之外，其他数据结构（主要是对象）的Iterator接口，都需要自己在Symbol.iterator属性上面部署，这样才会被for...of循环遍历。

class RangeIterator {constructor(start, stop) {this.value = start;this.stop = stop;}[Symbol.iterator]() { return this; }next() {var value = this.value;if (value < this.stop) {this.value++;return {done: false, value: value};}return {done: true, value: undefined};}
}function range(start, stop) {return new RangeIterator(start, stop);
}for (var value of range(0, 3)) {console.log(value); // 0, 1, 2
}

// 类似数组的对象
let iterable = {0: 'a',1: 'b',2: 'c',length: 3,[Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {console.log(item); // 'a', 'b', 'c'
}

2. Iterator 接口与 Generator 函数

Symbol.iterator()方法几乎不用部署任何代码，只要用 yield 命令给出每一步的返回值即可。

let myIterable = {[Symbol.iterator]: function* () {yield 1;yield 2;yield 3;}
};
[...myIterable] // [1, 2, 3]// 或者采用下面的简洁写法let obj = {* [Symbol.iterator]() {yield 'hello';yield 'world';}
};for (let x of obj) {console.log(x);
}
// "hello"
// "world"

【ES6(2015)】Iterator相关推荐

【ES6(2015)】Module模块
文章目录 1. 模块化的发展 2. export 3. as 4. export default 5. import 1. 模块化的发展随着前端的发展,web技术日趋成熟,js功能越来越多,代码量也 ...
【ES6(2015)】Map
文章目录 1. 基本语法 2. 遍历方式 3. WeekMap ES6 提供了 Map 数据结构.它类似于对象,也是键值对的集合,但是"键"的范围不限于字符串,各种类型的值(包括对 ...
【ES6(2015)】Reflect
文章目录 1. 设计目的 2. 常用方法 Reflect对象与Proxy对象一样,也是ES6 为了操作对象而提供的新 API. 1. 设计目的将Object属于语言内部的方法放到Reflect上 l ...
【ES6(2015)】Proxy
文章目录 1. 基本语法 2. 拦截操作场景 3. 常用操作在 ES6 标准中新增的一个非常强大的功能是 Proxy,它可以自定义一些常用行为如查找.赋值.枚举.函数调用等.通过 Proxy 这个名 ...
【ES6(2015)】Number
文章目录 1. 二进制与八进制 2. 新增方法 3. Math扩展 1. 二进制与八进制 ES5 中进制转换: const a = 5 console.log(a.toString(2)) // 转换 ...
【ES6(2015)】RegExp
文章目录 1. y修饰符 2. u修饰符 1. y修饰符 ES6为正则表达式添加了y修饰符,叫做"粘连"(sticky)修饰符. y修饰符的作用与g修饰符类似,也是全局匹配,后一次 ...
【ES6(2015)】String
文章目录 1. Unicode表示法 2. 遍历器接口 3. 模板字符串 4. 扩展方法 1. Unicode表示法 ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其 ...
【ES6(2015)】Set
文章目录 1. 基本语法 2. 遍历方式 3. WeakSet 在 JavaScript 里通常使用Array或Object来存储数据. 在 ES6 中,新增了数据结构 Set 和 Map,它们分别对 ...
【ES6(2015)】Symbol
文章目录 1. 声明方式 2. Symbol.for() 3. Symbol.keyFor() 4. 作为属性名 5. 属性遍历 6. 消除魔术字符串 ES6 引入了一种新的原始数据类型 Symbol ...

【ES6(2015)】Iterator

文章目录

1. 基本语法

2. Iterator 接口与 Generator 函数

【ES6(2015)】Iterator相关推荐

最新文章

热门文章