(ES6)有用的提示與技巧
EcmaScript 2015(ES6)已經出來好幾年了,可以巧妙地使用各種新功能。列出並討論其中一些,你會發現它們很有用。如果你知道其他好方法,請在評論中回覆。
1.必傳引數
ES6提供了預設引數值,沒有該引數的情況下呼叫函式時使用的預設值。
在以下示例中,將required()函式設定為 a 和 b 引數的預設值。 這意味著如果未傳遞a或b,則呼叫required()函式,將收到錯誤。
2.強大的“reduce”
Array的reduce方法非常通用。它通常用於將專案陣列轉換為單個值,但是你可以用它做更多的事情。
大多數這些技巧都依賴於初始值是陣列或物件而不是像字串或變數這樣的簡單值。
2.1 使用reduce同時進行 map 和 filter 操作
假設有一個專案列表的情況,並且想要更新每個專案(即 Array.map 操作),然後只過濾幾個專案(即 Array.filter ),這意味著需要兩次迴圈遍歷列表!
在下面的示例中,我們希望將陣列中的項的值加倍,然後選擇大於50的項。我們使用強大的 reduce 方法高效的同時做到:
2.2 使用 “reduce” 代替是 “map” 或 “filter”
如果仔細檢視上面的示例(2.1),就會知道 reduce 可以代替 map 或 filter !
2.3 使用 reduce 來判斷括號是否對稱
2.4 計算重複的陣列項(轉換陣列→物件)
有時你希望複製陣列項或將陣列轉換為物件。 你可以使用 reduce。
在下面的例子中,計算cars 中每個值重複數量,並將這組對應的資料放到一個物件中:
reduce 還可以做更多的事情,建閱讀 MDN上列出的示例。
3. 物件解構
3.1 屬性挑揀
有時候你想挑揀需要的屬性排除一些平需要的屬性(可能是因為它們包含敏感資訊或者太大了)。我們不需要遍歷整個物件來挑揀它們,只需將這些不需要的資料提取到對應變數中,並將有用的儲存在rest引數中。
在下面的示例中,我們不需要的屬性如_internal和tooBig屬性,我們可以將它們分配給_internal和tooBig變數(名字要一樣),並將剩餘的儲存到在 rest
3.2 在函式引數中分解巢狀物件
在下面的示例中,engine 屬性是 car 物件的一個內嵌物件。如果我們想獲取 engine 中的 vin 值,可以使用以下解構方式:
3.3 合併物件
ES6附帶了一個擴充套件操作符(由三個點表示)。它通常用於解構陣列值,但也可以在物件上使用它。
在下面的示例中,我們使用擴充套件操作符(...)在新物件中進行擴充套件。第二個物件中的屬性鍵將覆蓋第一個物件中的屬性鍵:
4.Sets
4.1 使用 set 時行陣列去重
在ES6中,可以使用 set 輕鬆時行陣列去重,因為 set 只允許儲存惟一的值:
4.2 使用陣列的方法
使用擴充套件運算子(...) 將 set 轉換為陣列很簡單且在集合上使用所有陣列方法!
5. 陣列解構
5.1 交換值
5.2 從一個函式接收和分配多個值
在下面的例子中,我們在/post獲取一個post,並在/comments 獲取相關 comments 。由於使用 async/wait
,該函式以陣列的形式返回結果。使用陣列析構,我們可以直接將結果賦值到相應的變數中。
最後:“相信有很多想學前端的小夥伴,今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨,從最基礎的HTML+CSS+JS到移動端HTML5等都有整理,送給每一位前端小夥伴,53763,1707這裡是小白聚集地,歡迎初學和進階中的小夥伴。”
祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。