ES6 的一些新函数（不定时更新）

Generator 函数

简介

---

Generator函数是ES6提供的一种异步编程解决方案，Generator函数除了状态机，还是一个遍历器对象生成函数。形式上，Generator函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号，二是，函数体内部使用yield语句，定义不同的内部状态。

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}

next 方法从上一次定下来的地方开始执行。直到下一个yield停下。每次调用next，都会返回一个对象，对象包括value 和 done 属性。
next 中也可以传值，传的值作为上一次异步任务的返回结果。
举个栗子：

function* gen() {
    let _url = 'www.baidu.com';
    let y = yield fetch(_url);
    console.log(y.info);
}

const data = {};
let g = gen();

function fetch(Str) {
    data.info = Str.split('.')[1];
    return Str.split('.')[1];
}

g.next();    //  { value: 'baidu', done: false}
g.next(data) //  { value: undefined, done: true}  输出 baidu  

上述栗子第一次传入的2会被返回值 x + 2接收，返回 1+ 2 = 3 ； 第二次传入的3被y接收，返回3 。

有了这个概念，就可以分析ES6d 案例了。

function* fibs() {
  let a = 0;
  let b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

let [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

根据定义可以知道Generator函数 可以遍历，也就是具有Iterator接口。解构赋值时，每次都会执行fibs函数，在函数未完成之前，都会循环赋值， a=b, b= a+b，所以first 到 sixth 的值就是0 ~ 5.

Promise 函数

简介

---

一个Promise对象可以理解为一次需要执行的操作，这种操作可以通过链式的方式来调用和组织代码，这样的代码看起来更直观。

resolve 和 reject

---

resolve 方法将Promise函数的状态变更为成功，同时（只）可以传递一个参数。
reject 方法将Promise函数的状态变更为失败，同时（只）可以传递一个参数。

对于Promise函数，有3个状态：

• Fulfilled 表示成功状态，resolve 函数执行时更改成的状态。
• Rejected 表示失败状态，reject 函数执行时更改成的状态。
• Pending 表示Promise对象在被对象实例化的时候的状态。

then 和 catch

Promise函数之所以看起来很简洁，就是因为所有的链式操作都包含在then 和 catch 中。then 方法中接收2个参数 then(onFulfilled, onRejected) 。举个栗子：

function printHello (ready) {
    return new Promise(function (resolve, reject) {
        if (ready) {
            resolve("Hello");
        } else {
            reject("Good bye!");
        }
    });
}

function printWorld () {
    alert("World");
}

function printExclamation () {
    alert("!");
}

printHello(true)
    .then(function(message){
        alert(message);      //  "hello"
    })
    .then(printWorld)        //  "world"
    .then(printExclamation); //  "!"

上面所有的then方法中执行的操作均处基于 printHello 的状态是fulfilled。
同时，then 函数中也可以有返回值，返回值会作为后续操作的参数。栗子:

printHello(true).then(function (message) {
    return message;
}).then(function (message) {
    return message  + ' World';
}).then(function (message) {
    return message + '!';
}).then(function (message) {
    alert(message);
});

只会打印出 ‘Hello World !’；

catch

上面的栗子只在then方法中传入了一个参数 onFulfilled，第二个参数可以省略，也可以作为第二个参数卸载then方法中，也可以通过catch函数链接在then 方法后面。所以上面的代码如果需要加上错误处理的话，可以这样子：

printHello(true)
    .then(function(message) {
        return message;
    })
    .catch(function(err) {
        console.log(err);
    })
    .then(function(message) {
        return message + ' World';
    })
    .catch(function(err) {
        console.log(err);
    })
    .then(function(message) {
        return message + '!';
    })
    .catch(function(err) {
        console.log(err);
    })
    .then(function(message) {
        alert(message);
    })
    .catch(function(err) {
        console.log(err);
    });

这样子代码就很简洁。将异步的操作通过链式的方式变成了同步。
注： 如果用了then 和 catch ， 那么他们都只能接收一个参数。

Promise.all

Promise.all 可以接收一个元素为 Promise 对象的数组作为参数，当这个数组里面所有的 Promise 对象都变为 resolve 时，该方法才会返回。栗子：

var p1 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("Hello");
    }, 3000);
});

var p2 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("World");
    }, 1000);
});

Promise.all([p1, p2]).then(function (result) {
    console.log(result); // ["Hello", "World"]
});

虽然P2在执行比P1快，但是Promise.all 方法会按照数组里面的顺序将结果返回。所以输出是在3秒后。

Promise.race

Promise.race 和 Promise.all 很像，都接收一个数组，但是在数组中的promise对象只要有一个状态发生改变就会返回。而且只返回一次。

var p1 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("Hello");
    }, 3000);
});

var p2 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("World");
    }, 1000);
});

Promise.race([p1, p2]).then(function (result) {
    console.log(result); // "World"
});