-
iterator
这个就是一个可以迭代的接口对象。可以参考这里
简单的来说这个对象就是有一个next方法，next方法里返回的对象具有(value和done)这两个属性.
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]); 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: undefined, done: true }" // for all further calls console.log(iterator.next()); // "{ value: undefined, done: true }"
-
generator 这个就是返回iterator的一个方法。
使用也简单，
function关键字后面跟着一个*, 并且在内容中yield关键字。// generator function *createIterator() { yield 1; yield 2; yield 3; } // generators are called like regular functions but return an iterator let iterator = createIterator(); console.log(iterator.next().value); // 1 console.log(iterator.next().value); // 2 console.log(iterator.next().value); // 3
yield关键字会在next方法调用的时候返回结果，并且后面的不会有操作，next一次向下走一次。arrow function 不支持generator,并且generator的next也是可以传递参数的.
所有通过generator创建的iterator都是iterables的，并且generator默认添加了Symbol.iterator属性.
在上面的这个链接里有介绍说for...of需要iterable才可以，
从链接的结果来看，他是调用了next方法，其实他是先调用(Symbol.iterator)方法来确定返回值是不是一个iterator,之后再去调用next方法.
我们来创建一个iterable的对象.
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);
}不难理解吧，他在let x of collection的时候先去获取Symbol.iterator获取到next方法去执行，因为yield关键字需要next去运行。
现在我们来实现一个Array.from的简单的功能(转换成数组).将obj = {1: 'num 1', 3: 'number 3', length: 5}通过next转换成一个数组.
es6有很多都内置了iterator的对象。
es6中有三类集合对象：Array, Map, Set
entries()- 返回的是可迭代的健值对values()- 返回的内容的集合，可迭代(iterator)keys()- 返回的是key的集合，可迭代
可迭代的entries()
let colors = [ "red", "green", "blue" ];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();
data.set("title", "Understanding ECMAScript 6");
data.set("format", "ebook");
for (let entry of colors.entries()) {
console.log(entry);
}
for (let entry of tracking.entries()) {
console.log(entry);
}
for (let entry of data.entries()) {
console.log(entry);
}keys和values想必大家很熟知了，就不再阐述。
集合类型的默认迭代参数：
let colors = [ "red", "green", "blue" ];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();
data.set("title", "Understanding ECMAScript 6");
data.set("format", "print");
// same as using colors.values()
for (let value of colors) {
console.log(value);
}
// same as using tracking.values()
for (let num of tracking) {
console.log(num);
}
// same as using data.entries()
for (let entry of data) {
console.log(entry);
}可以发现，array和set默认的是value，而map则默认的是entries.
function *createIterator() {
let first = yield 1;
let second = yield first + 2; // 4 + 2
yield second + 3; // 5 + 3
}
let iterator = createIterator();
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next(4)); // "{ value: 6, done: false }"
console.log(iterator.next(5)); // "{ value: 8, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"在generator中，第一次调用next()是一个特殊的案例，因为你传递任何值过去，都会丢失。
next()中传递的参数有这的规则：传入的参数会做为上一个yield的返回结果。意思也就是说，前提条件是需要一个表达式x = yield value,这也才会有赋值，这也才会传入参数。
来个简单的例子：
function * wo() {
yield 2
let x = yield 9
yield 100
yield x + 'LM'
}
w = wo()
w.next(1) //1 {done: false, value: 2}
w.next('xhs') //2 {done: false, value: 9}
w.next('xz') //3 {done: false, value: 100}
w.next() //4 {done: false, value: 'xzLM'}可以发现第三步之前的传入的参数，没有起作用，第三步起作用了，因为在第三步传入的参数，有变量去接收(就是赋值给上面的一个yield结果)，所以第二步中x变量的值就是第三步传入的值xz.
当然，这个是比较好理解的方式，按照understanding es6中的来理解，就需要去知道执行步骤。
这个步骤就是每次的next()都是先执行上一个表达式的左侧，再执行当前表达式的右侧(yield).如果不是表达式，则直接执行yield. 这就造成传入的参数实际是在执行当前yield之前对上一个表达式左侧的变量进行了赋值(并且如果有接收参数，切next()没有传入参数，那就造成这个变量是undefined)。看下图
function *createIterator() {
let first = yield 1;
let second = yield first + 2; // yield 4 + 2, then throw
yield second + 3; // never is executed
}
let iterator = createIterator();
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next(4)); // "{ value: 6, done: false }"
console.log(iterator.throw(new Error("Boom"))); // error thrown from generator这里就抛出一个异常，看下图就比较直观
function* wo(){
yield 'xhs'
return 'xz'
yield 'xite'
}
w = wo()
w.next() // work
w.next() // {done: true, value: 'xz'}
w.next()// {done: false, value: undeined}可以发现，在generator中正常return，带有返回值.
spread operator和for-of会无视return的返回值，注意:不会无视return语句
为什么不会返回return值，因为发现done: true之后，便不会再去读取value。
看下面例子，比较直观
function *createNumberIterator() {
yield 1;
yield 2;
return 3;
}
function *createRepeatingIterator(count) {
for (let i=0; i < count; i++) {
yield "repeat";
}
}
function *createCombinedIterator() {
let result = yield *createNumberIterator();
yield *createRepeatingIterator(result);
}
var iterator = createCombinedIterator();
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 }"这个就是一个代理的例子。值得注意的是result，他是一个return值，next()方法的时候不会有输出，如果需要输出需要yield result.
yield * 'string'是保持默认string的输出.
这个就是利用next()是一步一步的原理去处理。