【JavaScript】物件、阵列 解构赋值 (Destructuring Assignment)

赋予值

一开始在学习 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