JavaScript学习日记 : Day23 - 解构赋值

解构赋值(Destructuring Assignment)是一个在ES6的新特性，用於提取阵列或物件中的资料，解构赋值可以想像是镜子的概念，将右方的资料往左边送，然後会一个位置对一个值 (但没有像镜子左右颠倒)。

数组

过去阵列内的元素在赋值的时候只能透过底下例子:

let users = ["John", "David","Tina"];
let userA = users[0];
let userB = users[1];
let userC = users[2];

console.log(userA, userB, userC); // John, David, Tina

解构赋值会镜像的把右边的资料往左边送:

let [userA, userB, userC] = ["John", "David","Tina"];
console.log(userA, userB); // John, David, Tina

let users = ["John", "David","Tina"];
let [userA, userB, userC] = users;

console.log(userA, userB, userC); // John, David, Tina

特殊情况:

// 1. 输入的变数多於右边的值
let [userA, userB, userC, userD] = ["John", "David","Tina"];
console.log(userA, userB, userC, userD); // John David Tina undefined

// 2. 输入的变数少於右边的值
let [userA, userB,, userD] = ["John", "David","Tina","Una"];
console.log(userA, userB, userD); // John David Una

// 3. 解构中有预设值
let [userA, userB, userC = "Jack", userD = "Una"] = ["John", "David","Tina"];
console.log(userA, userB, userC, userD); // John David Tina Una

// 4. String
let str = "一只小猫";
let [a,b,c,d] = str;
console.log(a,b,c,d); // 一 只 小 猫

// 5. 交换变数
let a = 123;
let b = 456;
[a,b] = [b,a];
console.log(a,b) // 456 123

物件

与数组不同在於数组是根据索引(index)来对应，而物件是根据属性名称来对应。

过去物件只能透过以下例子:

let cat = {
    name :"white cat",
    color : 'white',
    weight: 5
}

let name = cat.name;
let weight = cat.weight;

解构赋值可以非常简短的达到一样的效果:

let { name, weight} = cat;

也能重新命名:

let { name : newName, weight} = cat; // newName : white cat