es6之四

11，generator---生成器---之一

函数 --- 中间可以停

function * show(){

alert(' a ')；

yield;

alert(' b ');

}

show();

yield--放弃

////////////////////////////////////例子

function 函数()｛

代码...

ajax(xxx, function() {

代码...

});

｝

////////////////////等同于

function *函数（）｛

代码....

yield ajax(xxx);

代码....

｝

///////////////////////////////////

function show_1() {

alert(' a ');

}

function show_2() {

alert(' b ');

}

let genObj = show();

genObj.next();    //show_1

genObj.next();    //show_2

11，generator---生成器---之二---yield

传参和返回

function *show() {           //传参

alert(' a ');

let a = yield;

alert(' b ');

alert(a);

return;

}

let gen = show();

gen.next(12);      //没办法给yield传参

gen.next(5);  //  a, b, 5 ;  12不起作用，想第一个起作用，在括号里面传参。

////////////////////////////////////////////////////////

function *show(){

alert(' a ');

yield 12;

alert(' b ');

return 55;

}

let gen = show();

let res1 = gen.next();

console.log(res1); //{ value: 12, done: false}

let res2 = gen.next(res2); //{ value: 55, done: false}

/////////////////////////////////////////////////

function *炒菜（菜市场买回来的）｛

洗菜->洗好的菜

let 干净的菜 = yield 洗好的菜；

干净的菜->切->丝

let 切好的菜 = yield 丝；

切好的菜->熟的菜

retrurn 熟的菜；

｝

11，generator---生成器---之二---事例 

cnpm i yield-runner-blue

runner( function *(){

let data1 = yield $.ajax({ url: 'txt1', dataType: 'json'  });

let data2 = yield $.ajax({ url: 'txt2', dataType: 'json'  });

let data3 = yield $.ajax({ url: 'txt3', dataType: 'json'  });

console.log(data1, data2, data3);

})

异步操作：

1，回调

2，Promise

3，generator

////////////////////////////////回调

$.ajax({

url: xxx,

dataType: 'json',

success(data1{

$.ajax({

url: xxx,

dataType: 'json',

success(data2){

$.ajax({

url: xxxx,

dataType: 'json',

success(data3){

//完事

}，

error() {

alert(' 错了 ');

}

})

}，

error(){

alert(' 错了 ');

}

})

},

error(){

alert(' 错了 ');

}

})

////////////////////////////////////Promise

Promise.all([

$.ajax({ url: xxx, dataType: 'json'}),

$.ajax({ url: xxx, dataType: 'json'}),

$.ajax({ url: xxx, dataType: 'json'}),

]).then(results => {

//完事

}, err=>{

alert(' 错了 ');

})

////////////////////////////////////generator

runner( function *(){

let data1 = yield $.ajax({ url: 'txt1', dataType: 'json'  });

let data2 = yield $.ajax({ url: 'txt2', dataType: 'json'  });

let data3 = yield $.ajax({ url: 'txt3', dataType: 'json'  });

console.log(data1, data2, data3);

})

------------------------------带逻辑的Promise

Promise.all([

$.ajax({ url:  'getUserData', dataType: 'json'}),

$.ajax({ url: xxx, dataType: 'json'}),

]).then(results => {

let userData = results[0];

if(userData .type == 'VIP'){

Promise.all([

$.ajax({ url:  'getVIPItems', dataType: 'json'}),

]).then(results =>{

let  items=results[0];

//生成列表，显示

}，err=>{

alert(' 错了 ');

})；

}else {

Promise.all([

$.ajax({ url:  'getItems', dataType: 'json'}),

]).then(results =>{

let  items=results[0];

//生成列表，显示

}，err=>{

alert(' 错了 ');

})；

}

}, err=>{

alert(' 错了 ');

})

------------------------------带逻辑的回调

$.ajax({url: 'getUserData', dataType: 'json', success(userData){  if(userData.type=='VIP') {    $.ajax({url: 'getVIPItems', dataType: 'json', success(items)    //生成列表，显示    }, error(err){alert('错了')});  } else {    $.ajax({url: 'getItems', dataType: 'json', success(items)      //生成列表，显示    }, error(err){alert('错了')})  }}, error(err) {alert('错了')}})

------------------------------带逻辑的generator 

runner(function *() {  let userData = yield $.ajax({url: 'getUserData', dataType: 'json'});  if(userData.type=='VIP'){    let items = yield $.ajax({url: 'getVIPItems', dataType: 'json'});  }else{    let items = yield $.ajax({url: 'getItems', dataType: 'json'});  }  //生成，列表});

Promise-----一次读一堆

generator---逻辑性

11，generator---生成器---之三---KOA

cnpm i koa

const koa=require(' koa ');

let server = new koa();

server.use( function *() {

this.body = 'abc';

});

serner.listen(8080);

/////////////////////////////////////

cnpm i koa

cnpm i koa-mysql

const koa=require(' koa ');

const mysql=require(' koa-mysql ');

let db=mysql.createPool({ host: 'localhost', user: 'root', password: '123456', database = '' });

let server = new koa();

server.use( function *() {

let data = yield db.query('SELECT * FROM user_table');

this.body=data;

});

serner.listen(8080);

12,总结

1，变量

var 重复声明。函数级

let 不能重复声明，块级，变量

const 不能重复声明，块级，常量

2，箭头函数

1，方便

如果只有一个参数，（）可以省略

如果只有一个return ｛｝可以省略

2，修正this

this相对正常点

3，参数扩展

收集，扩展

4，数组方法

map 映射

filter 过滤：一堆->剩下的

reduce 汇总，一堆->一个

forEach 循环

5，字符串

startsWith/endsWith

字符串模版 ``

6，Promise

封装异步操作

Promise.all([]);

7，generator

function *show(){

yield 暂停，可以几次

}

8，JSON

JSON.stringify({ a:12, b:5 }) => '{" a ":12, "b":5}'

JSON.parse( '{" a ":12, "b":5}') => { a:12, b:5 }

9，解构赋值

let [a, b, c] = [12, 5, 12];

左右结构一样，右边是个合法的东西，声明、赋值一次完成

10，面向对象

类

class Test{

constructor(){

this.xxxx==

}

方法1(){

}

方法2(){

}

} 

  继承

class Cls2 extends Cls1{

constructor(){

super();

}

}

13，es7&&es8的预览

1，数组 includes  => bool类型  是否包含某个东西

2，数组 keys/values/entries

数组 json

for...of 循环迭代器  下标（key）key

for...in 循环json  值（value）不是函数

keys => 所有的key拿出来

values => 所有的values拿出来 

entries => 所有的键值对拿出来 key - value    {key: 0， value： 11 }  *实体

3，幂 python : **

startsWith/endsWith

padStart/padEnd  //从起始位置补位，从末尾补位置

padStart(10, '0')  从开始位置补位，不够的0填

4，数组容忍度

[12, 1, 8] => [12, 1, 8,]  es6

function show(a, b, c,) {}  es7

5，generator   yield

async await

async function show(){

alert(' a ');

await;

alert(' b ');

}

1,不依赖于外部的runner了---统一性能

2，可以用箭头函数