generator、async解决回调地狱

Symbol

ES6数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol

symbol是一种新的数据类型（简单数据类型）

symbold的特点：每一个symbol的值都是独一无二的，可以作为对象属性去用

（1）相同参数 Symbol() 返回的值不相等

let sy = Symbol("kk");
let sy1 = Symbol("kk"); 
alert(sy === sy1);      // false

（2）Symbol 作为对象属性名时不能用.运算符，要用方括号。因为.运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性。

//写法一：
var sy=Symbol("aaa");
var sy1=Symbol("aaa");
var obj={
    [sy]:"valuea",
    [sy1]:"valueb"
}
alert(obj[sy]);	//valuea
alert(obj[sy1]);//valueb

//写法二：
let sy2 = Symbol("key1");
let syObject = {};
syObject[sy2] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}

generator(生成器函数)解决回调地狱

generator特征：

1. function关键字与函数名之间有一个 * 号
2. 函数体内使用yield表达式来遍历状态

generator除了用return，还可以用yield 返回多次， 只要碰到yield，函数执行就会暂停，暂停之后用next方法继续执行

首先创建两个json文件 : a.json   b.json
内容分别为 : {"aa" : "hello"}	{"bb" : "world"}

function * ger(){
    yield js_pro("a.json");
    yield js_pro("b.json");
}
var obj=ger();

obj.next().value.then(res=>{
  	console.log(res);	//{aa : "hello"}
    return obj.next().value;
}).then(res=>{
    console.log(res);	//{bb : "world"}
})

generator调用next方法返回的是一个json，里面的value是yield返回的值，done是这个函数有没有执行完毕

console.log(obj.next());	//{value:Promise,done:false}
console.log(obj.next());	//{value:Promise,done:false}
console.log(obj.next());	//{value:undefined,done:true}

generator生成器生成的是一个迭代器

generator函数跟普通函数的区别： generator函数可以暂停

generator函数和async函数的区别：

• async函数在等待了之后会自动的继续往后执行
• generator函数暂停了之后需要手动调用next方法才能继续往后执行

iterator

可迭代对象有：数组、nodeList、字符串、set、map，这些对象都有默认的迭代器和Symbol.iterator属性。

可迭代对象的Symbol.iterator属性可以把可迭代对象变成一个迭代器，就可以去执行next()方法

迭代器的本身是一个对象，这个对象有 next( ) 方法返回结果对象，这个结果对象有下一个返回值 value、迭代完成布尔值 done

var  arr=["a","b","c"];
var obj=arr[Symbol.iterator]();
console.log(obj.next());	//{value:"a",done:false}
console.log(obj.next());	//{value:"b",done:false}
console.log(obj.next());	//{value:"c",done:false}
console.log(obj.next());	//{value:undefined,done:true}

当数据具有Symbol.iterator属性时才可使用 for…of 进行迭代 , 因为 for…of 循环只能循环可迭代对象

async用同步的写法执行异步的操作

async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示，在函数内部使用 await 来表示异步。

async的语法:

1. async 和 await 关键字搭配使用，async 函数永远返回一个 promise 对象，如果函数里有返回值的话，在这个 async 执行之后的.then方法里能拿到
2. await 是等待的意思，后面一般跟一个promise对象，await会让后面的promise对象自动执行，执行完成后才会继续执行下一句代码

首先创建三个json文件 : a.json   b.json   c.json
内容分别为 : {"aa" : "hello"}	{"bb" : "world"}	{"cc" : "html"}

function js_pro(url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open("get", url, true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var data = xhr.responseText;
                    resolve(data);
                } else {
                    reject("404");
                }
            }
        }
    })
}
async function fun1(){
    let data1=await js_pro("a.json");	//自动执行
    let data2=await js_pro("b.json");
    let data3=await js_pro("c.json");
	return data3;	//返回promise对象
}
fun1().then(res=>{
    console.log(res);
}).catch(res=>{
	console.log(res);
})