ES6

javascript ES5之後實用語法

李尚儒 2021/06/28 18:14:20
314

前言

很多人只會寫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

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

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






李尚儒