傳統

一般在將一個陣列中的值，賦值到不同的變數上，用的方式會比較繁瑣，也很有可能出錯。

let fruits = ['apple', 'orange', 'banana', 'mango'];
let 蘋果 = fruits[0];
let 橘子 = fruits[1];
let 香蕉 = fruits[2];
let 芒果 = fruits[3];

console.log(蘋果, 橘子, 香蕉, 芒果); // apple orange banana mango

陣列

解構賦值

這時候可以用解構的方式，更直覺地將值賦予給不同的變數。

let fruits = ['apple', 'orange', 'banana', 'mango'];
let [蘋果, 橘子, 香蕉, 芒果] = fruits;

console.log(蘋果, 橘子, 香蕉, 芒果); // apple orange banana mango

如左邊給的變數不夠時，解構將只會依照變數的數量進行。

let fruits = ['apple', 'orange', 'banana', 'mango'];
let [蘋果, 橘子] = fruits;

console.log(蘋果, 橘子);

當中間要跳過時，也可以不用輸入變數，即會自動跳到下一個進行賦值。

let fruits = ['apple', 'orange', 'banana', 'mango'];
let [蘋果, , 香蕉, 芒果] = fruits;

console.log(蘋果, 香蕉, 芒果); // apple banana mango

變數值交換

要將兩個或多個變數的值交換，往往需要第三個變數來參與，但透過解構的方式，可以更快得到我們想要的效果。

let apple = '蘋果';
let banana = '香蕉';

[apple, banana] = [banana, apple];

console.log('apple: ' + apple); // apple: 香蕉
console.log('banana: ' + banana); // banana: 蘋果

解構字串

將一個字串分別賦值到不同的變數上。

let school = '靜宜大學';

let [a, b, c, d] = school;

console.log(a, b, c, d); // 靜 宜 大 學

物件

取出物件內的變數

取出物件內的變數，這在後續引入各種套件包時，很常用到。

let person = {
  firstName: 'John',
  lastName: 'Doe',
  email: 'jd1234@gmail.com',
};

let { email } = person;

console.log(email); // jd1234@gmail.com

將取出的變數，更改新的名稱

如果取出的變數都要依照原先的名稱，當專案變大時會變得很複雜，這時候我們將它賦予新的名稱。

let person = {
  firstName: 'John',
  lastName: 'Doe',
  email: 'jd1234@gmail.com',
};

let { email: mail } = person;

console.log(mail);

預設值

先設定好變數的值，如沒有值賦予給這個變數時，它可以使用預設好的值，陣列也能使用此操作設定預設值。

let { name = 'John' } = {};

console.log(name);