前端時空
前端網紅集結號，傳遞一線全棧技術，帶你穿越前端時空。
前端時空-前端老王翻譯整理
都 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 函數作用域
在聲明變量之前訪問變量時 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 作為其結果。
請注意，使用異步函數的代碼的語法和結構看起來像常規同步函數。
關鍵字 await僅在異步函數中起作用。它使程序等待，直到 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性能和安全有一定的瞭解；
- 工作踏實認真、仔細、責任心強，具備良好的學習能力、自我管理能力、有良好的編碼習慣；
聯繫方式
閱讀更多 前端時空 的文章
