JavaScript红宝书第七章:迭代器与生成器

JavaScript红宝书第七章:迭代器与生成器

  • 理解迭代
  • 迭代器模式
    • 可迭代对象
    • 可迭代协议
      • 什么是工厂函数?
      • 实现Iterator接口的内置类型
      • 什么是arguments?
      • 如何检查是否有迭代接口以及工厂函数
    • 迭代器协议
      • next方法
      • 自定义迭代器
    • 提前终止迭代器
  • 生成器
    • 定义
      • yield可以干嘛
        • 生成器对象可以作为可迭代对象
        • 使用 yield 实现输入和输出
        • 产生可迭代对象
        • 使用 yield*实现递归算法
    • 提前终止生成器
      • return方法
      • throw方法

理解迭代

什么是迭代?迭代就是有条件的循环,按顺序访问可迭代结构中的每一项。如下图:

for(let i=0;i<5;i++){
	console.log(i)
}

实现了一个最简单的迭代计数循环。但如果说我们想用一个迭代方法去迭代多种不同数据类型的内容,ES5新增了ForEach方法往通用迭代迈进了但仍不理想。

let arr=[1,2,3,4]
arr.forEach(item=>console.log(item))//1,2,3,4

它解决了提取数组索引,和数组值问题,但是不能标识迭代数组的终止条件。所以ES6新增了一个迭代器模式,解决了通用迭代功能。

迭代器模式

迭代器模式是一个方案,它把有些结构称为可迭代对象,而这些对象都实现了Iterable接口,可以通过Iterator迭代器消费。而iterator是按需创建的一次性对象。iterrator迭代器会暴露关联的可迭代对象的迭代API,实现无需知道可迭代对象结构就能实现迭代。

可迭代对象

具有有限元素且无歧义遍历顺序的对象叫可迭代对象。

可迭代协议

实现迭代API(可迭代协议)需要具备两个能力:

  • 支持迭代的自我识别能力
  • 创建实现IteratorAPI的对象能力
    所以说,每个可迭代对象都有一个默认迭代器属性,这个属性名必须是Symbol.Iterator且这个属性必须引用一个迭代器工厂函数,调用工厂函数必须返回一个新迭代器。

什么是工厂函数?

工厂函数类似于自动化机器,往这个函数里面投放它需要的参数就可以得到想要的产品。

实现Iterator接口的内置类型

  • 字符串
  • 数组
  • 映射
  • 集合
  • arguments对象
  • NodeList等Dom集合类型

什么是arguments?

可以移步我简述arguments的博客:原生JavaScript之函数特殊对象arguments

如何检查是否有迭代接口以及工厂函数

通过检查是否有[Symbol.Iterator]默认属性,来判断是否存在工厂函数。

let arr=[1,2,3,4]
	let str='123'
	let num=123
	console.log(arr[Symbol.iterator]);//values() { [native code] }
	console.log(str[Symbol.iterator]);// [Symbol.iterator]() { [native code] }
	console.log(num[Symbol.iterator]);// undefined

而通过在这个默认属性加()即可调用迭代工厂函数。

let arr=[1,2,3,4]
let str='123'
console.log(arr[Symbol.iterator]());// ay Iterator {}
console.log(str[Symbol.iterator]());// ingIterator {}

实现写代码过程中,我们不需要通过调用工厂函数生成迭代器,可以直接调用可迭代对象通用的方法特性来实现迭代:

  • for of
  • 数组解构
  • 扩展操作符
  • Array.from()
  • 创建集合
  • 创建映射
  • Promise.all
  • Promise.race
  • yield *(生成器)

实例:

let arr=[1,2,3,4]
// for of
for(item of arr){
	console.log(item);//1 2 3 4
}
// 数组解构
let [a,b,c]=arr
console.log(a,b,c);//1 2 3
// 扩展操作符
let arr2=[...arr]
console.log(arr2);//[1,2,3,4]
// Array.from
let arr3=Array.from(arr)
console.log(arr3);//[1,2,3,4]
// Set 构造函数
let set = new Set(arr); 
console.log(set); // Set(4) {'1', '2', '3',4} 
// Map 构造函数
let pairs = arr.map((x, i) => [x, i]); 
console.log(pairs); // [['1', 0], ['2', 1], ['3', 2],[4,3]] 
let map = new Map(pairs); 
console.log(map); // Map(3) { '1'=>0, '2'=>1, '3'=>2 ,4=>3}

迭代器协议

迭代器是一次性使用对象,它的API使用next方法进行迭代遍历,next一次,则返回一个迭代结果对象,包含迭代器下一个返回值,不调用next就不知道当前迭代器位置。

next方法

调用next方法返回对象的属性:done和value
done是用于判断是否还有下一个值的布尔(有则false,无则true),value是下一个值,没有则是undefined。

let arr = ['foo', 'bar']; 
let iter1 = arr[Symbol.iterator](); 
console.log(iter1.next()); // { done: false, value: 'foo' } 
console.log(iter1.next()); // { done: false, value: 'bar' }
console.log(iter1.next()); // {value: undefined, done: true}

自定义迭代器

class Counter { 
 // Counter 的实例应该迭代 limit 次
 constructor(limit) { 
 this.count = 1; 
 this.limit = limit; 
 } 
 next() { 
 if (this.count <= this.limit) { 
 return { done: false, value: this.count++ }; 
 } else { 
 return { done: true, value: undefined }; 
 } 
 } 
 [Symbol.iterator]() { 
 return this; 
 } 
} 
let counter = new Counter(3); 
for (let i of counter) { 
 console.log(i); 
} 
// 1
// 2
// 3

可以自己实现一个自定义迭代,里面有迭代的返回条件以及对应的返回值。这里就不赘述了。

提前终止迭代器

不想遍历到终止,想要提前终止怎么办?
for-of可以通过break、continue、return、throw提前退出。也可以自己设置一些终止条件来进行判断是否终止。
如果我们不想终止迭代,但是想暂停某个自定义迭代函数块,在特定条件下暂停或者继续,就可以用到生成器来进行操作。

生成器

定义

ES6新增结构,拥有在一个函数块内暂停和恢复代码执行的能力。这种新能力具有深远的影响,比如,使用生成器可以自定义迭代器和实现协程。

// 生成器函数声明
function* generatorFn() {} 
// 生成器函数表达式
let generatorFn = function* () {} 
// 作为对象字面量方法的生成器函数
let foo = { 
 * generatorFn() {} 
} 
// 作为类实例方法的生成器函数
class Foo { 
 * generatorFn() {} 
} 
// 作为类静态方法的生成器函数
class Bar { 
 static * generatorFn() {} 
}

注:箭头函数不能用来定义生成器函数。
生成器函数声明就是在普通函数名前加*即可。而调用这个生成器会出现一个生成器对象,该对象初始为暂停执行状态。同时它也实现了Iterator接口,也有next方法,调用next会让生成器开始或恢复执行,同样next有两个属性done和value,当生成器函数体为空时done为true,value为undefined,想要修改默认value,可通过修改返回值来不让空函数体默认为undefined。

function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
  let iterationCount = 0;
  for (let i = start; i < end; i += step) {
    iterationCount++;
    yield i;
  }
  return iterationCount;
}

上述代码中的yield关键字,用于生成器中断执行和继续执行。通过yield关键字退出的生成器,返回的done是false。

function* a(){
	yield;
}
console.log(a().next())//done:false,value:undefined

注:yield关键字只能在生成器函数内部使用。

yield可以干嘛

生成器对象可以作为可迭代对象
function* generatorFn(){
 yield 1; 
 yield 2; 
 yield 3; 
} 
for (const x of generatorFn()) { 
 console.log(x); 
} 
// 1 
// 2 
// 3
使用 yield 实现输入和输出
function* generatorFn(initial) { 
 console.log(initial); 
 console.log(yield); 
 console.log(yield); 
} 
let generatorObject = generatorFn('foo'); 
generatorObject.next('bar'); // foo 
generatorObject.next('baz'); // baz 
generatorObject.next('qux'); // qux

也可以同时输入输出

function* generatorFn() { 
 return yield 'foo'; 
} 
let generatorObject = generatorFn(); 
console.log(generatorObject.next()); // { done: false, value: 'foo' } 
console.log(generatorObject.next('bar')); // { done: true, value: 'bar' }
产生可迭代对象
function* generatorFn() { 
 yield* [1, 2, 3]; 
} 
let generatorObject = generatorFn(); 
for (const x of generatorFn()) { 
 console.log(x); 
} 
// 1 
// 2 
// 3
使用 yield*实现递归算法
function* nTimes(n) { 
 if (n > 0) { 
 yield* nTimes(n - 1); 
 yield n - 1; 
 } 
} 
for (const x of nTimes(3)) { 
 console.log(x); 
} 
// 0 
// 1 
// 2

提前终止生成器

return方法

function* generatorFn() { 
 for (const x of [1, 2, 3]) { 
 yield x; 
 } 
} 
const g = generatorFn(); 
console.log(g); // generatorFn {} 
console.log(g.return(4)); // { done: true, value: 4 } 
console.log(g); // generatorFn {}

throw方法

function* generatorFn() { 
 for (const x of [1, 2, 3]) { 
 yield x; 
 } 
} 
const g = generatorFn(); 
console.log(g); // generatorFn {} 
try { 
 g.throw('foo'); 
} catch (e) { 
 console.log(e); // foo 
} 
console.log(g); // generatorFn {}

你可能感兴趣的:(JavaScript红宝书,javascript,开发语言,ecmascript)