解構賦值：從陣列或物件中提取值為相同格式對應位置的變數賦值。下面這種寫法屬於“模式匹配”，只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值。

一、陣列的解構賦值

//ES5
{
  let a = 10;
  let b = 20;
  let c = 30;
  console.log(a); // 10
  console.log(b); // 20
  console.log(c); // 30
}
{
//ES6
  let [a, b, c] = [10, 20, 30];
  console.log(a); // 10
  console.log(b); // 20
  console.log(c); // 30
}

巢狀陣列進行解構，如果解構不成功，變數的值為undefined

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

let [, , d] = [1, 2, 3];
console.log(d); // 3

let [e, , f] = [4, 5, 6];
console.log(e); // 4
console.log(f); // 6

let [g, ...h] = [1, 2, 3];
console.log(g); // 1
console.log(h); // [2, 3]

let [i, m, ...n] = [1];
console.log(i); // 1
console.log(m); // undefined
console.log(n); // []
 

不完全匹配： 等號左邊的模式，只匹配一部分的等號右邊的陣列，也可以解構成功。

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

解構賦值允許指定預設值。預設值也可以是表示式，如果預設值是一個表示式，那麼這個表示式是惰性求值的，即只有在用到的時候，才會求值。預設值可以引用解構賦值的其他變數，但該變數必須已經宣告。

let [a = true] = [];
console.log(a); // true

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

let [d = 4] = [5];
console.log(d); // 5

let [e, f = 3] = [6, undefined];
console.log(e); // 6
console.log(f); // 3

let [g = 8] = [null];
console.log(g); // null

function h() {
  console.log('h'); //不執行
}
let [i = h()] = [111];
console.log(i); // 111

let [x = 1, y = x] = [];
console.log(x); //1
console.log(y); //1
 

二、物件的解構賦值

物件的解構賦值和陣列是不一樣的，陣列是按順序解構賦值，物件是按照屬性名解構賦值，變數必須和屬性同名才能取到正確的值。如果沒有對應的屬性名，則變數為undefined

let {name, age} = {name: 'Lilei', age: 30};
console.log(name); // Lilei
console.log(age); // 30

let {sex, hobbies} = {sex: '男'};
console.log(sex); // 男
console.log(hobbies); // undefined

如果變數與屬性名不同，需要如下寫法：其中username是變數。

let {name: username} = {name: 'Lucy', age: 20};
console.log(username); // Lucy

物件解構也可以巢狀賦值

let obj = {
  lilei: [
    20,
    {level: '優'}
  ]
};
let {lilei} = obj;
let {lilei: [score, {level}]} = obj;
console.log(lilei); // [20, {level: '優'}]
console.log(score); // 20
console.log(level); // 優



let foot = {
  noddle: [
    20,
    {status: 'sale'}
  ]
}
let {noddle, noddle: [sprice, {status}]} = foot;
console.log(noddle); // [20, {status: 'sale'}]
console.log(sprice); // 20
console.log(status); // sale



let size = {};
let colors = [];
({a: size.prop, b: colors[0]} = {a: 123, b: 456});
console.log(size); // {prop: 123}
console.log(colors); // [456]

物件解構賦初值

let {a = 1} = {};
console.log(a); // 1

let {b, c = 2} = {b: 3};
console.log(b); // 3
console.log(c); // 2

let {d: e = 3} = {};
console.log(e); // 3

let {f = 4} = {f: null};
console.log(f); // null

如果要將一個已經宣告的變數用於解構賦值，那麼一定不要將{}直接放在左面，因為js會講{}作為一個程式碼段而報錯，如果需要這樣賦值，要用()將等式括起來。

// 錯誤的寫法
let a;
{a} = {a: 1}; // 報錯

// 正確的寫法
let a;
({a} = {a: 1});

由於陣列本質是特殊的物件，因此可以對陣列進行物件屬性的解構。方括號這種寫法，屬於“屬性名錶達式”

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
console.log(first); // 1
console.log(last); // 3

三、字串的解構賦值

const [a, b, c, d, e] = 'HelloWorld';
console.log(a); // H
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o

const {length: len} = 'HelloWorld';
console.log(len); // 10

四、數值和布林值的解構賦值

解構賦值時，如果等號右邊是數值和布林值，則會先轉為物件。數值和布林值的包裝物件都有toString屬性，因此變數s都能取到值。如果不能轉為物件，則報語法錯誤。

let {toString: s} = 123;
console.log(s === Number.prototype.toString); // true

let {toString: o} = true;
console.log(o === Boolean.prototype.toString); // true

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

五、函式引數的解構賦值

function fn([a, b]){
  console.log(a); // 1
  console.log(b); // 2
}

fn([1, 2]);

function fn1([c = 10, d = 20]) {
  console.log(c); // 1
  console.log(d); // 20
}
fn1([1]);

六、解構賦值的用途

1.交換變數的值

let a = 1;
let b = 2;

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

2.從函式返回多個值

從函式return值只能返回一個值，如果要返回多個值，需要把多個值放在陣列或者物件中，再返回出來。有了解構賦值，取出這些值將會很容易。

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

3.函式引數的定義和設定預設值

function f({x, y, z}) {
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}
f({z: 3, y: 2, x: 1});


function f1({x = 0, y = 0, z = 0}) {
  console.log(x); // 0
  console.log(y); // 2
  console.log(z); // 3
}
f1({z: 3, y: 2});

4.提取json資料

let obj = {
  name: 'lilei',
  age: 20,
  sex: '男',
  hobbies: ['唱歌', '跳舞']
};
let {name, age, sex, hobbies = []} = obj;
console.log(name); // lilei
console.log(age); // 20
console.log(sex); // 男
console.log(hobbies); // ['唱歌', '跳舞']

5.遍歷map結構

const map = new Map();
map.set('score', 100);
map.set('level', '好');

for (let [key, value] of map) {
  console.log(key + ':' + value); // score: 100   level: 好
}

6.require和import時可以按需匯入

import {getJSON, post, ajax} from "jquery";
post('demo.php', {id: 1}, (res) => {
  console.log(res);
});