懶得定義一樣的值嗎?來試試複製大法吧~

解構賦值 (Destructuring assignment)

MDN 中的介紹為 - 解構賦值語法是一種 JavaScript 運算式,可以把陣列或物件中的資料解開擷取成為獨立變數。

陣列解構

一般如果想要把陣列中的資料給複製並建立一個新的變數的話,可能會這樣做:

1
2
3
4
5
const winter_is_comming = ['December', 'January', 'February'];

const winter_1st_month = winter_is_comming[0];
const winter_2nd_month = winter_is_comming[1];
const winter_3rd_month = winter_is_comming[2];

如果透過解構的話,作法有點像是把右邊的值給複製進去給左邊的變數一樣,可以這樣做:

1
2
3
const winter_is_comming = ['December', 'January', 'February'];

const [winter_1st_month, winter_2nd_month, winter_3rd_month] = winter_is_comming;

接著來練習一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 使用解構組合使 arr2 變成為 [1, 2, 3, 4, 5, 6] 的結果
const arr = [1, 2, 3];
const arr2 = [...arr, 4, 5, 6]; // arr2 = [1, 2, 3, 4, 5, 6]
// ---------------------------------------------------------
// 使用解構組合將以下兩個陣列為 [1, 2, 3, 4, 5, 6] 的結果
const nums1 = [1, 2, 3];
const nums2 = [4, 5, 6];
const nums3 = [...nums1, ...nums2]; // nums3 = [1, 2, 3, 4, 5, 6]
// ---------------------------------------------------------
// 使用解構組合將 a、b、c 三個變數的值分別設為 'angular', 'react', 'vue'
const jsFramwork = ['angular', 'react', 'vue'];
const [a, b, c] = jsFramwork; // a = 'angular'; b = 'react'; c = 'vue';
// ---------------------------------------------------------
// 請使用解構,將以下陣列分別取出為獨立變數 Hua, Xion, Ming, Mei
const people = ['小花', '大雄', '大明', '小美'];
const [Hua, Xion, Ming, Mei] = people;
console.log(Hua, Xion, Ming, Mei);

物件解構

物件的解構賦值用法也差不多,看下面例子:

1
2
3
4
5
6
7
// 請使用解構,取出 name 及 age 的變數
const person = {
name: '小明',
age: 16
}
const { name, age } = person;
console.log(name, age);

使用的時機主要是在可能透過 api 抓取到資料的時候,如果想要拿到某些值來使用,就可以透過這個方法。

進階使用方法

  • 取出物件中的物件
    如果想拿到物件中的物件的話,也是辦得到的,例如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const person = {
    name: '小明',
    age: 16,
    skills: {
    front: 'JavaScript',
    back: 'Ruby',
    },
    }

    const { skills } = person;
    const { front, back } = skills;
    console.log(front, back); // "JavaScript", "Ruby"
  • 物件屬性名稱縮寫
    先看下方的例子:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const gameName = '動物森友會';
    const gameType = '模擬遊戲';
    const gamePrice = 1600;

    const animalCrossing = {
    gameName: gameName,
    gameType: gameType,
    gamePrice: gamePrice,
    }

如果物件內的屬性跟變數名稱一樣的話,那就可以這樣寫:

1
2
3
4
5
6
7
8
const animalCrossing = {
gameName,
gameType,
gamePrice,
}

console.log(animalCrossing);
// 結果會是一樣的