【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能够有效的使兼容性提升