ES6生成器:可迭代协议与迭代器协议

JavaScript 迭代器 生成器 ES6

ES6(ECMAScript 2015)中提出了生成器的概念,进一步完整了JavaScript语言。 本文介绍了可迭代协议与迭代器协议的概念区别,以及生成器的声明与使用方法。

生成器函数

生成器函数是用来返回生成器的函数,生成器是一种有状态的迭代器, 可实现较复杂的迭代行为,比如生成ID。 生成器函数使用function*语法来定义:

function* idMaker(){
    var index = 0;
    while(index<3){
        yield index++;
    }
}

生成器函数也可以通过GeneratorFunction(类似Function)、function* expression来定义(可以使用匿名函数)。

调用生成器函数并不会执行函数体,而是会返回一个生成器

var gen = idMaker();

生成器

ES6中生成器有三个方法:

  • Generator.prototype.next(): 返回下一个yield的值。
  • Generator.prototype.return(): 返回并结束生成器。
  • Generator.prototype.throw(): 抛出错误。

示例代码:

var gen = idMaker();

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // undefined

可迭代协议

可迭代协议(iterable protocol)使得我们可以定制JavaScript对象 的迭代行为,比如定义for...of时迭代出来怎样的值。 将[Symbol.iterator]属性定义为一个迭代器对象即可实现该协议。

String, Array, Map等内置类型是满足可迭代协议的,例如:

var someString = "hi";
var iterator = someString[Symbol.iterator]();
iterator.next();                             // { value: "h", done: false }
iterator.next();                             // { value: "i", done: false }
iterator.next();                             // { value: undefined, done: true }

迭代器协议

迭代器协议(iterator protocol)又称生成器协议, 该协议定义了什么是迭代器对象。其实迭代器协议很简单, 只要实现.next()方法(并具有对应语义)即可。 该方法返回的对象除.value属性外, 还应有一个.done属性来标识迭代器是否已越过最后一个元素:

function* g(){
    yield 1;
    yield 2;
}
var iterator = g();
console.log(iterator.next());   // { value: 1, done: false }
console.log(iterator.next());   // { value: 2, done: false }
console.log(iterator.next());   // { value: undefined, done: true }

生成器函数中的return会立即结束生成器,因此done会立即变为true(不同于yield)。

function* g(){
    yield 1;
    return 2;
}
var iterator = g();
console.log(iterator.next());   // { value: 1, done: false }
console.log(iterator.next());   // { value: 2, done: true }
console.log(iterator.next());   // { value: undefined, done: true }

yield*

yield*可以将需要yield的值委托给另一个生成器,或其他任何可迭代对象 (由ES6 迭代协议规约)。例如:

function* g1() {
  yield 2;
  yield 3;
  yield 4;
}

function* g2() {
  yield 1;
  yield* g1();
  yield 5;
}

var iterator = g2();

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: 4, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

除了生成器外,yield*还可以委托给其他的可迭代类型:

function* g() {
  yield* [1, 2];
  yield* "34";
  yield* arguments;
}

var iterator = g(5, 6);

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: "4", done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: 6, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

参考阅读

文中代码来自MDN

Harttle

致力于简单的、一致的、高效的前端开发

看看这个?