[ES6] 解構 & 字串模組學習心得

前言

解構與字串模組都是 ES6 新增加的特性，也是在撰寫 React 專案時，很常會使用到的語法，接下來就會針對解構 & 字串模組來說明如何使用。

解構的基本應用

以陣列為例子說明

在這裡將以很常見的陣列來講解解構和 rest 參數語法的基本應用，下面是幾個範例說明。

範例一

透過以上的範例說明，陣列實際應用起來的寫法其實很簡單，並沒有什麼很特別的語法要注意，就是使用 = (等號) 來左邊寫上宣告的變數或常數、右邊寫上要給予的數值，互相來讓右邊對應到左邊，最後當沒有對應的值時，就會得到 undefined。

以物件為例子說明

在這裡將以物件來講解解構的基本應用，這裡要注意的是物件有自己的專屬符號也就是使用 ({}) 大括號來定義，下面是幾個範例說明。

範例二

透過以上的範例說明，物件實際應用起來的寫法其實很簡單，只要注意好物件都是使用 ({}) 大括號且都是 key 對應 value 的關係，哪使用起來就應該也沒有多大的問題才是。

字串模組的基本應用

在 ES6 中，我們多了一個非常好用的字串模組語法，使用的情境如下：

• 會在 JS「放入 HTML 的內容」。
• 或者是整個要放入的字串太長而需要換行時。
• 字串連結變數的需求

字串模組的使用非常簡單，就是使用反引號 `（鍵盤左上角的 ~ 鍵），下面是幾個範例說明。

範例三

結論

這週的 ES6 文章，跟前幾週寫的 ES6 文章，其實都是為了在準備 React 而做準備，但除了這些 ES6 的文章，整體而言還是很需要對基礎的 JavaScript 要有一定了解才行，所以今年整個文章的圍繞會跟基本的 JavaScript、ES6、React 相關，就讓我們一起加油吧。