一、基本用法

ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（Destructuring）。在此之前，變數賦值，只能直接指定值。

let a = 1;
let b = 2;
console.log(a,b);// 1,2

而如今採用ES6語法，可以這樣寫：

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

也可以使用巢狀陣列進行解構：

  let a,b,rest;
  [a,b,...rest]=[1,2,3,4,5,6];
  console.log(a,b,rest);//1 2 [3,4,5,6]

let [a, [[b], c]]
 
 = [1, [[2], 3]];
console.log(a,b,c);// 1 2 3

解構不僅可以用於陣列，還可以用於物件

  let a,b;
  ({a,b}={a:1,b:2})
  console.log(a,b);// 1,2

  let {a=10,b=5}={a:3};
  console.log(a,b);// 3 5

物件的解構與陣列有一個重要的不同。陣列的元素是按次序排列的，變數的取值由它的位置決定；而物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值。上面例子等價於let { a: a, b: b } = { a: 1, b: 2 };
與陣列一樣，解構也可以用於巢狀結構的物件。

let metaData={
    title:'abc',
    test:[{
      title:'test',
      desc:'description'
    }]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=metaData;
  console.log(esTitle,cnTitle);// abc test

二、應用場景

1️⃣：變數之間交換

  let a=1;
  let b=2;
  [a,b]=[b,a];
  console.log(a,b);// 2 1

交換變數a和b的值，常規做法是要通過一個定義中間變數來完成，而通過解構賦值的寫法不僅簡潔，而且易讀，語義非常清晰。

2️⃣從函式返回多個值

函式只能返回一個值，如果要返回多個值，只能將它們放在陣列或物件裡返回。有了解構賦值，取出這些值就非常方便。

  function f(){
    return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);// 1 ,2

變形一：

  function f(){
    return [1,2,3,4,5]
  }
  let a,b;
  [a,,,b]=f();
  console.log(a,b);// 1  4

變形二：

  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,...b]=f();
  console.log(a,b);//1 [3,4,5]

3️⃣提取 JSON 資料
解構賦值對提取 JSON 物件中的資料，尤其有用。

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);//42, "OK", [867, 5309]