ES6之解构赋值

一、基本用法

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

解构不仅可以用于数组，还可以用于对象。接下来我们对比下这两种写法，感受下ES6带来的便利。

var expense={ type:"es6", amount:"45"}；
var type=expense.type；//ES5写法 
var amount=expense.amount;//ES5写法 
console.log(type,amount）；

如果使用ES6一句话就可以实现了：

const { type,amount}=expense；//ES6写法

我们再举个对象结构的例子：

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]