generator 与 Iterable
es6 中的很多新的特效都能与generator （生成器函数）有关，实际用处比较广泛，如异步模块，数组遍历等等
Generator的用法
function* f1() {
console.log("f1 start")
yield 1;
yield 2;
}
var result = f1();
console.log(result); // Object [Generator] {}
console.log(result.next()); // "f1 start" { value: 1, done: false }
console.log(result.next()); // { value: 2, done: false }
console.log(result.next()); // { value: undefined, done: true }
Generator函数和普通的函数区别有两个:
- function和函数名之间有一个*号
- 函数体内部使用了yield表达式；
通过上面的log可以发现，f1 返回的是一个Iterator实例,执行next()方法，此时这个函数才开始执行,并把yield后面的值包装成固定对象并返回
如{value:2,done:false},直到运行到函数结尾， 最后再返回undefined
yield 与 return
function* f1() {
yield 1;
return 3;
yield 2;
}
var result = f1();
console.log(result); // Object [Generator] {}
console.log(result.next()); // { value: 1, done: false }
console.log(result.next()); // { value: 3, done: false }
console.log(result.next()); // { value: undefined, done: true }
yield和return一起使用的话， 那么return的值也会作为最后的返回值，如果return语句后面还有yield， 那么这些yield不生效
next方法
function* f1(x) {
var y = 2 * (yield (x + 1));
var z = yield (y+ 3);
return (x + y + z);
}
var a = f1(5);
console.log(a.next()) // { value: 6, done: false }
console.log(a.next()) // { value:NaN, done:false }
console.log(a.next()) // { value:NaN, done:true }
var b = f1(5);
console.log(b.next()) // { value: 6, done: false }
console.log(b.next(12)) // { value:27, done:false }
console.log(b.next(13)) // { value:42, done:true }
next方法传参数，这个参数将会作为上一次yield语句的返回值
- var b = f1 (5); 此时传入一个参数5，即x = 5；
- b.next() ;返回第一个yield 后面的值 即 x+1 = 6
- b.next(12); 将这个参数作为上一次yield的返回值，即此时 y = 2 * 12 = 24，返回 y+3 = 27
- b.next(13);同理 z = 13 ，返回 5+24+13 = 42
return 方法
function* f1() {
yield 1;
return 3;
yield 2;
}
var g = f1();
console.log(g.return()); //{ value: undefined, done: true }
console.log(g.return(100)); //{ value: 100, done: true }
Iterator的return()方法， 会被强制迭代完毕， 执行return()方法的参数就是这个Iterator的返回值，此时done的状态也为true
generator 中的 this
function *g() {
this.a=1
}
let obj=g()
console.log(obj.a) //undefined
let obj2=new g() //TypeError: g is not a constructor
generator函数b不是普通构造函数， 无法继承this; 无法new
如何让generator返回一个正常的对象实例
function *F() {
this.a=1
yield this.b=2
yield this.c=3
}
var obj={}
var f=F.apply(obj)
console.log(f.next()) //{ value: 2, done: false }
console.log(f.a) //undefined
console.log(obj.a) //1 此时的this指向是 obj 并不是我们想要的f ，迭代器是f，生成了obj实例
generator函数的 prototype原型对象指的是除了yield以外的语句，所以我们可以将Generator内部的this指向他的原型的，
function *F() {
this.a=1
yield this.b=2
yield this.c=3
}
var f=F.call(F.prototype)
console.log(f.next()) //{ value: 2, done: false }
console.log(f.a) //1
//这样generator不仅继承了 Iterator的原型，也继承了Funcion的原型
function *f1() {
this.a=1
yield this.b=2
yield this.c=3
}
function F() {
return f1.call(f1.prototype)
}
var f=new F()
iterable 类型
iterable是ES6标准引入的新的类型。而String、Array、Map和Set都实现了Symbol.iterator
只要实现了Symbol.iterator就都可以通过for ... of循环来遍历
var str = "112222";
var array = "112222";
var set = new Set(['A', 'B', 'C']);
var map = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of str) { // 遍历String
console.log(x);
}
for (var x of array) { // 遍历Array
console.log(x);
}
for (var x of set) { // 遍历Set
console.log(x);
}
for (var x of map) { // 遍历Map
console.log(x[0] + '=' + x[1]);
}
var str = "12",arr = [1,2],num = 2;
console.log(str[Symbol.iterator]);//[Symbol.iterator]()
console.log(arr[Symbol.iterator]);//[Symbol.iterator]()
console.log(num[Symbol.iterator]);//undefined
object是不支持 Symbol.iterator,我们只需要跟object实现一个Symbol.iterator 接口，就可以很轻松用for of 对其进行遍历
... 与for of
由于generator 返回是一个迭代实例，所以我们可以进行for of 遍历
function* f1() {
yield 0;
yield 1;
return 2;
yield 3;
};
let g = f1();
console.log(...g) ; //0,1
console.log([...g]); //[ 0, 1 ]
for(let foo of g) {
console.log( foo ); //0, 1
}
Iterator的return的值不会被for...of循环到,通过上面可以看出 扩展符 ...也是可以遍历 iterator事例，return的值也不会被遍历
所以es6 中的 扩展符（...）也是一个 可以遍历实现了 Iterator 接口的对象，可以很轻松的把对象变成一个数组
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
var obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object
为Object添加迭代器
- 实现 Iterator接口，返回iterator事例{value:1,done:false}，提供一个next方法
function it(){
let keys = Object.keys(this)
let obj = this
let idx = 0
let length = keys.length
return {
next: function() {
if (idx < length) {
let ret = {
value: {
key: keys[idx],
val: obj[keys[idx]]
},
done: false
}
idx ++
return ret
} else {
return {
value: undefined,
done: true
}
}
}
}
}
var a = {x:1, y:2, z:3}
a[Symbol.iterator] = it
for (let v of a)
{
console.log(v)
}
- 利用generator实现
function* it(obj) {
let propKeys =Object.keys(obj);
for (let propKey of propKeys) {
yield {
key:propKey,
val : obj[propKey]
}
}
}
var a = {x:1, y:2, z:3}
for (let v of it(a))
{
console.log(v)
}
var a = {x:1, y:2, z:3}
a[Symbol.iterator] = it
for (let v of a)
{
console.log(v)
}