Detailed explanation of the deconstruction and assignment example of ES6

1 What is deconstruction assignment

Deconstructing assignment allows you to assign arrays and objects' properties to various variables using syntax similar to arrays or object literals. This assignment syntax is extremely concise and is also clearer than traditional attribute access methods. Deconstruction will extract only some members of a large object for use alone.

The following is traditional:

var y=data[0]
var m=data[1]
var d=data[2]

But in ES6, it can be abbreviated as:

var [y,m,d]=date;

2 Destruction of arrays and objects

The general form of array deconstruction assignment syntax is:

 [ variable1, variable2, ..., variableN ] = array;

This will assign the variables from variable1 to variableN to the value of the corresponding element item in the array. If you want to declare variables while assigning, you can add var, let or const keywords before the assignment statement

The deconstruction of an object is similar, as shown below:

var user={
  uid:1001,
  uname:"dingding",
  set:1,
  signin:function(){
   ("Log in...");
  },
  signout:function(){
   ("Log out...");
  },
  signup:function(){
   ("register...");
  }
}
//var {uid:uid,signup:signup}=user;//The abbreviation is as followsvar {uid,signup}=user;
(uid);
signup();

A special usage of object destruction is the parameter structure. When passing parameters to a function, a large object is broken up and passed to the corresponding formal parameter variable, which effectively solves the need for multiple formal parameters to be uncertain when passing parameters but requires them to be passed in order.

//1. When defining a formal parameter list, use the object structure to define itfunction ajax({
 //Not related to the order url,
 type,
 data,//uncertain dataType,//uncertain}){
   (`Towards${url}send${type}ask`);
   if(data!=undefined&&type=="get"){
    (`existurlEnd splicing parameters?${data}`)
   }
   if(data!=undefined&&type=="post"){
    (`(${data})`);
   }
   if(dataType=="json"){
    (`(Return result)`);
   }
}
//2. When calling a function to pass parameters, all real parameter values ​​must be passed in the whole object structure.ajax({
  url:"http://localhost:3000/products/getProductsByKwords",
  type:"get",
  data:"kw=macbook i5",
  dataType:"json"
});

It is convenient to use deconstruction, but it emphasizes correspondence, array deconstruction: subscript to subscript, object deconstruction: attribute to attribute, but element or parameter is allowed to be empty, for example, the following three ways of writing:

var [y,,]=date;
var [y,,d]=date;
var [,m,]=date;

Although elements in different positions are empty, the assignment operation can still be performed normally. However, like traditional methods, those that are empty will be processed undefined when used.

Summarize

The above is the deconstruction and assignment of ES6 introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!