在别的语言中,从使用 for 循环转变到使用迭代器对象。for 循环需要初始化变量以便追踪集合内的位置,而迭代器则以编程方式返回集合中的下一个项。新增的 for-of 与它协同工作,扩展运算符( ... )也使用了。
8.1 循环的问题
var colors = ["red", "green", "blue"];
for (var i = 0, len = colors.length; i < len; i++) {
console.log(colors[i]);
}
缺点:它被嵌套使用并要追踪多个变量时,情况就会变得非常复杂。
8.2 何为迭代器
- 所有的迭代器对象都拥有 next() 方法,会返回一个结果对象。该结果对象有两个属性:对应下一个值的 value ,以及一个布尔类型的 done ,其值为 true 时表示没有更多值可供使用。
- 迭代器持有一个指向集合位置的内部指针,每当调用了 next() 方法,迭代器就会返回相应的下一个值。
function createIterator(items) {
var i = 0;
return {
next: function() {
var done = (i >= items.length);
var value = !done ? items[i++] : undefined;
return {
done: done,
value: value
};
}
};
}
var iterator = createIterator([1, 2, 3]);
8.3 何为生成器?
生成器( generator )是能返回一个迭代器的函数。。生成器函数由放在 function 关键字之后的一个星号( * )来表示,并能使用新的 yield 关键字。 yield 表示迭代器在被 next() 方法调用时应当按顺序返回的值。
function *createIterator(items) {
for (let i = 0; i < items.length; i++) {
yield items[i];
}
}
let iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
每当遇到 yield ,循环就会停止;而每当iterator 上的 next() 方法被调用,循环就会再次执行到 yield 语句处。
yield 关键字只能用在生成器内部,用于其他任意位置都是语法错误,即使在生成器内部的函数中也不行
function *createIterator(items) {
items.forEach(function(item) {
// 语法错误
yield item + 1;
});
}
尽管yield严格位于 createIterator() 内部,此代码仍然有语法错误,因为 yield无法穿越函数边界。从这点上来说, yield 与 return 非常相似,在一个被嵌套的函数中无法将值返回给包含它的函数。
8.4 生成器函数表达式
let createIterator = function *(items) {
for (let i = 0; i < items.length; i++) {
yield items[i];
}
};
let iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // "{ value: 1, done: false }"
8.5 生成器对象方法
var o = {
createIterator: function *(items) {
for (let i = 0; i < items.length; i++) {
yield items[i];
}
}
};
let iterator = o.createIterator([1, 2, 3]);
8.6 可迭代对象与 for-of 循环
可迭代对象( iterable )是包含 Symbol.iterator 属性的对象。其定义了为指定对象返回迭代器的函数
let values = [1, 2, 3];
let iterator = values[Symbol.iterator]
console.log(iterator);// ƒ values() { [native code] }
let values = [1, 2, 3];
let iterator = values[Symbol.iterator]();
console.log(iterator)// Array Iterator {}
我们判断一类对象是否可以迭代
function isIterable(object) {
return typeof object[Symbol.iterator] === "function";
}
console.log(isIterable([1, 2, 3])); // true
console.log(isIterable("Hello")); // true
8.7 创建可迭代对象
可以创建一个包含生成器的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 x of collection) {
console.log(x); // 1,2,3
}
8.8内置的迭代器
ES6 具有三种集合对象类型:数组、 Map 与 Set 。这三种类型都拥有如下的迭代器。用法都相同
entries() :返回一个包含键值对的迭代器;
values() :返回一个包含集合中的值的迭代器;
keys() :返回一个包含集合中的键的迭代器。
let tracking = new Set([1234,5678,9012])
for(let entry fo tracking.entries()) {
console.log(entry);// [1234, 1234],[5678,5678],[9012,9012]
}
不同集合类型的默认迭代器。
在没有显示的指定则使用默认的迭代器。数组和set集合是value()方法。map是entries().
解构与for....of...循环
let data = new Map();
data.set('title', 'ebook');
for(let [key,value] of data){
console.log(key,value);
}
8.9 字符串的迭代器
用for of 可以避免非bmp字符的读取。使用数组下标方式,会出现bmp字符无法读取导致为空并且字符个数出错。
var message = "a 🐔 b"
for (let i=0; i<message.length;i++){
console.log(message[i]);
}
for (let item of message){
console.log(item);
}
8.10NodeList迭代器
NodeList,代表页面文档中所有元素的集合。NodeList类型也可以进行for...of...
8.11 展开运算符与非数组可迭代对象
在之前我们用...
把Set对象转化为数组
let set = new Set([1,2,3,4,5]), array=[...set];
console.log(array);
展开运算符可以操作所有的可迭代对象,并且根据默认迭代器来选择要引用的值。
let map = new map([['name', 'Nicholas'], ['age', 15]]), array=[...map];
console.log(array);
数组字面量可以之心多次展开运算符
8.12高级迭代器功能
1. 给迭代器传递参数
:如果给迭代器next()传递参数,则这个参数的值就会替代生成器内部上的一条yield语句的返回值。
function *createIterater() {
let first = yield 1;
let second = yield first + 2;
yield second + 3;
}
let iterater = createIterater();
iterater.next()// {value: 1, down: false}
iterater.next(4)// {value: 6, down: false}
iterater.next(5)// {value: 8, down: false}
iterater.next()// {value: undefined, down: false}
第一次调用next()方法无论传递什么参数都会被丢弃。
2. 在迭代器中抛出错误
:通过throw方法,当迭代器恢复执行时可以令其抛出错误。
function *createIterater() {
let first = yield 1;
let second = yield first + 2;
yield second + 3;
}
let iterater = createIterater();
iterater.next()// {value: 1, down: false}
iterater.next(iterater.throw(new Error('Boom')))
-* - * - * - * -* 错误是在赋值之前错误 但是在上一条的yeild之后报错-* - * - * - * -*
错误拦截
function *createIterater() {
let first = yield 1;
let second;
try {
second = yield first + 2;
} catch(ex) {
second = 6;
}
yield second + 3;
}
let iterater = createIterater();
iterater.next()// {value: 1, down: false}
iterater.next(4))// {value: 6, down: false}
iterater.next(iterater.throw(new Error('Boom')))// {value: 9, down: false}
3. 生成器返回语句
由于生成器也是函数,因此可以通过return语句提前退出函数执行。对于最后一次next调用,可以主动为其制定一个返回值。return表示已经完成,down会设置为true。
function *createIterator() {
yeild 1;
return 42;
}
let iterater = createIterater();
iterater.next()// {value: 1, down: false}
iterater.next()// {value: 42, down: true}
iterater.next()// {value: undefined, down: true}
展开运算符与for...of 会忽略通过return语句制定的任何返回值。只要down为true就立即停止读取其他的值。
8.13 委托生成器
在某些情况下我们需要将两个迭代器合二为一,这时候可以创建一个生成器,再给yield语句添加一个*,就可以将生成数据过程委托给其他迭代器。
eg:
function *creatNumberIterator() {
yield 1;
yield 2;
return 3;
}
function *creatRepeatingIterator(count) {
for(let i=0; i<count; i++) {
yield "repeat"
}
}
function *creatCombineIterator() {
let result = yield *creatNumberIterator();
yield *creatRepeatingIterator(result);
}
var iterator = creatCombineIterator();
console.log(iterator.next());//{value: 1, done: false}
console.log(iterator.next());//{value: 2, done: false}
console.log(iterator.next());//{value: "repeat", done: false}
console.log(iterator.next());//{value: "repeat", done: false}
console.log(iterator.next());//{value: "repeat", done: false}
console.log(iterator.next());//{value: undefined, done: true}
yield *也可以直接作用于字符串,此时将使用字符串的默认迭代器
8.14异步任务执行
在nodeJS中可以读取文件之后做别的事情,但是如果读取文件之后再去读取文件,等进行嵌套,将会非常的复杂。生成器和yield就派上了用场
1.简单任务执行器
function run(taskDef) {
// 创建一个无使用限制的迭代器
let tast = taskDef();
//开始执行任务
let result = task.next();
function step() {
if(!result.down) {
result = task.next();
step();
}
}
}
run(function*() {
console.log(1);
yield;
console.log(2);
yield;
console.log(3);
})
2.向任务执行器传递数据
function run(taskDef) {
// 创建一个无使用限制的迭代器
let tast = taskDef();
//开始执行任务
let result = task.next();
function step() {
if(!result.down) {
result = task.next();
step();
}
}
}
run(function*() {
let value = yield 1;
console.log(value);// 1
value = yield value + 3
console.log(value)// 4
})
4. 异步任务执行