javascript ES5之後實用語法

前言：

很多人只會寫ES5語法，造成程式碼攏長，難以閱讀，JavaScrip從2015年後，每年都增加新的語法，來讓程式的寫法可以更精簡、可讀性更高以及更好維護，以下會介紹一些實用的語法，並放上前後差異來比對。

 

let&const:

在宣告變數的時候使用let，在宣告常數的時候使用const，不要去使用var，因為var的作用域會往上提升，造成除錯的困難。

 

變數提升造成作用域外還是呼叫得到

 

使用const就會照預期出現錯誤

 

 

用var可以進行重複宣告，const和let重複宣告會產稱錯誤

正確的寫法

模板字符串:

增加可讀性，尤其是在複雜的字串組合。

可以在字串內直接引用變數

 

 

箭頭函數：

透過arror function可以精簡function的宣告，實現lambda的寫法。

有大括號不return，沒大括號代表return的值

 

要注意的是，普通function的this，指向自己，arror function的this，指向外層

陣列處理：

陣列處理多了很多分法，可以結合lamda，可以更短，且可讀性更佳的方式寫出相同的功能。

 

foreach:讓陣列裡的東西都做同一件事。

 

ex: 把陣列裡的元素印出來

 

 

map:置換陣列內的元素。

 

ex: 把陣列內的元素都+1

宣告一個陣列來收集for loop處理的元素

 

 

filter:濾掉不符合條件的元素。

 

ex: 濾掉小於2的元素

宣告一個陣列來收集for loop判斷出來的元素

 

 

reduce:設置一個累加器，讓元素通過指定的function進行累加。

 

ex: 把所有元素相加

 

宣告一個變數，再用for loop去加

 

以上幾種是ES5, ES6時代就有的東西，下面要介紹的幾種是更後面才出來的，所以用出現前和出現後做比較。

 

includes:查看陣列裡是否存在某元素。

 

ex: 查看是否存在3

先filter，再判斷個數

 

find:在陣列裡找出某個元素。

 

ex: 找出id=1的元素。

先轉換成id陣列在找出index，最後使用index找原本的陣列

 

flat:打平陣列，在處理多層陣列時非常有用，舊的寫法陣列維度越高，code就越複雜。

 

ex:解開2維陣列

多層的for loop，非常難看懂

參數帶1代表解開1層

 

async/await:

ES6之後，增加了很多非同步處理的method，但現在各大框架下，各自有處理非同步的機制，例如React - Redux, Angular - Rxjs...，基本上很少在用promise了，但如果需要將非同步轉為同步，轉成promise來處理也是很方便的。

 

 

ex: 要在收到回傳後再結束

 

 

Optional chaining operator:

和java的Optional一樣，用來避免NullPointerException，但在js中寫法更簡潔。常常用在前端接到API的物件後，判斷是否有值。

 

 

ex: 假設API查不到就回null，查得到就回List，要取這個Array的長度(正常的restfulApi查不到應該要回傳空的陣列)

 

這邊直接假設回覆是null

舊的寫法運用&&運算子，當兩個條件達成時，會回傳最後一個的值的特性

直接使用?.就可以避開錯誤了