学会解构赋值的这些用法，我每天又多了一个小时摸鱼时间

前言

ES6引入了一个新的语法特性，名为解构，专用于数组解构和对象解构，这个语法用起来比较方便，代码也比较简洁，但是你敢保证你真的全部都弄明白了，今天就带大家来复习一下解构的用法。

对象属性赋值模式

var { x, y, z} = { x: 1,y:2,c:3}
console.log(x,y,z) // 1，2，3

当属姓名和需要赋值的变量相同时，可以使用这种简略的写法，不过需要注意的是，省略的部分是x:，解构赋值方法赋值方向与对象赋值方向相反，赋值方向由左到右(source->target)。

不只是声明

解构方法不仅可以用来声明变量，还可以用来赋值。

var a,b,c,x,y,z
[a,b,c] = [1,2,3]
({x，y,z} = {x:4,y:5,z:6})
console.log(a,b,c) // 1 2 3
console.log(x,y,z)  // 4 5 6

在上面的例子中，变量已经事先声明，解构操作仅用于赋值，需要注意的是，当对象解构仅用于赋值时，需要将赋值语句用()括起来，不然JavaScript会将{}中的代码当作一个块语句而不是一个对象，导致报错。

重复赋值

解构允许将同一个源属性赋值给不同的值。

var { a: {x: X,x:Y},a} = {a: {x: 1}}
console.log(X,Y) // 1 1
console.log(a)   // {x:1}

在上面的例子中，声明了三个变量X,Y,a,首先将等号右边a对象整体赋值给左边的a变量和对象{x:X,xY}，再将x的值分别赋给X、Y。

默认赋值

在解构赋值时，可以设置默认值，当解构的值不存在时，会自动赋上默认值

var [a=10,b=20,c=30] = [1,2]
var {x=10,y=20,c=30} = {x:1,y:2}
console.log(a,b,c)  // 1 2 30
console.log(x,y,z)  // 1 2 30

嵌套解构

当解构的值中嵌套对象或数组时，可以进行嵌套解构

var arr = [1,[2,3] ,4,5]
var obj = {x: {m:1,n:2}, y:3,z:4}

var  [a,[b,c],d,e] = arr
var {x, x:{m:M,n:N},y,z} = obj
console.log(a,b,c,d,e) // 1 2 3 4 5
console.log(x,y,z,M,N) // {m:1,n:2}  3 4 1 2

解构参数

1.解构默认值+参数默认值

function fn({ x : 10} = {}, { y } = { y : 10}) {
  console.log(x,y)
}
fn() // 10 10
fn(undefined,undefined) // 10 10
fn({}, undefined) // 10 10
fn({},{}) // 10 undefined
fn(undefined,{}) // 10 undefined
fn({x:20},{y:20}) // 20 20

怎么样看着是不是有点懵，讲道理我第一眼看上去两个貌似差不多，仔细多了多次才明白过来。对于第一个参数{ x ：10} = {}来说，{}是函数参数的默认值，当该参数不传或者传入undefined时才生效，{ x: 10}是解构的时候给x解构默认值，默认值为10,所以如果传入的值有x则结果为传入值，否则为10；而对于第二个参数{ y } = { y :10 },{ y :10 }是函数参数的默认值，当该参数不传或者传入undefined时才生效,而解构的时候y没有解构默认值，当传入{},无法解构到y，所以只有传入值中有y才会打印传入值。
2.嵌套默认：解构并重组
当有两个对象，其中一个对象为默认值，另一个对象有了一部分值，你想要把缺少的部分使用默认值补充完整。

// 默认对象
var defaults = {
    options1:{
      item1:true,
      item2: false,
      item3: {}
    },
    options2: {
      items1: true,
      items2: true
    }
}
// 需要补全的对象
var config = {
   options1: {
     item1: false,
     item3: null,
   }
}

我们可以使用解构取出默认值，再与config进行重组

var {
  options1:{
    item1 = defaults.options1.item1, // 默认值赋值给item1变量，下面相同
    item2 = defaults.options1.item2,
    item3 = defaults.options1.item3
  },
  options2: {
    items1 = defaults.options2.items1
    items2 = defaults.options2.items2
  }
} = config

config = {
  options1:{item1,item2,item3},
  options2:{items1,items2}
}

最后

以上就是今天解构的内容，学会这些，每天又可以多花一个小时来摸鱼。