解構(gòu)賦值語法是一個Javascript表達(dá)式，這使得可以將值從數(shù)組或?qū)傩詮膶ο筇崛〉讲煌淖兞恐?—— MDN

我們有這樣一個數(shù)組 arr = [1,2,3,4];
我們希望將里面的值單獨拿出來并賦值給不同的變量。

以前我們需要這么做

var a = arr[0];
var b = arr[1];
var c = arr[2];
var d = arr[3];

通過數(shù)組的結(jié)構(gòu)賦值，我們可以 let [a, b, c, d] = arr;

等號左邊右邊都是數(shù)組的時候，就會進(jìn)行一個匹配。根據(jù)位置一一對應(yīng)起來。

我們再來看一個稍微復(fù)雜一點的結(jié)構(gòu)賦值：

// 更復(fù)雜的匹配規(guī)則
const arr = ['a', 'b', ['c', 'd', ['e', 'f', 'g']]];
//只取 b
const [ , b] = arr;
//只取g，只要保證兩邊結(jié)構(gòu)一樣，肯定可以取到對應(yīng)的值
//const [ , , g] = ['e', 'f', 'g']
//const [ , , [ , , g]] = ['c', 'd', ['e', 'f', 'g']];
const [ , , [ , , [ , , g]]] = arr;

擴(kuò)展運算符 ‘...’

擴(kuò)展運算符其中的一個功能就是用來合并多個數(shù)組。

const arr1 = [1, 2, 3];
const arr2 = ['a', 'b'];
const arr3 = ['zz', 1];
const arr4 = [...arr1, ...arr2, ...arr3]; //arr4 ==  [1, 2, 3, "a", "b", "zz", 1]
//如果寫成 const arr4 = [arr1, arr2, arr3]; 得到的arr4的值會是三個數(shù)組

擴(kuò)展運算符與解構(gòu)賦值結(jié)合起來給以達(dá)到一個效果

const arr = [1, 2, 3, 4, 5, 6];
const [a, b, ...c] = arr;
//它會除去1和2，把剩余的參數(shù)作為一個數(shù)組賦值給我們的c

注意，帶有擴(kuò)展運算符的變量必須放在最后一位，否則報錯。

默認(rèn)值

如果有變量沒有被匹配到,變量的值為undefined。

const arr = [1, undefined, undefined];
const [a,b,c,d] = arr;  // d = undefined

//如果我們給了一個默認(rèn)的值，當(dāng)變量匹配到的值為undefined，或啟用默認(rèn)值
//注意匹配到null不會
const arr = [1, null, undefined];
const [a, b = 2, c, d = 'aaa'] = arr;
//a=1
//b=null
//c=undefined
//d='aaa'

交換變量

以往的交換需要第三個變量

let a = 20;
let b = 10;
let temp;

temp = a;
a = b;
b = temp;

使用結(jié)構(gòu)賦值只需要

[a,b] = [b,a]

接收多個 函數(shù)返回值

function getUserInfo(id) {
  // .. ajax
  return [
    true,
    {
      name: '小明',
      gender: '女',
      id: id
    },
    '請求成功'
  ];
};

const [status, data, msg] = getUserInfo(123);

這里status會匹配到 true （第一項返回值），

data 會匹配到 { name: '小明', gender: '女',id: 123},（第二項返回值），

msg會匹配到 '請求成功' （第三項返回值）