iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0
Modern Web

一步一腳印,我的前端工程師修煉系列 第 17

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

  • 分享至 

  • xImage
  •  

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

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

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

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

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

字串模組的基本應用
在 ES6 中,我們多了一個非常好用的字串模組語法,使用的情境如下:

會在 JS「放入 HTML 的內容」。
或者是整個要放入的字串太長而需要換行時。
字串連結變數的需求
字串模組的使用非常簡單,就是使用反引號 `(鍵盤左上角的 ~ 鍵),下面是幾個範例說明。

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


上一篇
Day 16 | import & export 模組學習心得
下一篇
Day 18 | 變數和資料型別學習心得
系列文
一步一腳印,我的前端工程師修煉30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言