解構賦值是 es6 之後出來的一個新語法，我的理解它是一種語法糖，語法糖意思也就是說它可以用更簡單的方式達到相同的效果。

至於它究竟解構了什麼？
其實就是陣列或是物件裡面的值，原本我們假如要取出陣列跟物件裡面的值，可能會這樣來寫：

1
2
3
4
5
6
7
8
9
10
11
12
// 陣列的情況

const goodNum = [10, 20, 30, 40];

// 我想要取出裡面的數字，各個分別取出來

const one = goodNum[0];
const two = goodNum[1];
const three = goodNum[2];
const four = goodNum[3];

console.log(one, two, three, four); // 10 20 30 40
1
2
3
4
5
6
7
8
9
10
11
12
// 物件的情況
const goodFruit = {
  name: "西瓜",
  color: "green",
};

// 我希望把個別key內中的value給取出來

const name = goodFruit.name;
const color = goodFruit.color;

console.log(name, color); // 西瓜 green

但如果使用解構賦值的話，取用的方式就會變得稍微有些不同：

1
2
3
4
5
6
7
8
9
// 陣列使用了解構取值的情況

const goodNum = [10, 20, 30, 40];

// 我想用a,b,c,d 這四個變數去取到這些從陣列之中解構出來的值

const [one, two, three, four] = goodNum;

console.log(one, two, three, four); // 10 20 30 40

原本取出值之前，還需要宣告變數的部分取消了，直接可以把陣列裡面的值給解構出來變成一個獨立的變數。

左邊陣列裡面變數會把右邊陣列裡面的值給裝起來。

1
2
3
4
5
6
7
8
9
10
// 物件使用了解構賦值的情況

const goodFruit = {
  name: "西瓜",
  color: "green",
};

let { name, color } = goodFruit;

console.log(name, color); // 西瓜 green

物件的解構方式會有一些不一樣的地方，就是因為有 key 及 value 的關係，所以為了確定可以成功獲取物件裡面的 key 的 value，所以一定要是跟它一模一樣的 key 才能取到，跟陣列相比會有這種限制，如果用自創的變數來試圖取，沒辦法只依靠位置獲得。

1
2
3
4
5
6
7
8
9
const goodFruit = {
  name: "西瓜",
  color: "green",
};

let { aaa, bbb } = goodFruit;

console.log(aaa); //undefined
console.log(bbb); //undefined

會發現抓不到東西，沒有相對應的 value 值，所以會出現 undefined。

這邊會發現陣列跟物件在解構上的順序會有所差別，陣列的話會去依照它的索引值去抓取，而物件的話會依照物件的屬性名稱也就是 key 值來抓取，這是這兩者之間的差別。

上方講的一些基礎的方法，再來會介紹一些陣列跟物件一些特別的用法。

Array Destructuring

因為陣列會照著索引值來去一個個抓值，所以當其中有想要跳過的部分時，會沒辦法直接跳過，所以可以利用空格的技巧，跳過那個索引值不需要的部分。

1
2
3
4
5
6
7
8
//陣列的忽略某些值
function f() {
  return [1, 2, 3];
}

const [a, , b] = f();
console.log(a); //1
console.log(b); //3

解構賦值也可以拿來做陣列的變數交換。

1
2
3
4
5
6
7
8
9
10
11
//陣列的變數交換
let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a);
console.log(b);

const arr = [1,2,3];
[arr[2], arr[1]] = [arr[1], arr[2]];
console.log(arr);

陣列遇到字串時如果解構會自動變成字元的樣子。

1
2
3
// 遇到字串會解構成字元
let str = "床前明月光";
let [a, b, c, d, e] = str;

Object Destructuring

剛剛有提到說，因爲物件的解構是看 key 的值，所以如果直接在外部去定義子己想要設定的變數名，會找不到，但還是有需要自己定義變數名稱的場景，這時候可以利用在取變數時，在那邊 key 值旁邊增加一個：寫變數名稱的方式，來達到說改變變數名稱的效果。

1
2
3
4
5
6
7
8
// 重新賦予變數名稱
let value = {
  aaa : 111,
  bbb : 222,
  ccc : 333,
}

let {aaa: apple } =value

另外如果是物件需要預設值的狀況，直接在變數那邊使用等於就好，這點陣列也是相同的。

陣列預設值：

物件預設值：

總結

  • 解構賦值能夠減少很多重複性的事情，也能提高代碼整體的可讀性
  • 陣列跟物件的解構賦值取值順序不同，陣列是看索引值，物件則是屬性名稱
  • 除了順序之外陣列跟物件所用的括號也不一樣，一個是中括號，一個是大括號

大家也多多使用解構賦值的方式來取值吧！明天將會進入這次鐵人賽的最終章。

reference

[1] MDN - Destructuring assignment