Learning these usages of deconstruction assignment, I have an extra hour of fishing time every day

foreword

ES6 introduces a new grammatical feature called destructuring, which is dedicated to array destructuring and object destructuring. This syntax is more convenient to use and the code is simpler, but you can guarantee that you really understand everything. Let me show you today. Let's review the usage of deconstruction.

Object property assignment mode

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

When the attribute name is the same as the variable that needs to be assigned, this shorthand can be used, but it should be noted that the omitted part is that the assignment direction of the destructuring assignment method is opposite to the assignment direction of the x:object, and the assignment direction is from left to right ( source->target).

not just statement

Destructuring methods can be used not only to declare variables, but also to assign values.

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

In the above example, the variable has been declared in advance, and the destructuring operation is only used for assignment. It should be noted that when the object destructuring is only used for assignment, the assignment statement needs to be enclosed, otherwise the code in it will be treated ()as a JavaScriptblock {}statement instead of an object, resulting in an error.

repeated assignment

Destructuring allows the same source property to be assigned different values.

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

In the above example, three variables are declared X,Y,a. First, athe object on the right side of the equal sign is assigned to athe variable and object on the left as a whole {x:X,xY}, and then xthe values ​​of are assigned to respectively X、Y.

default assignment

When deconstructing and assigning, you can set the default value. When the destructured value does not exist, the default value will be automatically assigned

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   

nested destructuring

Nested destructuring is possible when objects or arrays are nested in the destructured value

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

Destructuring parameters

1. Deconstruction default value + parameter default value

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

How do you look at it? Is it a bit confused? To be reasonable, I saw that the two looked similar at first glance, and I realized it after careful consideration many times. For the first parameter { x ：10} = {}, {}it is the default value of the function parameterundefined . It will take effect when the parameter is not passed or passed in . It is the default value{ x: 10} for deconstruction when it is deconstructed . The default value is 10, so if the value passed in is there, the result will be is the incoming value, otherwise it is 10; and for the second parameter , it is the default value of the function parameter , which takes effect when the parameter is not passed or passed in , and the default value is not deconstructed when deconstructing, and cannot be deconstructed when it is passed in Destructured to , so the incoming value will be printed only if there is one in the incoming value. 2. Nested default: deconstruction and reorganization When there are two objects, one of which is the default value, and the other object has a part of the value, you want to complete the missing part with the default value.xx{ y } = { y :10 }{ y :10 }undefinedy{}yy

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

We can use destructuring to take out the default value and configrecombine it with

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}
}

at last

The above is the content of today's deconstruction. After learning these, you can spend another hour a day fishing.