How to Use Destructuring Assignment in JavaScript

ECMAScript：6

Destructuring Assignment（解構賦值）是 ES6 的一個特性，現在的程式語言中，很多也都有支援這樣的功能了，Destructuring Assignment 最大的好處就是可以快速的提取陣列或物件裡相對應的值並搭配變數使用，通常在處理巢狀物件時特別好用。

Array Destructuring

// 基本用法
// a = 1, b = 2
const [a, b] = [1, 2];

// 一般使用
// a = 1, b = 2
let a, b;
[a, b] = [1, 2];

// 略過特定值
// a = 1, b = 3
const [a, , b] = [1, 2, 3];

// Rest Operator
// a = 1, b = [2, 3]
const [a, ...b] = [1, 2, 3];

// Exchange
// a = 2, b = 1
let a = 1, b = 2;
[b, a] = [a, b];

Object Destructuring

// 基本用法
// name = Johnson
const { user: name } = { user: 'Johnson' };

// 套用新的變數名稱
// a = 5, b = 10
const { prop: a, prop2: b } = { prop: 5, prop2: 10 };

// 屬性賦值
// a = 5, b = 10
const { a, b } = { a: 5, b: 10 };

// 注意：單獨一行需要再用 () 包起，不然會因為 {} 被判定成區塊描述而產生錯誤
let a, b;
({ a, b } = {a: 5, b: 10});

Passing Function Arguments

function func({a, b}) {
  return a + b;
}

// 3
console.log( func({a: 1, b: 2}) );