【JavaScript】解构赋值

【前言】
本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想藉着IT邦帮忙这个平台做整理+再复习。
本系列标题一律以【】标示该篇文章主要涉及的内容，例如【JavaScript】、【Vue】等等。
若内容有误，还麻烦各路大神不吝於点出问题，感激不敬。

什麽是解构赋值？

首先，解构赋值是ES6的新语法糖
在【JavaScript】几个语法糖中我们有提过一些语法糖
语法糖对语言的功能没有影响，它们并不会影响运作，逻辑与原本JavaScript语法一样，但可以更方便
既然解构赋值是语法糖，那它到底方便了些什麽呢？

过去要将阵列中的值取出来赋予到变数上，我们可能会这样写：

const colors = ["white", "black", "red"];
const firstColor = colors[0];
const secondColor = colors[1];
const thirdColor = colors[2];
console.log(firstColor,secondColor,thirdColor); //white black red

要一行一行的宣告变数然後赋值，解构赋值让我们可以这样写：

const colors = ["white", "black", "red"];
const [firstColor,secondColor,thirdColor] = colors;
console.log(firstColor,secondColor,thirdColor); //white black red

简单来说，解构赋值会将＝右边的资料镜射到左方的变数上
在这个案例中，新变数就会分别对应阵列colors索引0 1 2的值

如果手痒将左边写成这样也会跳过：

const colors = ["white", "black", "red"];
const [　,secondColor,thirdColor] = colors;
console.log(secondColor,thirdColor); //black red

它会依照左方的排列顺序，对应阵列中的值赋予上去
遇到空的就跳过
如果超过的话则会是undefined

const colors = ["white", "black"];
const [firstColor,secondColor,thirdColor] = colors;
console.log(firstColor,secondColor,thirdColor); //white black undefined

物件的解构赋值

过去我们将变数中的值取出来赋值到变数上可能会这样写：

const person = {
    name: "ming",
    age: 20
}
const age = person.age;
console.log(age);　//20

现在有了解构赋值我们可以这样写：

const person = {
    name: "ming",
    age: 20
}
const {age} = person;
console.log(age); //20

使用const { 变数 } = 物件名称，以这个案例为例，从person物件中将age这个属性单独取出来变成一个变数age
不过要注意的是，这里是将物件内特定属性取出来当作单一变数（因此也要物件中有该属性才可以）

也可以解构赋值物件中的方法：

const person = {
    name: "ming",
    age: 20,
    fn: function(){}
}
const {fn} = person;
console.log(fn); //function(){}

要特别注意的是语法是const { 变数 } = 物件名称
如果因为是函式而写成const {fn()} = person;是错误的

解构也可以加入预设值：

const person = {
    name: "ming"
}
const {age = 20} = person;
console.log(age); //20

当物件内没有变数名称的属性时，自动帮你在这个变数上赋予预设值