你點的 ES6 小技巧，請查收

原文地址：https://medium.freecodecamp.org 作者：rajaraodv 摘要：總結ES6新特性：默認參數、reduce、解構賦值和Set在使用時的一些小技巧。

ES6出來已經有好幾年了，同時很多新特性可以被巧妙地運用在項目中。我想要列下其中一些，希望它們對你有用。

如果你還知道其他一些小技巧，歡迎留言。我很高興把它們補充進來。

1. 強制要求參數

ES6提供了默認參數值機制，允許你為參數設置默認值，防止在函數被調用時沒有傳入這些參數。

在下面的例子中，我們寫了一個 函數作為參數a和b的默認值。這意味著如果a或b其中有一個參數沒有在調用時傳值，會默認 函數，然後拋出錯誤。

2. 強大的reduce

數組的reduce方法用途很廣。它一般被用來把數組中每一項規約到單個值。但是你可以利用它做更多的事。

2.1 使用reduce同時實現map和filter

假設現在有一個數列，你希望更新它的每一項（map的功能）然後篩選出一部分（filter的功能）。如果是先使用map然後filter的話，你需要遍歷這個數組兩次。

在下面的代碼中，我們將數列中的值翻倍，然後挑選出那些大於50的數。有注意到我們是如何非常高效地使用reduce來同時完成map和filter方法的嗎？

2.2 使用reduce取代map和filter

如果你認真閱讀了上面的代碼，你應該能理解reduce是可以取代map和filter的。

2.3 使用reduce匹配圓括弧

reduce的另外一個用途是能夠匹配給定字元串中的圓括弧。對於一個含有圓括弧的字元串，我們需要知道 和 的數量是否一致，並且 是否出現在 之前。

下面的代碼中我們使用reduce可以輕鬆地解決這個問題。我們只需要先聲明一個 變數，初值為0。在遇到 時counter加一，遇到 時counter減一。如果左右括弧數目匹配，那最終結果為0。

2.4 統計數組中相同項的個數

很多時候，你希望統計數組中重複出現項的個數然後用一個對象表示。那麼你可以使用reduce方法處理這個數組。

下面的代碼將統計每一種車的數目然後把總數用一個對象表示。

reduce的其他用處實在是太多了，我建議你閱讀MDN的相關代碼示例。

3. 對象解構3.1 刪除不需要的屬性

有時候你不希望保留某些對象屬性，也許是因為它們包含敏感信息或僅僅是太大了（just too big）。你可能會枚舉整個對象然後刪除它們，但實際上只需要簡單的將這些無用屬性賦值給變數，然後把想要保留的有用部分作為剩餘參數就可以了。

下面的代碼里，我們希望刪除 和 參數。我們可以把它們賦值給 和 變數，然後在 中存儲剩下的屬性以備後用。

3.2 在函數參數中解構嵌套對象

在下面的代碼中， 是對象 中嵌套的一個對象。如果我們對 的 屬性感興趣，使用解構賦值可以很輕鬆地得到它。

3.3 合併對象

ES6帶來了擴展運算符（...）。它一般被用來解構數組，但你也可以用它處理對象。

接下來，我們使用擴展運算符來展開一個新的對象，第二個對象中的屬性值會改寫第一個對象的屬性值。比如 的 和 就會改寫 的同名屬性。

4. Sets4.1 使用Set實現數組去重

在ES6中，因為Set只存儲唯一值，所以你可以使用Set刪除重複項。

4.2 對Set使用數組方法

使用擴展運算符就可以簡單的將Set轉換為數組。所以你可以對Set使用Array的所有原生方法。

比如我們想要對下面的Set進行filter操作，獲取大於3的項。

5. 數組解構

有時候你會將函數返回的多個值放在一個數組裡。我們可以使用數組解構來獲取其中每一個值。

5.1 數值交換

5.2 接收函數返回的多個結果

在下面的代碼中，我們從 中獲取一個帖子，然後在 中獲取相關評論。由於我們使用的是 ，函數把返回值放在一個數組中。而我們使用數組解構後就可以把返回值直接賦給相應的變數。

前端大學 -

關注web前端開發、IT編程資料分享。關注即可獲得新技能！

其它功能正在完善，不定期更新....

覺得本文對你有幫助？請分享給更多人

關注「前端大學」，提升前端技能

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！