在看过官方文档和《你不知道的javascript 中卷》之后,觉得还是应该写点什么总结一下,但是这个涉及到的点很多,感觉不太能够在单篇文章的篇幅之内能描述完全。
接下来我还是尽可能的描述一下,让大家理解过程,应用的地方有很多。
目录
自定义迭代器
生成器
自定义迭代器
比如迭代器,官网给出一个自定义迭代器的例子:
function makeRangeIterator(start = 0, end = Infinity, step = 1) {
let nextIndex = start;
let iterationCount = 0;
const rangeIterator = {
next: function() {
let result;
if (nextIndex < end) {
result = { value: nextIndex, done: false }
nextIndex += step;
iterationCount++;
return result;
}
return { value: iterationCount, done: true }
}
};
return rangeIterator;
}
let it = makeRangeIterator(1, 10, 2);
let result = it.next();
while (!result.done) {
console.log(result.value); // 1 3 5 7 9
result = it.next();
}
console.log("Iterated over sequence of size: ", result.value); // 5
照着敲一下理解下,这里其实是为了讲解生成器做铺垫,已经构造出了返回的result对象中的两个属性,一个是value,一个是done。
官网给出的迭代器的解释:
迭代器和生成器
生成器
接下来我来重点解释下生成器:
来,我们开门见山,生成器就是一类特殊的函数,可以一次或多次启动和停止,并不一定非得要完成。
虽然自定义的迭代器是一个有用的工具,但由于需要显式地维护其内部状态,生成器函数提供了一个强大的选择:它允许你定义一个包含自有迭代算法的函数, 同时它可以自动维护自己的状态。
来看一下代码:
function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
for (let i = start; i < end; i += step) {
yield i;
}
}
var a = makeRangeIterator(1,10,2)
a.next() // {value: 1, done: false}
a.next() // {value: 3, done: false}
a.next() // {value: 5, done: false}
a.next() // {value: 7, done: false}
a.next() // {value: 9, done: false}
a.next() // {value: undefined, done: true}
好奇怪,这里出现来一个yield,这个是什么意思呢?yield大家暂时先理解为暂停并返回一个值的意思。
这里第一个a.next();启动生成器,执行到yield i暂停,并返回i,此时返回的对象里面的value是1
记住:每次调用next(),会返回一个新的Generator(生成器),但这个Generator只能迭代一次。
用形象化的语言描述:每次调用next(),就是提出一个问题,生成器要给我的下一个值是什么?而生成器返回的东西有两种返回方式,一种是yield返回,一种是return返回。
以第一次为例,回答问题:这里生成器返回给next(...)的东西为Generator对象{value: 1, done: false},value值是yield表达式的值。
然后依次返回的Generator为
{value: 3, done: false}
{value: 5, done: false}
{value: 7, done: false}
{value: 9, done: false}
最后一次返回的value是undefined,done为true,表示结束。
{value: undefined, done: true}
最后的value为什么是undefined?因为函数结束了??
生成器返回值来源就是两种,一种yield暂停返回值,一种是return返回值,这里循环结束只剩return了,因为函数没有显示返回,就是默认隐式返回undefined,所以这里是undefined。是不是最后一次返回的生成器对象value都是undefined呢?不是的,我们往下看吧!
理解了吗?接下来我们往下看来测试你是否理解了
function *foo(x) {
var y = x * (yield "Hello"); // 暂停并返回"Hello"
return y;
}
var it = foo(6);
var res = it.next(); // {value:"Hello", done:false}
console.log(res.value); // "Hello"
res = it.next(7); // {value:42, done:true}
console.log(res.value); // 42
var it = foo(6);这里it是一个控制生成器的迭代器,当然你也可以理解为引用 it 指向生成器*foo(...)对象,每次构建这样的一个迭代器it,实际上就隐式的构建了生成器的一个实例,然后通过这个迭代器来控制这个生成器实例。
var res = it.next();留下一个问题,生成器*foo(...)要给我的下一个值是什么?去看生成器,yield "Hello"表达式回答了这个问题,执行到yield "Hello"的时候暂停,并返回value为"Hello"的Generator对象{value:"Hello", done:false}
res = it.next(7); 留下一个问题,生成器*foo(...)要给我的下一个值是什么?此时传入的7是赋值给了yield表达式,这里就是yield和next(...)的双向消息传递!!(关于双向消息传递我们下一个例子再讲)
此时没有yield来回答问题了,那么由 return 来回答!返回给next(...)的东西就由return返回。x为上一次的next传入的值6,yield表达式为本次next传入的7,所以y为42,return 42;
it.next(7)的执行返回的对象为{value:42, done:true},因为函数结束了,done就为true。
记住:启动生成器时的第一个next()一定要用不带参数的next(),因为所有的浏览器都会丢弃传递给第一个next()的参数
看到这里,我想你应该理解了最后一次返回的时候value是undefined还是具体值的问题,就是看你生成器函数是否显式return,有就是你return的值,没有就是默认undefined.
相似例子说明:
function *foo(x) {
var y = x * (yield); // 暂停并返回undefined
return y;
}
var it = foo(6);
var res = it.next(); // {value:undefined, done:false}
console.log(res.value); // "Hello"
res = it.next(7); // {value:42, done:true}
console.log(res.value); // 42
不同点就是只有yield,暂停并返回undefined。
如果你看懂了下一个例子,你就是理解了yield和next(...)的双向消息传递
function *foo() {
var x = yield 2;
++z;
var y = yield(x * z);
console.log(x, y, z);
}
var z = 1;
var it1 = foo();
var it2 = foo();
var val1 = it1.next().value; // 2, yield表达式暂停并返回2
var val2 = it2.next().value; // 2, yield表达式暂停并返回2
val1 = it1.next(val2 * 10).value; // 40
val2 = it2.next(val1 * 5).value; // 600
it1.next(val2 / 2); // y:300 20 300 3
it2.next(val1 / 4); // y:10 200 10 3
val1 = it1.next(val2 * 10).value; //40
这里it1.next参数传进去val2*10=20,传进去20给yield表达式,然后赋值给x,所以x为20,然后++z,z为2,接着执行到下一个yield暂停,返回表达式的值yield(x * z)就是20*2=40,所以这里是40
val2 = it2.next(val1 * 5).value; // 600
这里it2.next传进去的是val1*5=200,传进去200给yield表达式,然后赋值给x,所以x为200,然后++z,z为3,接着执行到下一个yield暂停,返回表达式的值yield(x * z)就是200*3=600,所以这里是600
最后it1和it2迭代器再次next,这次就是执行到函数结束了,
it1的next执行后y为300,x,y,z分别为20, 300, 3
it2的next执行后y为10,x,y,z分别为200, 10, 3
最后生成器给出的值都为{value:undefined,done:true},没有什么变量接收。
yield和next(...)双向消息传递就是这个next(...)传参数给上一次暂停的yield表达式,从而进行下一次计算,而执行到下一次yield的时候,暂停返回的生成器对象中的value键的值就是yield表达式的值。
yield ...和next(...)这一对组合起来,在生成器的执行过程中构成了一个双向消息传递系统。
知识扩展:
function * iterator02(end_value)
{
for(let i = 0; i < end_value; i++)
{
yield i;
}
}
for (let n of iterator02(10))
{
console.log(n) ;
}
let numbers = [ ... iterator02(20) ] ;
let [a, b, c, ... others] = iterator02(8) ;
console.log(numbers) ;
console.log(a, b, c) ;
console.log(others) ;
运行结果:
记住:[...]语法,解构赋值语法,for循环和forEach等循环语法,实质就是iterator.next(),为什么这么说呢?
来看看,上面的例子稍微变一变!
function * iterator02(end_value)
{
for(let i = 0; i < end_value; i++)
{
yield i;
}
}
let a = iterator02(10);
let numbers = [...a];
console.log(a.next()); //这个是啥???
最后打印
{value: undefined, done: true}
明明才准备启动生成器,结果迭代已经执行完了,充分说明这[...a]语法是不断next()直到结束!
记住,凡是能迭代的,原理是iterator.next()去迭代的,都会有
这个属性。
官网给的定义如下:
为了实现可迭代,一个对象必须实现 @@iterator 方法,这意味着这个对象(或其原型链中的任意一个对象)必须具有一个带 Symbol.iterator
键(key)的属性。