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