This is the sixth day of my participation in the More text Challenge. For details, see more text Challenge

If you are a front-end programmer then ES6 must be very familiar with it, in the work we often use the ES6 deconstruction assignment syntax, to our coding has brought great convenience, so for the students who are not clear how to use this article can completely understand!!

Deconstruction assignment of variables

The so-called destruct assignment, is to a certain object or array of data, as a variable, to liberate, so that the future can be used as a variable directly!! ; No more using every value over and over again. Or [] assignment

1. The deconstruction

To take the data of an array or the property of an object as a variable

/ / object
const user = { name: 'Front Trailblazer'.age: 2.sex:'men' }
// Declare the same variable name as the key field of the object, and then just take what we need
const { name, age } = user
console.log(`${name} : ${age}`)  // Front-end pathfinder: 2
/ / array
const arr = [1.2.3] 
const [sb, hb] = arr  
// Assign a value to a variable according to its position
console.log(sb, hb)  / / 1. 2

Copy the code

2. Deconstruct + Rename + default

A :b is renamed to b; So deconstructing the assignment is a little bit more complicated, so let’s do a little chestnut

let { a: x = 0.b: y = 2.c: z } = { a: "11".y: "22".z: "33" }
 // The following is a simulated process for easy understanding, not a real process
// A is a match pattern and x is a variable
// 1. Find the original variable first
let { a, b, c } = { a: "11".y: "22".x: "33" }
 // A => 11 b => undefined c => undefined

// 2. Rename the declared field [declared field: the renamed field]
let x = a, y = b, c = z 
// Note that a, B, and c are still undefined, and printing them will throw error: (a, b, c) is not defined

// 3. Determine whether the variable has a value. If there is no value, assign the default value after the equal sign
let x = a = "11"  // If there is a value, do not assign the default value 0
let y = b = "2"  // There is no value, and the default value is 2
let z = c         // No value and no default value undefined

Copy the code

4. Reverse deconstruction of objects

You can rebuild an object by writing only one when the key and value fields in the object are the same

const name = 'Pathfinder', age = 18
const user = { name, age }  
// {name: 'pathfinder ', age: 18}
 
// When defining an object method, omit the keyword function. app.model({
 reducers: {  
   add() {}  // equivalent to add: function() {}
 },  
 effects: {*addRemote() {}  AddRemote: function*() {}}})Copy the code

5. Deconstruction of function parameters

function add([x=1,y=1]){
       // var x = x ||1;
       // var y = y ||1;
        return x+y
    };
    add([2.3]);
    / / (x, y) = 2 + 3 = 5 [2, 3]
    
     // Parameter object
     function add2({x=0,y=0}){
         return x+y
     };
     add2({x:3.y:4})
     //{x=0,y=0} = {x:3,y:4}

    // The default value of the function argument destruct
    function fun({x=0,y=0} = {}){
        return [x,y]
    };
    //{x=0,y=0} = {x:3,y:5}
    fun({x:3.y:5}) / / (3, 5)
    fun({x:3})    / / [3, 0] {x = 0, y = 0} = {x: 3}
    fun();/ / {x = 0, y = 0} = {} [0, 0]
    fun({})
    // And this one
     function fun2({x,y}={x:0,y:0}){
        return [x,y]
    }
    //{x,y} = {x:3,y:5}
    fun2({x:3.y:5}) / / (3, 5)
    fun2({x:3})  // {x,y} = {x:3} [3,undefined]
    fun2();/ / {x, y} = {x: 0, y: 0} [0, 0]
    fun2({})  //{x,y} = {} [undefined,undefined]
    // There are some interview questions that like to be used in the interview. The above examples need to be tested by yourself
Copy the code

Can an array returned by a function be deconstructed?

     function num(){
        return [2.3.4]};let [a,b,c] =num();
    console.log(a,b,c)

Copy the code

Take a look at the printout

So we should also pay attention to these points:

  • There is one important difference from array destructuring, where the elements of an array are arranged in order, and the value of a variable is determined by its position. Object destructuring has no order, and variables must have the same name as attributes
  • If we define a property that does not exist in the object when we deconstruct the declaration variable, then the value of the variable is undefined. We can set a default value for a variable, and when there is no corresponding property in the object, the value of the variable is set to the default value.

If these are understood, you will be able to use deconstructive assignment in your work with ease!!