ES6 语法（解构赋值)

什么是解构赋值及用法

//此处是一个块作用域
{
  let a,b,rest;
  [a,b]=[1,2];//ES6写法，数组类型解构赋值
  //let a=1,b=2; //ES5写法
  console.log(a,b);//结果 1 2
}

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


//对象结构赋值
{
  let a,b;
  ({a,b}={a:1,b:2});
  console.log(a,b);//结果 1 2
}


{
  let a,b,c,rest;
  [a,b,c=3]=[1,2];//ES6写法，数组类型解构赋值
  console.log(a,b,c);//结果 1 2 3
}

{
  let a,b,c,rest;
  [a,b,c]=[1,2];//ES6写法，数组类型解构赋值
  console.log(a,b,c);//结果 1 2 undefined
}

解构赋值分类：

• 数组解构赋值
• 对象解构赋值
• 字符串解构赋值
• 布尔值解构赋值
• 函数参数解构赋值
• 数值解构赋值

解构赋值的使用场景

• 通过解构赋值实现变量的交换（如果没有解构赋值，需要声明一个中间变量才实现）

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

• 服务器返回一个数组[1，2],使用解构赋值进行获取(如果没有解构赋值，需要使用一个变量接收返回结果，然后按照索引去获取对应的内容)

{
  function f() {
    return [1,2];//第一个返回的是数量，第二返回的是金额
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);//结果 1 2
}

• 服务器返回一个数组，数组中有多个元素[1，2，3，4，5，6],使用解构赋值进行选择性的获取(如果没有解构赋值，需要使用一个变量接收返回结果，然后按照索引去获取对应的内容)

{
  function f() {
    return [1,2,3,4,5];
  }
  let a,b,c;
  [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 [2,3,4,5]
}

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

• 对象的解构赋值

{
  let o={p:42,q:true};
  let {p,q}=o;
  console.log(p,q);//结果 42 true
}
{
  let {a=10,b=5}={a:3};
  console.log(a,b);//结果 3 5
}

//前端和后端通信，使用的数据格式是json
{
  let metaData={
    title:'abc',
    test:[{
      title:'test',
      desc:'哈哈'
    }]
  }
  //给title指定一个接收的变量esTitle
  let {title:esTitle,test:[{title:cnTitle}]}=metaData
  console.log(esTitle,cnTitle);//结果 abc test
}