【譯】React 中你會這 10 個 JavaScript 概念嗎？

公衆號「前端時空」每日一題活動

回覆「1」看面試題 | 回覆「2」看答案

前端時空-前端老王（翻譯整理）

語雀： www.yuque.com/fest/artice…

都 2020 年了，再不掌握 ES6，說不定就被優化了。

目錄

1. 箭頭函數
2. 默認參數
3. 模板字符串
4. let 和 const
5. 類
6. 解構
7. 三元運算符
8. 導入/導出模塊
9. async / awite
10. 展開運算符 / 不定參數

箭頭函數

您可能知道，定義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   

1. 塊做用域   

2. 在聲明以前訪問變量時 ReferenceError

const  

1. 塊做用域  

2. 在聲明以前訪問變量時，ReferenceError

3. 沒法從新分配

4. 聲明時應初始化

在 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（高階組件），則知道您須要將全部屬性傳遞給封裝的組件。展開運算符可以爲此提供幫助。

文末彩蛋：附上一則招聘信息

關於咱們

1. 工做團隊：騰訊雲中間件產品中心
2. 工做地點：深圳騰訊大廈
3. 服務業務：騰訊雲Serverless平臺（SCF）、微服務平臺（TSF）、API網關等

工做要求

1. 本科及以上學歷，計算機相關專業；2年以上的相關工做經驗，能獨立完成模塊開發和單元測試；
2. 可以熟練運用 HTML五、CSS三、javascript構建高性能的web應用程序,熟悉ES6語法；
3. 熟悉React框架,並有項目經驗，或有Vue經驗能夠接受轉React；
4. 有Node.js實踐經驗；
5. 熟悉前端工程化與模塊化開發，掌握webpack；
6. 悉網絡協議，熟悉常見安全問題和對策，對Web性能和安全有必定的瞭解；
7. 工做踏實認真、仔細、責任心強，具有良好的學習能力、自我管理能力、有良好的編碼習慣；

聯繫方式

wescai@tencent.com

                                                          往期精彩文章

                                                    前端響應式你瞭解多少？

                                 理想主義團隊的開源做品之Chameleon跨端框架

                                         一分鐘理解 JavaScript 發佈訂閱模式

                                                      前端首屏耗時測量方法

                                                  大消息，Github 收購 NPM

                                          一道面試題引起關於 js 隱式轉換的思考

                                                         喜歡咱們的小夥伴

                                     能夠點贊、分享、評論，關注咱們的公衆號。