16.Iterator for of
1概念:任何数据结构只要不输iterator接口 就可以完成遍历操作
2iterator接口供for...of消费
.3.
let generator = function* () {
yield 1;
yield* [2,3,4];
yield 5;
};
var iterator = generator();
iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }
4.任何接受数组作为参数的场合,都调用了遍历器接口
for...of Array.from() Map(), Set(), WeakMap(), WeakSet() Promise.all() Promise.race()
5.字符串的iterator接口
var someString = "hi";
typeof someString[Symbol.iterator]
// "function"
var iterator = someString[Symbol.iterator]();
iterator.next() // { value: "h", done: false }
iterator.next() // { value: "i", done: false }
iterator.next() // { value: undefined, done: true }
6.iterator and generator 函数
let myIterable = {
[Symbol.iterator]: function* () {
yield 1;
yield 2;
yield 3;
}
}
[...myIterable] // [1, 2, 3]
// 或者采用下面的简洁写法
let obj = {
* [Symbol.iterator]() {
yield 'hello';
yield 'world';
}
};
for (let x of obj) {
console.log(x);
}
// "hello"
// "world"
7. return,throw可选 next必须部署
8.for....of Set遍历之后返回的是值 Map返回的是数组 键值对
9.keys entries values 使用方法
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']
10.类数组对象
// 字符串
let str = "hello";
for (let s of str) {
console.log(s); // h e l l o
}
// DOM NodeList对象
let paras = document.querySelectorAll("p");
for (let p of paras) {
p.classList.add("test");
}
// arguments对象
function printArgs() {
for (let x of arguments) {
console.log(x);
}
}
printArgs('a', 'b');
// 'a'
// 'b'
11.forEach无法中途跳出,for.in是键,for....of是键数字排列
for (var n of fibonacci) {
if (n > 1000)
break;
console.log(n);
}
17.Generator
1.执行Generator函数会返回一个遍历器对象,返回的遍历器对象,可以依次遍历Generator的每一个状态(yield) 1.* 2.yield
2.调用函数,函数不执行,而是返回一个指针,指向内部状态
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
3.yield是暂停执行 next恢复执行
4.
var myIterable = {};
myIterable[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3;
};
[...myIterable] // [1, 2, 3]
function* gen(){
// some code
}
var g = gen();
g[Symbol.iterator]() === g
// true
5.Generator 在运行时,他执行所产生的上下文在yield命令就会暂时推出堆栈,并不消失,只是暂时冻结状态,等到对他执行next,将剩下问环境加入调用栈,冻结的变量和对象恢复秩执行
yield表达式本身是没有值的
for....of 循环会依次执行yield命令的特性
6.应用:1.处理异步操作,改写回调函数:因为yield就可以暂停行为,next继续
2.控制流管理:
3.部署遍历器接口
4.作为数据结构
7.next(参数)将上一次yeild表达式值==参数
function* foo(x) {
var y = 2 * (yield (x + 1));
var z = yield (y / 3);
return (x + y + z);
}
var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}
var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }
想要第一次调用next时就可以输入值,需要wapper包一层
8.for...of ... Array.from() 方法内部调用都是Iterator接口
function* objectEntries(obj) {
let propKeys = Reflect.ownKeys(obj);
for (let propKey of propKeys) {
yield [propKey, obj[propKey]];
}
}
let jane = { first: 'Jane', last: 'Doe' };
for (let [key, value] of objectEntries(jane)) {
console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe
9.
Genertor.prototype.throw | 1.会被函数内部trycatch捕获,其余被外部catch捕获,外部没有trycatch,就会Uncaught 2.new throw不会被内部捕获 3.throw方法被捕获之后,会顺带执行下一条yinext) |
Genertor.prototype.return | 1.终结遍历函数 2.返回值就是return()参数 done=true 3.如果内部有try...finally,直接执行finally |
10.yield* 表达式
如果在Generator函数内部调用另一个Generator函数,需要在前者函数体内部自己手动完成遍历(for of 。。。Array.form... ...)用yield*来作为解决办法,在要遍历的函数前+field*
有return,直接向代理他的Generator函数返回数据
function* foo() {
yield 2;
yield 3;
return "foo";
}
function* bar() {
yield 1;
var v = yield* foo();
console.log("v: " + v);
yield 4;
}
var it = bar();
it.next()
// {value: 1, done: false}
it.next()
// {value: 2, done: false}
it.next()
// {value: 3, done: false}
it.next();
// "v: foo"
// {value: 4, done: false}
it.next()
// {value: undefined, done: true}
能请以取出嵌套数组中的所有成员(for...of .... Aray.from)
function* iterTree(tree) {
if (Array.isArray(tree)) {
for(let i=0; i < tree.length; i++) {
yield* iterTree(tree[i]);
}
} else {
yield tree;
}
}
const tree = [ 'a', ['b', 'c'], ['d', 'e'] ];
for(let x of iterTree(tree)) {
console.log(x);
}
// a
// b
// c
// d
// e
11.Generator函数的this
function* F() {
this.a = 1;
yield this.b = 2;
yield this.c = 3;
}
var obj = {};
var f = F.call(obj);
f.next(); // Object {value: 2, done: false}
f.next(); // Object {value: 3, done: false}
f.next(); // Object {value: undefined, done: true}
obj.a // 1
obj.b // 2
obj.c // 3
function* F() {
this.a = 1;
yield this.b = 2;
yield this.c = 3;
}
var f = F.call(F.prototype);
f.next(); // Object {value: 2, done: false}
f.next(); // Object {value: 3, done: false}
f.next(); // Object {value: undefined, done: true}
f.a // 1
f.b // 2
f.c // 3
function* gen() {
this.a = 1;
yield this.b = 2;
yield this.c = 3;
}
function F() {
return gen.call(gen.prototype);
}
var f = new F();
f.next(); // Object {value: 2, done: false}
f.next(); // Object {value: 3, done: false}
f.next(); // Object {value: undefined, done: true}
f.a // 1
f.b // 2
f.c // 3
18.Generator函数的异步应用
1.传统异步编程方法:1.回调函数 2.事件监听 3.发布、订阅 4.Promise对象
2.基本概念:
3.Trunk函数 传名调用(xxx)
// 正常版本的readFile(多参数版本)
fs.readFile(fileName, callback);
// Thunk版本的readFile(单参数版本)
var Thunk = function (fileName) {
return function (callback) {
return fs.readFile(fileName, callback);
};
};
var readFileThunk = Thunk(fileName);
readFileThunk(callback);
4.co(xxx)