JS 筆記 - ES6：解構賦值

基本解構賦值的概念

下方有一陣列資料：

let numbers = [1, 2, 3, 4, 5];
let one = numbers[0];
let two = numbers[1];
let three = numbers[3];

通常取得陣列資料會是這樣，透過 ES6 的寫法可以變得更簡短。

首先，宣告一個空陣列等於目前的陣列資料，使其鏡射到空陣列中：

let [] = number;

雖是鏡射，但並非順序顛倒，只是將資料放入到新宣告的空陣列中。

並且把對應的變數放入空陣列中，並透過 console.log 查詢結果。

let numbers = [1, 2, 3, 4, 5];
let [one, two, three, four, five] = numbers;
console.log(one, two, three, four, five); // 1, 2, 3, 4, 5

當變數與資料數量不同時

若今天要跳過中間的變數取得值，可以這樣寫。

let numbers = [1, 2, 3, 4, 5];
let [one, two, , four, five] = numbers; //跳過的變數要留下相對的位置
console.log(one, two, four, five); // 1 2 4 5

交換兩個變數的內容

傳統寫法要交換兩個變數的資料是相當複雜的，要先宣告第三個變數再進行交換，但透過解構賦值的特性，是可以同時兩個變數的資料內容。

let one = 1;
let two = 2;
[one, two] = [two, one];
console.log(one, two); //2, 1

拆解字元到單一變數上

宣告一個變數裡面是一個字串，透過宣告陣列等於字串後，就會把字元相對拆解到對應的陣列資料中。

let str = "我要寫程式";
let [a, b, c, d, e] = str;
console.log(a, b, c, d, e); //我 要 寫 程 式

按照第一個解構賦值的概念，如果把 c 移掉，就會少掉 c 的對應字元。

let str = "我要寫程式";
let [a, b, c, d, e] = str;
console.log(a, b, d, e); //我 要 程 式

物件的解構賦值

物件的解構賦值可以透過宣告一個物件，並把資料屬性帶入，結果為物件本身，就可以取出該物件相對的值。

let family = {
  dad: "爸爸",
  mom: "媽媽",
  me: "我",
};
let { dad } = family;
console.log(dad); //爸爸

取出物件的一個值，並附在新的變數名稱上

延續上方範例，

let family = {
  dad: "爸爸",
  mom: "媽媽",
  me: "我",
};
let { dad: newDad } = family;
console.log(dad, newDad); //爸爸

物件內原本的屬性(dad)，給他一個新的變數(newDad)，console.log(dad)時，就會發現原先的屬性已經找不到，已經被新宣告的變數取代。

預設值

下方範例宣告一個陣列有設定好的資料，後面會等於一個新的陣列，但因為只有一個值，所以只會替換掉第一個設定好的值，第二個仍然會維持預設值。

let [tim = "提姆", joshua = "約約"] = ["媽媽"];
console.log(tim, joshua); //媽媽 約約