ES6学习系列——Generator 函数

Generator 总览:

  • 从语法角度上看,Generator 函数属于一个状态机,内部包含了多个状态;
  • 从执行结果看,Generator 函数返回一个遍历器对象,这个对象可以依次遍历Generator 函数内部的每一个状态;
  • 从形式上看,Generator 函数是一个普通函数,只是在function 和函数名之间有个星号 * 并且函数内部有 yield 来定义不同的状态;
  • 调用Generator 函数返回的遍历器对象,代表着Generator 函数内部的指针,每次遍历器对象调用 next() 方法,指针由当前状态改为指向下一个状态,而且会返回一个对象(有着value,done连个属性),value属性代表当前状态的值(也就是 yield 后面的值),done 属性是个布尔值(true 则表示遍历结束);
上实例:
function* testGen () {
    //三个yield + 一个return,就有四个状态
    yield 1+2;
    yiled 'hello world';
    yiled 'this is a';
    return 'Generator function test';
}
let test = testGen();
test.next(); // {value:3 , done: false}
test.next(); // {value: 'hello world', done: false}
test.next(); // {value: 'this is a', done: false}
test.next(); // {value: 'Generator function test', done: true}  遍历到这里就结束了
test.next(); // {value: undefined, done: true}

1、Generator 函数返回的遍历器对象和 Iterator 接口的关系

Generator 函数返回的遍历器对象有个属性方法叫 Symbol.iterator,而前面的在 Iterator 那一篇文章说过,一个对象只要有 Symbol.iterator 方法,就可以调用该方法来生成一个遍历器对象;
Generator 函数就是遍历器生成函数,所以直接给一个对象的Symbol.iterator 赋值,该对象就有了Iterator 接口;
我们来试试给一个对象加一个 Iterator 接口:

let testGen = function* () {
    yield 1;
    yiled 2;
    yiled 3;
};
let testIteratorObj = { };
testIteratorObj[Symbol.iterator] = testGen;

//testIteratorObj 对象就有了Iterator 接口
[...testIteratorObj ] //[1,2,3] 

//另外,Generator 函数执行之后返回的遍历器对象的 Symbol.iterator 属性方法执行的结果,等于遍历器对象本身
let g = testGen();
console.log( g[Symbol.iterator]() === g ); //true

2、遍历器对象的 next()方法的参数

猜你喜欢

转载自blog.csdn.net/qq_39798135/article/details/82503446