前言
解構與字串模組都是 ES6 新增加的特性,也是在撰寫 React 專案時,很常會使用到的語法,接下來就會針對解構 & 字串模組來說明如何使用。
解構的基本應用
以陣列為例子說明
在這裡將以很常見的陣列來講解解構和 rest 參數語法的基本應用,下面是幾個範例說明。
範例一
透過以上的範例說明,陣列實際應用起來的寫法其實很簡單,並沒有什麼很特別的語法要注意,就是使用 = (等號) 來左邊寫上宣告的變數或常數、右邊寫上要給予的數值,互相來讓右邊對應到左邊,最後當沒有對應的值時,就會得到 undefined。
以物件為例子說明
在這裡將以物件來講解解構的基本應用,這裡要注意的是物件有自己的專屬符號也就是使用 ({}) 大括號來定義,下面是幾個範例說明。
範例二
透過以上的範例說明,物件實際應用起來的寫法其實很簡單,只要注意好物件都是使用 ({}) 大括號且都是 key 對應 value 的關係,哪使用起來就應該也沒有多大的問題才是。
字串模組的基本應用
在 ES6 中,我們多了一個非常好用的字串模組語法,使用的情境如下:
會在 JS「放入 HTML 的內容」。
或者是整個要放入的字串太長而需要換行時。
字串連結變數的需求
字串模組的使用非常簡單,就是使用反引號 `(鍵盤左上角的 ~ 鍵),下面是幾個範例說明。
範例三
結論
這週的 ES6 文章,跟前幾週寫的 ES6 文章,其實都是為了在準備 React 而做準備,但除了這些 ES6 的文章,整體而言還是很需要對基礎的 JavaScript 要有一定了解才行,所以今年整個文章的圍繞會跟基本的 JavaScript、ES6、React 相關,就讓我們一起加油吧。