賦予值

一開始在學習 JavaScript 時，常需要宣告參數並賦予值，而等號右邊便是宣告參數的值。

範例中宣告兩個參數分別為 device、fruit ，他們的值分別為陣列 ['mobile', 'ipad', 'desktop']，和物件 { 'banana': 20, 'orange': 10 }，下方為常見賦予值的陳述式。

  const device = ['360', '768', '1024'];
  const fruit = { 'banana': 20, 'orange': 10 };

解構賦值

假設不是賦予值，而是要取得相對應的值時，就會以鏡像的方式解構語法取得相對應的值，稱為「解構賦值」，例如：

  const [mobile, tablet, desktop] = [360, 768, 1024];
  console.log(mobile, tablet, desktop);  // 360, 768, 1024

  const { banana, orange } = { 'banana': 20, 'orange': 10 };
  console.log(banana, orange);  // 20, 10

陣列會返回相對應序列的值, 空的值則返回 undefined

React.js 應用

  const [isMobile, setIsMobile] = useState(true);

React.js 中最常使用的 hook 也是解構賦值的語法，useState hook 會返回一個陣列，第一個陣列內容會對應到 isMobile 的值，第二個則是 setIsMobile 的函式。

參考來源：https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/callback.html