迭代器和生成器 iterators and generators
- 转变: 迭代集合中的数据不需要再使用初始化变量作为索引的for循环,转而使用iterators对象来程序化的返回集合中下一个位置的项。
- 优点: iterators使得集合的操作变得更容易
- 高效处理数据的关键: 迭代器,数组方法,新增的集合类型(set,map)结合使用
- es6中iterators的身影: for-of循环, 扩展(…)运算符
the loop problem
let colors = ['red','yellow'];
for (let i = 0; i < colors.length; i++) {
const element = colors[i];
}
缺点: 循环嵌套之后复杂度就会增加,同时需要追踪多个索引变量。
what are iterators
迭代器是带有特殊接口的对象来程序化的返回下一位置的项。
所有的迭代器对象都带有next()方法,并返回一个包含两个属性的结果对象。
{
value: 代表下一个位置的值
done: 下面是否还有值可供迭代 true/false
}
原理:迭代器使用内部指针,来指向集合中某个值的位置,next()方法被调用时,返回下一位置的值。
例子: 在 ECMAScript 5 中创建一个迭代器:
function createInterator(items) {
var i = 0;
return {
next: function() {
var done = i >= items.length;
var value = !done ? items[i++] : undefined;
return {
done: done,
value: value
};
}
};
}
var interator = createInterator([1, 2, 3]);
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: 3, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"
// for all further calls
console.log(iterator.next()); // "{ value: undefined, done: true }"
以上示例中,根据 ECMAScript 5 规范模拟实现的迭代器还是有些复杂。
幸运的是,ECMAScript 6 中还提供了生成器,简化了迭代器对象创建的过程。
what are generators
生成器是返回迭代器的函数。
特点: function * ,同时还使用yield关键字。
原理:当执行流遇到yield语句时,该生成器就停止运转了,不会执行其他任何部分的代码,指导迭代器再次调用next()方法,yield再执行。
// 生成器 同样一个例子,使用生成器来创建迭代器就显得很简洁了
function* createInterator(items) {
for (let i = 0; i < items.length; i++) {
yield items[i];
}
}
// 调用生成器类似于调用函数,但是前者返回一个迭代器
var interator = createInterator([1, 2, 3]);
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: 3, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"
// for all further calls
console.log(iterator.next()); // "{ value: undefined, done: true }"
在该例子中,createInterator生成器函数被传入一个数组。在函数内部,一个循环正在执行并且把数组中的值返回给迭代器。当遇到yield时,循环就会停止,每次调用next()时,循环会继续执行直到再次遇到yield语句。
注意: yield 只能用在生成器内部。yield语句是无法跨越函数边界的。
// 生成器
function* createInterator(items) {
items.forEach(function(item){
// 语法错误
yield item + 1;
});
}
生成器的不同创建方法
生成器函数表达式 generator function expressions
let createInterator = function* (items) {
for (let i = 0; i < items.length; i++) {
yield items[i];
}
}
let iterator = createIterator([1, 2, 3]);
注意:无法使用箭头函数来创建生成器。
对象中的生成器方法 generator object methods
let o = {
createInterator:function* (items) {
for (let i = 0; i < items.length; i++) {
yield items[i];
}
},
// 或者
*createInterator(items) {
for (let i = 0; i < items.length; i++) {
yield items[i];
}
}
}
let iterator = o.createIterator([1, 2, 3]);
可迭代类型和for-of (iterables and for-of)
可迭代类型介绍
可迭代类型是指包含Symbol.iterator 属性的对象。
属于可迭代类型的对象: 数组,set,map,字符串 , 因为他们都有默认的迭代器
目的: 可迭代类型是为了es6新增的for-of循环而设计的
所有由生成器创建的迭代器都是可迭代类型,因为生成器在默认情况下会自赋值给 Symbol.iterator 属性。
for-of 介绍
优点: 完全不需要在集合中追踪索引,让你更专注于集合内容的操作
原理:for-lof 循环会在可迭代类型每次迭代执行后调用 next() 并将结果对象存储在变量中。循环会持续进行直到结果对象的 done 属性为 true。
let values = [1,2,3];
for (const num of values) {
console.log(num);
}
// 依次输出 1 2 3
过程: for-of循环会调用values数组的Symbol.iterator方法来获取迭代器iterator(Symbol.iterator 方法由幕后的 JavaScript 引擎调用)。之后再调用iterator.next()并将结果对象中的value属性值依次赋给num变量。当检测到结果对象中的done为true时,循环退出。
结论: 如果你只想简单的迭代数组或集合中的元素,那么 for-of 循环比 for 要更好。for-of 一般不容易出错,因为要追踪的条件更少。所以还是把 for 循环留给复杂控制条件的需求吧。
访问默认的迭代器 accessing the default iterator
你可以使用Symbol.iterator来访问对象默认的迭代器,like this:
let values = [1, 2, 3];
let iterator = values[Symbol.iterator]();
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: 3, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"
既然 Symbol.iterator 定义了默认的迭代器,你可以如下使用它来确定一个对象是否可迭代:
function isIterator(object) {
return typeof object[Symbol.iterator] === 'function';
}
console.log(isIterator([1,2,3])); // true
console.log(isIterator('hello')); // true
console.log(isIterator(new Map())); // true
console.log(isIterator(new Set())); // true
console.log(isIterator(new WeakMap())); // false
console.log(isIterator(new WeakSet())); // false
isIterator() 函数可以简单的查看对象是否有默认的并且类型为函数的迭代器。for-of在执行前也会做相似的检查。
创建可迭代类型 creating iterables
情景: 开发者自定义的对象默认是不可迭代类型,但是你可以为他们创建Symbol.iterator属性并指定一个生成器来使这些对象可迭代。
let collection = {
items: [],
*[Symbol.iterator](){
for (let item of this.items) {
yield item;
}
}
}
collection.items.push(1);
collection.items.push(2);
collection.items.push(3);
for (let item of collection) {
console.log(item);
}
// 依次输出 1 2 3
现在你已经见识了数组默认迭代器的用法,然而 ECMAScript 6 还内置了许多迭代器使得操作集合中的数据更加轻松。
内置的迭代器 built-in iterators
集合迭代器 collection iterators
ECMAScript 6 内置了三种类型的集合对象:数组,map 和 set 。它们都有如下内置的迭代器供你浏览数据。
- entries() 返回一个数据集为集合中的键值对的迭代器
- values() 。。。。。。。。。。。。值的。。。。。
- keys() 。。。。。。。。。。。。键的。。。。。
entries() 迭代器
规则:
- 数组 键是索引
- set 键和值相同
- map 正常返回每一项
let data = new Map();
data.set("title", "hello");
data.set("content", "nihao");
for (const entry of colors.entries()) {
console.log(entry);
}
for (const entry of tracking.entries()) {
console.log(entry);
}
for (const entry of data.entries()) {
console.log(entry);
}
输出:
[0, "red"]
[1, "yellow"]
[12, 12]
[23, 23]
["title", "hello"]
["content", "nihao"]
values() 迭代器
返回集合中每一项的值。
let color = ["red", "yellow"];
let tracking = new Set([12, 23]);
let data = new Map();
data.set("title", "hello");
data.set("content", "nihao");
for (const value of colors.values()) {
console.log(value);
}
for (const value of tracking.values()) {
console.log(value);
}
for (const value of data.values()) {
console.log(value);
}
输出:
"red"
"yellow"
12
23
"hello"
"nihao"
keys() 迭代器
返回集合中每一项的键。
let color = ["red", "yellow"];
let tracking = new Set([12, 23]);
let data = new Map();
data.set("title", "hello");
data.set("content", "nihao");
for (const key of colors.keys()) {
console.log(key);
}
for (const key of tracking.keys()) {
console.log(key);
}
for (const key of data.keys()) {
console.log(key);
}
输出:
0
1
12
23
"title"
"content"
集合类型的默认迭代器 default iterators for collection types
规则:
- 数组和set默认values()方法
- map默认entries() 方法
let color = ["red", "yellow"];
let tracking = new Set([12, 23]);
let data = new Map();
data.set("title", "hello");
data.set("content", "nihao");
// 等效于调用 colors.values()
for (const value of colors) {
console.log(value);
}
// 等效于调用 tracking.values()
for (const value of tracking) {
console.log(value);
}
// 等效于调用 data.entries()
for (const entry of data) {
console.log(entry);
}
输出:
"red"
"yellow"
12
23
["title", "hello"]
["content", "nihao"]
解构与for-of循环 destructuring and for-of loops Map 构造函数的默认行为有助于在 for-of 循环中使用解构。如下所示:
let data = new Map();
data.set("title", "hello");
data.set("content", "nihao");
for (const [key, value] of data) {
console.log(key + "=" + value);
}
字符串迭代器 string iterators
ECMAScript 5原理:对字符串启用了方括号语法来访问字符(例如,text[0] 可以获得该字符串中的首个字符,等等)。
方括号语法访问的是编码单元(code unit)而非字符本身,所以当获取双字节字符时会有意想不到的结果。
双字节字符会被当做两个编码单元对待。
var message = "A ð ®· B";
for (let i = 0; i < message.length; i++) {
console.log(message[i]);
}
输出:
A
(blank)
(blank)
(blank)
(blank)
B
ECMAScript 6: 目标是完全支持 Unicode,所以字符串的默认迭代器就是为了解决字符的迭代问题而做的努力。
字符串默认迭代器作用的是字符本身而非编码单元。
var message = "A ð ®· B";
for (const c of message) {
console.log(c);
}
输出:
A
(blank)
ð ®·
(blank)
B
NodeList的迭代器 NodeList iterators
文档对象模型(DOM)中包含了一个 NodeList 类型用来表示一些 DOM 元素的集合。
在ECMAScript6中使用for-of循环或在任何对象默认的迭代器的内部来迭代NodeList
var divs = document.getElementsByTagName('div');
for (const div of divs) {
console.log(div.id);
}
扩展运算符和非数组可迭代类型 the spread operator and nonarray iterables
使用扩展运算符将 set 转换为数组:
let set = new Set([1,2,3,4,3,3,2,5]),
array = [...set];
console.log(array);
使用扩展运算符将 map 转换为数组:
let map = new Map([['name','kk'],['age',23]]),
array = [...map];
console.log(array);
既然扩展运算符可以用在任意的可迭代类型上,那么它就成为了将可迭代类型转换为数组最简单的办法。你可以将字符串和浏览器中的 NodeList 对象分别转换为包含字符(不是编码单元)或 DOM 节点的数组。
迭代器高级用法 advanced iterator functionality
向迭代器传入参数 passing arguments to iterators
原理: 当你向next方法传入参数时,生成器使用该参数作为yield语句的值。
function* createIterator() {
let first = yield 1;
let second = yield first + 2; // 4 + 2
yield second + 3; // 5 + 3
}
let iterator = createIterator();
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next(4)); // "{ value: 6, done: false }"
console.log(iterator.next(5)); // "{ value: 8, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"
首次调用next()有些特殊,传给他的任何参数都会被忽略。因为传给next()的参数是作为已返回的yield语句的值,那么首次调用传给 next() 的参数必须要在返回首个 yield 语句之前可供访问。显然这是不可能的,所以没有理由给首次调用的 next() 方法传参。
如果考虑生成器函数内部在每次运行时都执行了哪些代码,思路可能会清晰一些。图片用颜色区分了每次 yield 之前代码的执行情况。
在迭代器中抛出错误 throwing errors in iterators
function* createIterator() {
let first = yield 1;
let second = yield first + 2; // 4 + 2 抛出错误
yield second + 3; // 不执行
}
let iterator = createIterator();
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next(4)); // "{ value: 6, done: false }"
console.log(iterator.throw(new Error("boom"))); // 由生成器抛出错误
这种中断代码执行的行为类似于直接抛出错误
使用try-catch捕捉错误
function* createIterator() {
let first = yield 1;
let second;
try {
second = yield first + 2; // yield first + 2 throw error 并且迭代器继续执行
} catch (error) {
second = 6; // 捕捉到错误,给second赋其他值
}
yield second + 3;
}
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next(4)); // "{ value: 6, done: false }"
console.log(iterator.throw(new Error("boom"))); // "{ value: 9, done: false }"
console.log(iterator.next()); // "{value: undefined, done: true}"
throw() 指示迭代器继续执行的同时并抛出错误。至于这些指令如何处理,这就由生成器内部的代码来决定。
包含return语句的生成器 generator return statements
作用:使用return语句让生成器函数提前执行完毕并针对next的调用来指定一个返回值。
原理:生成器会将return语句的出现判断为所有任务已经处理完毕,done被赋值为true。
function* createGenerator() {
yield 1;
yield 2;
return;
yield 3; // 不可达的
}
let iterator = createGenerator();
iterator.next(); // { value: 1, done : false}
iterator.next(); // { value: 2, done : false}
iterator.next(); // { value: undefined, done : true}
iterator.next(); // { value: undefined, done : true}
指定一个返回值来赋给结果对象中的value属性:例如:
function* createGenerator() {
yield 1;
yield 2;
return 'i`m back'; // 指定的返回值
yield 3; // 不可达的
}
let iterator = createGenerator();
iterator.next(); // { value: 1, done : false}
iterator.next(); // { value: 2, done : false}
iterator.next(); // { value: 'i`m back', done : true}
iterator.next(); // { value: undefined, done : true}
// 任何指定的返回值都只能被结果对象使用一次。所以value为undefined
生成器代理 delegating generators
用法: 生成器可以使用 yield 和星号(*)这种特殊形式来代理其它生成器。
例如:
function* createNumberGenerator() {
yield 1;
yield 2;
}
function* createColorGenerator() {
yield "red";
yield "yellow";
}
function* createCombinedGenrator() {
yield* createNumberGenerator;
yield* createColorGenerator;
yield true;
}
let iterator = createCombinedGenrator();
iterator.next(); // { value: 1,done: false}
iterator.next(); // { value: 2,done: false}
iterator.next(); // { value: 'red',done: false}
iterator.next(); // { value: 'yellow',done: false}
iterator.next(); // { value: true,done: false}
iterator.next(); // { value: undefined,done: true}
从迭代器返回的值来看,他等价于只使用了一个迭代器并返回了所有的值。
进一步使用生成器返回的值处理复杂的任务,例如:
function* createNumberGenerator() {
yield 1;
return 2;
}
function* createRepeatGenerator(count) {
for (let i = 0; i < count; i++) {
yield `repeat${count}`
}
}
function* createCombinedGenrator() {
let result = yield* createNumberGenerator;
yield result; // 2 显式添加了额外的 yield 语句来输出 createNumberIterator() 生成器的返回值。
yield* createRepeatGenerator(result);
yield true;
}
let iterator = createCombinedGenrator();
iterator.next(); // { value: 1,done: false}
iterator.next(); // { value: 2,done: false}
iterator.next(); // { value: 2,done: false}
iterator.next(); // { value: 'repeat2',done: false}
iterator.next(); // { value: 'repeat2',done: false}
iterator.next(); // { value: true,done: false}
iterator.next(); // { value: undefined,done: true}
运行异步任务 asynchronous task running
异步操作的传统做法是在它结束之后调用回调函数。例如,考虑如下 Node.js 读取文件的代码:
let fs = require("fs");
fs.readFile("readme.md", function(error, res) {
if (error) throw error;
doSomethingWith(res);
console.log("done");
});
一个简单的任务运行器 a simple task runner
因为 yield 可以中断执行,并在继续运行之前等待 next() 方法的调用,你可以不使用回调函数来实现异步调用。首先,你需要一个函数来调用生成器以便让迭代器开始运行,例如这样:
function runTask(task) {
// 创建一个迭代器
let taskIterator = task();
// 任务开始运行,并且把返回的结果赋值给result
let result = taskIterator.next();
// 递归函数持续调用next方法直到result的返回值的done为true就停止递归
function step() {
if (!result.done) {
result = taskIterator.next();
step();
}
}
// 开始递归执行任务
step();
}
runTask(function*() {
console.log(1);
yield;
console.log(2);
yield;
console.log(3);
});
附加数据的任务运行器 task running with data
function runTask(task) {
let taskIterator = task();
let result = taskIterator.next();
function step() {
if (!result.done) {
// 让数据在yield之间流动只需要给next传入参数
result = taskIterator.next(result.value);
step();
}
}
step();
}
runTask(function *() {
let value = yield 1;
console.log(value); // 1
value = yield value + 3;
console.log(value); // 4
});
异步任务运行期 asynchronous task runner
标识异步操作的方法:
function fetchData() {
return function(callback) {
callback(null, "hi");
};
}
可以使用延迟函数的执行以将它改造为异步函数,例如:
function fetchData() {
return function(callback) {
setTimeout(() => {
callback(null, "hi");
}, 30);
};
}
将任务运行器改造成包含异步操作的函数,例如:
function runTask(task) {
// 创建迭代器
let taskIterator = task();
// 任务开始执行
let result = taskIterator.next();
// 递归调用next
function step() {
// 如果任务未完成
if (!result.done) {
if (typeof result.value === "function") {
result.value(function(err, data) {
if (err) result = task.throw(err);
result = taskIterator.next(data);
step();
});
} else {
result = taskIterator.next(result.value);
step();
}
}
}
// 开始递归
step();
}
这样这个任务运行器就做好了处理异步任务的准备了。再来看读取文件:
function readFile(filename) {
return function(callback) {
fs.readFile(filename, callback);
};
}
readfile() 方法接收 filename 参数,并返回一个内部调用回调函数的函数。该回调函数会直接传给 fs.readFile() 方法并在异步方法结束后执行。你可以像下面这样使用 yield 来运行这个任务:
runTask(function*() {
let contents = yield readFile("readme.md");
doSomthingWith(contents);
console.log("done");
});
优点:在灭于显示的书写回调函数的同时实现了异步的readFile操作。
只要包含异步操作的函数和上述 fs.readFile() 接口一致,你就可以使用该例来书写从视觉上认为是同步的逻辑。
参考书籍:《Understanding ECMAScript 6》
https://www.gitbook.com/book/oshotokill/understandinges6-simplified-chinese/details