ES6之解构赋值

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]