解构赋值语法是一个Javascript表达式，这使得可以将值从数组或属性从对象提取到不同的变量中 —— MDN

我们有这样一个数组 arr = [1,2,3,4];
我们希望将里面的值单独拿出来并赋值给不同的变量。

以前我们需要这么做

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

通过数组的结构赋值，我们可以 let [a, b, c, d] = arr;

等号左边右边都是数组的时候，就会进行一个匹配。根据位置一一对应起来。

我们再来看一个稍微复杂一点的结构赋值：

// 更复杂的匹配规则
const arr = ['a', 'b', ['c', 'd', ['e', 'f', 'g']]];
//只取 b
const [ , b] = arr;
//只取g，只要保证两边结构一样，肯定可以取到对应的值
//const [ , , g] = ['e', 'f', 'g']
//const [ , , [ , , g]] = ['c', 'd', ['e', 'f', 'g']];
const [ , , [ , , [ , , g]]] = arr;

扩展运算符 ‘...’

扩展运算符其中的一个功能就是用来合并多个数组。

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的值会是三个数组

扩展运算符与解构赋值结合起来给以达到一个效果

const arr = [1, 2, 3, 4, 5, 6];
const [a, b, ...c] = arr;
//它会除去1和2，把剩余的参数作为一个数组赋值给我们的c

注意，带有扩展运算符的变量必须放在最后一位，否则报错。

默认值

如果有变量没有被匹配到,变量的值为undefined。

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

//如果我们给了一个默认的值，当变量匹配到的值为undefined，或启用默认值
//注意匹配到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;

使用结构赋值只需要

[a,b] = [b,a]

接收多个 函数返回值

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

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

这里status会匹配到 true （第一项返回值），

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

msg会匹配到 '请求成功' （第三项返回值）