在 Gutenberg 開發時必須知道的 5 個 JavaScript 功能

2016 年，Matt Mullenweg 告訴我們：

我要給你一些功課：深入學習 JavaScript (...)，因為它是網絡的未來。

馬特·穆倫韋格（在 YouTube 上）

我不知道三年前你是否聽從了他的建議，但如果你沒有，你不能再推遲了。 塊編輯器的正式發布迫使許多開發人員跟上 JavaScript 的速度。 該語言在 WordPress 中變得越來越重要，如果我們不想落後，我們必須提高我們的技能。

過去，我寫過一篇關於使用 vanilla JavaScript 可以實現什麼的文章，而無需像 jQuery 這樣的庫。 今天我想更進一步，解釋 JavaScript 新版本中的一些新穎性，當你第一次看到它們時會感到震驚。 我認為了解它們很重要，因為它們出現在所有新的 JavaScript 項目中（當然包括 Gutenberg）。

讓我們和 Gutenberg 一起學習 JavaScript！

#1 – 解構對象和數組

假設我們想看看在 Gutenberg 中編輯段落的界面是如何工作的。 如果您閱讀過我們之前關於 Gutenberg 的帖子，您就會知道我們必須查看相關塊的edit組件。 在我們的例子中，這個組件是ParagraphBlock ，我們會在它的渲染方法中找到的第一件事，第 127 行，是這樣的：

這一切是什麼？ 好吧，讓我們從更簡單的事情開始。 想像你有一個像下面這樣的對象：

解構對象和數組可以將數組中的值或對像中的屬性解包到不同的變量中：

通過一個語句，我們就能夠恢復我們post的id 、 title和content 。 這正是 Gutenberg 在我們的第一個片段中所做的：我們提取了this.props的attributes對象、 setAttributes函數、 isRTL屬性等。

更令人困惑但同樣有趣的是從嵌套對像中提取屬性的可能性。 也就是說，從這樣一個對像開始：

我們可以檢索post中的值以及嵌套對像中的值，例如author中的id或name ：

現在請注意：每次我們解構一個對象時，我們創建的變量與我們要提取的屬性具有相同的名稱。 這就引出了一個問題：如果我們想從不同的嵌套對像中恢復多個id屬性會發生什麼？ 例如，在我們的例子中， post和它的嵌套對象author都有一個id ，所以……

我們可以把這兩個值拉出來嗎？ 解決方案在於別名：

也就是說，我們可以同時指定要提取的屬性（例如author.id ）和將保存其值的變量的名稱（ authorId ）。

最後，讓我告訴你解構也適用於數組：

以及函數參數。 也就是說，如果我們函數中的一個參數是一個對象，我們可以在函數定義本身中對其進行解構：

很方便吧？

#2 – 箭頭函數

另一個相當常見的例子。 如果您查看 Gutenberg 圖像塊的標題，您將在第 693 行看到以下內容：

括號中的value是多少？ 為什麼會有箭頭？ 裡面有花括號的setAttributes是怎麼回事？ 啊！！

好吧，讓我們一步一步解密。 當你看到像=>這樣的箭頭時，你就遇到了一個箭頭函數。 箭頭函數可能與經典函數極為相似，但它們使用的語法略有不同：

箭頭函數的主要優點是可以進一步簡化，使代碼更加緊湊。 例如，如果您的函數只有一條指令，您可以保存花括號和return關鍵字，因為該函數將自動返回評估其唯一語句的結果：

我們可以做的另一個簡化是它的參數列表中的括號。 如果我們正在編寫一個具有單個參數的函數，則括號變為可選：

#3 – 擴展和休息運算符

回到段落塊，看看第 64 行：

有沒有搞錯？

好吧，讓我向您介紹一下擴展運算符： ... 。

擴展語法允許在預期零個或多個參數（對於函數調用）或元素（對於數組字面量）的地方擴展諸如數組表達式或字符串之類的可迭代對象，或者在零個或多個參數的地方擴展對象表達式鍵值對（用於對象文字）是預期的。

讓我們從最簡單的例子開始。 假設我們有一個包含一定數量元素的數組，我們想把它放在另一個數組中。 我們可以通過以下方式實現：

有了它，我們在另一個數組（ result ）中“擴展”（因此是運算符的名稱）一個數組（ list ）的元素。

這也適用於對象：

現在看下面的例子（這是我們打開本節的古騰堡例子的副本）：

如果我擴展兩個具有共同屬性的對象，則生成的對象將包含兩個對象的屬性的聯合，並且對於每個“重複”屬性，它將包含右側對象的值。 因此，例如，在兩個對像中重複的title屬性包含對象newAttributes的值，而其他屬性（一方面是author ，另一方面是words ）出現在結果中，它們只能包含它們的值.

#4 – 模板文字

模板文字在古騰堡中被廣泛使用。 您可以在以下index.js的第 133 行中看到一個示例：

或者，更複雜的是內聯 136：

模板文字是允許嵌入表達式的字符串文字。 您可以使用多行字符串和字符串插值功能。 在 ES2015 規範的早期版本中，它們被稱為“模板字符串”。 這裡有另一個例子，類似於我們剛剛看到的第一個例子：

現在，第二個例子發生了什麼？ 基本上，我們正​​在創建一個具有“名稱”是動態屬性的對象（一些使用變量，另一些使用模板文字）。 讓我們用一個更簡短的例子來看看這個：

比你想像的要容易，不是嗎？

#5 –再見了

最後，我想用幾個對處理數組非常有用的函數來結束這篇文章，這些函數你應該已經很熟悉了。 例如，兩者都可以在 Gutenberg 列的塊中找到。 事實上，我說的是map （第 136 行）和reduce （第 119 行）。 讓我們看看它們各自的用途以及如何使用它們。

map方法創建一個新數組，其結果是在調用數組中的每個元素上調用提供的函數：

基本上，它是一種遍歷數組的所有元素（即for語句）並在每個元素（經典for的“主體”）中應用一個函數的方法。

reduce方法與map非常相似，但它不是返回一個數組，其元素是對原始元素應用函數的結果，而是返回一個值。 也就是說，一種允許您將函數應用於累加器和數組的每個值（從左到右）以將其減少為單個值的方法。 例如：

包起來

如您所見，新版本的 JavaScript 添加了允許更高效、更舒適地編寫代碼的結構，但一開始它的語法可能會令人困惑。 我希望今天的文章可以幫助您了解 JavaScript 的新特性以及如何使用它的新結構和功能。

我真的很喜歡 JavaScript 的發展方式，因為我認為它可以讓你編寫更好、更易讀的代碼（當然，一旦你知道如何閱讀它）。 你怎麼看？ 看完這篇文章，你是否已經渴望一勞永逸地“深入學習 JavaScript”？

羅斯芬登在Unsplash上的特色圖片。