【esX标准】es10都来了，依旧还是要谈谈他们

写在前面

年前已经在脚手架里加入Optional Chaining的babel
也终于等来编译器对其的兼容（使用vscode）
于是突然想起了这些老朋友，这篇文章是我对es56710的几个标准印象深刻的且面试经常会问到的总结。

（～～emmm 因为最近在观望机会，所以基础的知识最近都在回顾，希望能够给即将面试的小伙伴一些帮助）

bind call apply

es5的语法，以前的我们无论是写代码或者是面试都经常性的碰到此类问题。
因为其中都涉及了this指针的问题。

this:this指针代表的是执行当前代码的对象的所有者
（人话）this指针永远指向最后调用的函数

语法	返回值	传参
apply	返回调用函数的返回值	指针、<Array>参数 以数组形式向里传值
call	返回调用函数的返回值	指针、[,argument[,argumen]...]这是一个参数列表
bind	创建一个新的函数并返回此函数	指针、[,argument[,argumen]...]这是一个参数列表

fn.apply(a,[1,2]);
fn.call(a,1,2)
fn.bind(a,1,2)()

但是如今我们已经在普遍的使用箭头函数，甚至在面试里我都不会再问这个问题了（没有别的意思，如果在面试中问到此类问题也是在考验你啦）

this指针已经很久没有困扰过我了

async/await/promise/generator（no more callback）

generator

首先出场的是generator，也是我几几个认为最难理解，且也是最能装逼的一个语法。

generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次(廖雪峰老师原话)
我的傻瓜理解即是他可以使得异步的操作必须完成后，再进行下一步我们期待的操作。

简述用法：

  function *fnname(){
     yield 1+2;   
     yield ...
     return  ...
  }
  fnname.next(); //第一个yield返回{value:此yield的值,done:是否完成此生成器的布尔值}
  //这里的return也能返回值哦

是不是很像我们的asyncawait。

async await

es7中正式发布此类语法糖，其实它是generator与promise结合的语法糖

简述用法:

  async function name (){
    await fetch('url')
  }

而两者的区别在哪里呢？

• 将*转为async，并且至于function最前
• 将yield转为awiat，并且不再return
• await后返回的是Promise对象，需要.then获取拿出，而Generator的return出具体的结果
• async 自带执行器，而generator必须依靠执行器
• yield后只能跟上thunk函数或者promise对象
• async await则可以是promise或者是原始类型

promise

其实我个人在封装底层组件的时候，经常使用的还是promise。

他的prototype是个promise对象。

Object.prototype.toString.call(promise) === '[object Promise]'

状态

• _pending_: 初始状态，既不是成功，也不是失败状态。
• _fulfilled_: 意味着操作成功完成。
• _rejected_: 意味着操作失败。

API	理解
Promise.all(iterable)	运行iterable里的所有promise,所有promise成功则返回所有promise成功后的返回值（数组形式）。否则返回第一个的reject
Promise.race(iterable)	当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象
Promise.reject(reason)	返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法
Promise.resolve(value)	返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。通常而言，如果你不知道一个值是否是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。

我使用的场景:

• websocket的轮子
• 需要大量与业务层交互的组件

Optional Chaining（全场最佳，真香）

以前，我们对接完接口都心惊胆战，怕服务端大佬没数据的时候返回格式未保持原来的约定。
于是会出现报错

以前的我们怎么处理？

 const result = data.address && data.address.street &&data.address.street.result;

如果是蜂窝煤数据，我们就让他报错 一层一层去寻找

Optional Chaining是如何让我们能够优雅的处理以上困扰呢

const result = data?.address?.street?.result;

一旦与一层不存在就会返回undefind;

废话

使用新语法标准记得要引入babel pollify可以有效的使兼容性提高