前端時空
前端網紅集結號，傳遞一線全棧技術，帶你穿越前端時空。
前端時空-前端老王（翻譯整理）
語雀：https://www.yuque.com/fest/artice-translat...
都 2020 年了，再不掌握 ES6，說不定就被優化了。
目錄
箭頭函式
預設引數
模板字串
let 和 const
類
解構
三元運算子
匯入/匯出模組
async / await
展開運算子 / 不定引數
箭頭函式
您可能知道，定義React元件的最簡單方法是編寫 JavaScript 函式，如以下示例所示。
但是還有另一種更加簡潔的方法來建立 React 函式元件。
「箭頭函式」是您在 JavaScript 和 React 應用程式中最多見的函式。
在深入探討如何在 React 中使用它們之前，讓我們看看如何使用箭頭函式。有多種方式可用於編寫箭頭函式。我們將在這裡介紹一些常見的內容，以幫助您入門。
介紹了基本語法，讓我們瞭解如何將箭頭函式與 React 一起使用。除了如上所述定義 React 元件之外，箭頭函式在運算元組以及使用非同步回撥和 Promise 時也非常有用。
在 React 中，我們通常必須從伺服器獲取資料並將其顯示給我們的使用者。為了檢索此資料，我們經常使用 Promise 鏈式呼叫。
Promise 鏈式呼叫得到簡化，易於閱讀，並且使用箭頭函式更加簡潔：
最後，一旦檢索到資料，就需要顯示它。為了在 React 中渲染資料列表，我們必須在JSX內部迴圈。通常使用map / reduce / filter陣列方法來實現。
現在，讓我們看看如何使用 ES6 箭頭函式實現相同的函式。
預設引數
既然我們已經瞭解了箭頭函式，那麼讓我們來談談預設引數。ES6+ 的這一功能使它能夠使用預設值初始化函式，即使函式呼叫不包含相應的引數也是如此。
但是首先，您還記得我們在 ES6 之前使用過的方法來檢查函式中未宣告的引數嗎？您可能已經看過或使用過以下內容：
為了防止函式崩潰或計算無效 / 錯誤結果，我們必須編寫額外的程式碼來測試每個可選引數和分配的預設值。確實，此技術用於避免我們的函式內部發生不良影響。沒有它，任何未初始化的引數將預設為值 undefined。
因此，這是我們在ES6之前如何處理預設引數的簡短摘要。在 ES6 中定義預設引數要容易得多。
如果將 offset，limit 和 orderBy 傳遞給函式呼叫，則它們的值將覆蓋函式定義中定義為預設引數的值。無需額外的程式碼。
⚠️請注意，這 null 被視為有效值。這意味著，如果 null 為其中一個引數傳遞值，則不會採用該函式定義的預設值。因此，請確保使用 undefined而不是 null 當您希望使用預設值時使用。
現在，您知道如何在 ES6 中使用預設引數。那麼預設引數和 React 呢？
在 React 中，您可以使用 defaultProps 屬性為元件屬性設定預設值。但是，這僅適用於類元件。實際上，React 團隊正在棄用 defaultProps 功能元件上的屬性，並且將其刪除。
別擔心！我們可以利用預設引數為 React 函式元件的 prop 設定預設值。請檢視以下示例。
模板字串
模板字串是允許嵌入 JavaScript 表示式的字串。換句話說，就是在字串中輸出變數 / 表示式的一種方式。
在ES5中，我們必須使用 + 運算子將多個值連線起來以連線字串。
在 ES6 中，模板字串由反引號引起來。要在這些模板中插入表示式，我們可以使用${表示式}。
模板字串使這種替換更具可讀性。在 React 中使用它們將幫助您動態設定元件屬性值或元素屬性值。
let 和 const
在 ES5 中，宣告變數的唯一方法是使用 var 關鍵字。ES6 引入了兩種使用 const 和 let。
主要區別：
var
1. 函式作用域
2. 在宣告變數之前訪問變數時 undefined
let
塊作用域
在宣告之前訪問變數時 ReferenceError
const
塊作用域
在宣告之前訪問變數時，ReferenceError
無法重新分配
宣告時應初始化
在 React 應用程式中，const 用於宣告 React 元件。
最佳實踐是預設使用 const,只在確實需要改變變數的值時使用 let。
類
ES6 引入了 JavaScript 類。如 MDN 網站文件所述，類主要是語法糖，而不是 JavaScript 現有的基於原型的繼承。有些屬性值得一提，因為它們與使用常規函式編寫的類不太相同。
繼承,這不是特定於 JavaScript 的東西，而是物件導向程式設計中的常見概念。
簡而言之，這是將一個類建立為另一個類的子級的能力。子類將從其父類的屬性繼承（實際上，這比您所使用的 OOP 語言要複雜得多）。
在 ES6 中，extends 關鍵字繼承另一個的類。
在 React 應用程式中，您還可以使用 ES6 類來定義元件。要定義一個 React 元件類，您需要擴充套件 React.Component 基類，如下所示：
通過建立這樣的元件，您將可以訪問與 React 元件相關的一堆方法和屬性（狀態，屬性，生命週期方法等）。請檢視 React 文件以獲取 React.Component 類的詳細 API 參考。
解構
在 React 中非常經常使用解構。這是一個可以與物件以及陣列一起使用的概念。分解是簡化 JavaScript 程式碼的一種簡便方法，因為它使我們可以在一行中將資料從物件或陣列中拉出。
陣列解構與物件解構相似，不同之處在於我們按照資料在陣列中出現的順序將資料一一拉出。
讓我們直接來看看它在 React 應用程式中的用法。
三元運算子
三元運算子用作 if 語句的簡潔方式。典型 if 語句的語法如下：
條件為真，執行第一條語句（在冒號之前:）。條件為假（false，null，NaN，0，””或未定義），執行第二條語句（在冒號之後:）。
雖然有時候程式碼會很簡潔，但是可讀性會降低，所以請謹慎使用。
在 React 中，三元運算子使我們可以在 JSX 中編寫更簡潔的條件語句。通常使用它來根據條件決定顯示或隱藏哪個元件。
匯入 / 匯出模組
在 ES6 之前，由於 JavaScript 不支援模組，我們使用了 RequiredJS 或 CommonJS 之類的庫來匯入 / 匯出模組。您可能之前已經看過，特別是如果您已經使用過 Node.js。
在 ES6 中，我們可以直接使用 exportand import 語句來處理應用程式中的模組。
這在 React 中非常有用，因為我們正在將應用程式 UI 劃分為元件層次結構。元件在自己的檔案中定義，其他元件則需要匯入或者匯出，例如以下示例：
async / await
您可能熟悉非同步程式設計的概念。在 JavaScript 中，它們是使用非同步程式碼的許多方法（回撥，Promise，諸如 bluebird 和 deferred.js 等外部庫）。在這裡，我們只是簡單的提及 async / await。
async / await 是一種特殊的語法，可以以更舒適的方式處理 Promise。
如果您需要了解 Promise，請檢視 MDN 中的詳細講解。
您可能已經注意到，有兩個新關鍵字：async 和 await。
讓我們首先從 async 關鍵字開始。非同步用於定義非同步函式，該函式返回隱式 Promise 作為其結果。
請注意，使用非同步函式的程式碼的語法和結構看起來像常規同步函式。
關鍵字 awai t僅在非同步函式中起作用。它使程式等待，直到 Promise 成功並返回其結果。這是一個 Promise 在幾秒鐘後 resolve 的示例：
與使用相比 Promise.then()，這是獲得 Promise resolve 的一種更為優雅的方法，此外，它更易於讀寫。
⚠️請小心，因為 await 不能在常規函式中使用。如果這樣做，則會出現語法錯誤。
值得一提的是 async / await 是如何處理錯誤。實際上，如果一個 Promise 能夠正常 resolve，它就會返回結果。但是，如果 reject，則會引發錯誤。您可以使用 Promise catch 方法或 try..catch 與常規丟擲相同的方式來處理錯誤。
我將 async / await 包含在此列表中是因為在每個前端專案中，我們正在做很多需要非同步程式碼的工作。一個常見的例子是當我們想通過 API 呼叫獲取資料時。
在 React 中，這就是我們可以使用 promises + async / await 做到的。
展開運算子 / 不定引數
展開運算子和不定引數由三個點表示…。在展開運算子的情況下，它將可迭代擴充套件為單個元素。對於不定引數，它將其餘引數列表收集到一個陣列中。
讓我們看一些示例，以瞭解它們如何工作以及如何使用它們。
展開運算子在 Redux 之類的庫中得到了廣泛使用，以不變的方式處理應用程式狀態。但是，這也常與 React 一起使用，以輕鬆傳遞所有物件的資料作為單獨的屬性。這比逐個傳遞每個屬性要容易。
如果您以前聽說過 HOC（高階元件），則知道您需要將所有屬性傳遞給封裝的元件。展開運算子能夠為此提供幫助。
文末彩蛋：附上一則招聘資訊
關於我們
工作團隊：騰訊雲中介軟體產品中心
工作地點：深圳騰訊大廈
服務業務：騰訊雲Serverless平臺（SCF）、微服務平臺（TSF）、API閘道器等
工作要求
本科及以上學歷，計算機相關專業；2年以上的相關工作經驗，能獨立完成模組開發和單元測試；
能夠熟練運用 HTML5、CSS3、javascript構建高效能的web應用程式,熟悉ES6語法；
熟悉React框架,並有專案經驗，或有Vue經驗可以接受轉React；
有Node.js實踐經驗；
熟悉前端工程化與模組化開發，掌握webpack；
悉網路協議，熟悉常見安全問題和對策，對Web效能和安全有一定的瞭解；
工作踏實認真、仔細、責任心強，具備良好的學習能力、自我管理能力、有良好的編碼習慣；
聯絡方式
往期精彩文章
前端響應式你瞭解多少？
理想主義團隊的開源作品之Chameleon跨端框架 手把手教你搞定 vue-cli4 配置
一分鐘理解 JavaScript 釋出訂閱模式
前端首屏耗時測量方法
大訊息，Github 收購 NPM
一道面試題引發關於 js 隱式轉換的思考
喜歡我們的小夥伴
可以點贊、分享、評論，關注我們的公眾號。
本作品採用《CC 協議》，轉載必須註明作者和本文連結