Deconstruction features in ES6 make it easier to evaluate objects or arrays, and make written code more readable. Those of you who have worked with Python before will be familiar with this feature, which is already implemented in Python. In Python, we can do this with the following code

lst = [3.5]
first, second = lst 
print(first, second)
Copy the code

The first and second variables are assigned to 3 and 5 in the array, respectively. Isn’t that simple and clear?

So before we had this feature, how do we usually get values from objects or arrays? Take a look at the following code:

let list = [3.5]
let first = list[0]
let second = list[1]
Copy the code

In this way, you must manually specify an array index to assign the value to the variable you specify. Using ES6’s deconstruction features, the code is much cleaner and more readable:

let [first, second] = list;
Copy the code

Object deconstruction

Base object deconstruction

First let’s look at the basic object deconstruction in ES6:

const family = {
	father: ' '
	mother: ' '
}
const { father, mother } = family;
Copy the code

We deconstruct the two properties father and mother from the family object and assign them to the father and mother objects defined separately. After that, we can get the family key directly from the father and mother variables. This example is the simplest use of deconstructing objects, but let’s look at a more interesting one.

Deconstruct undeclared objects

In the example above, we declare the family object and then retrieve its value through the deconstruction syntax. Is it ok not to declare:

const { father, mother } =  {father: ' '.mother: ' '}
Copy the code

In some cases, it is not necessary to declare an object or assign an object to a variable and then deconstruct it. Many times we can simply deconstruct undeclared objects.

Deconstruct objects and rename variables

We can also deconstruct the attributes of the object and rename them, for example:

const { father: f, mother:m } =  {father: '1'.mother: '2'}
console.log(f); / / '1'
Copy the code

In the above code, the object father is deconstructed and reassigned to the variable f, which is equivalent to repeating the name father as f compared to the previous example. And then you can continue with f.

Deconstructing defaults

Imagine a scenario in which a family object is returned in the background. The family object originally has three properties: father, mother, and Child. You take the returned data and deconstruct the three properties:

const { father, mother, child } =  {father: '1'.mother: '2'.child: '3'}
Copy the code

This may seem fine, but the reality is that it is not. Because of a bug in the background code, only mother and child are returned in the family object, leaving out father. = father = undefined;

const { father, mother, child } =  {father: '1'.mother: '2'}
console.log(child) //undefined
Copy the code

A lot of times we want to be able to deconstruct a default value in the background when a property is missing. It could actually be written like this:

const { father = '1', mother = '2', child = '3'} =  {father: '1'.mother: '2'}
console.log(child) / / '3'
Copy the code

Using the previous example, you can both change the name and assign the default value:

const { father: f = '1'.mother: m = '2'.child: c = '3'} =  {father: '1'.mother: '2'}
Copy the code

Destruct in function parameters

const family = {
	father: ' '
	mother: ' '
}
function log({father}){
	console.log(father)
}
log(family)
Copy the code

In the function parameters, the method of deconstruction can be used to directly obtain the attribute values of the incoming and outgoing objects, instead of passing in the family. Father as before.

Deconstruct nested objects

In the example above, the family properties have only one level. If some of the values of the family properties are also an object or array, how can we deconstruct the property values of these nested objects? Take a look at the following code:

const family = {
	father: 'mike'
	mother: [{
		name: 'mary'}}]const { father, mother: [{
	name:motherName
}]} = family;

console.log(father); //'mike'
console.log(motherName) //'mary'
Copy the code

Array deconstruction

Array deconstruction is very similar to object deconstruction, as was mentioned at the beginning of this article, but let’s take a look at some typical array deconstruction scenarios.

Base object deconstruction

const car = ['AUDI'.'BMW'];

const [audi, bmw] = car;
console.log(audi); // "AUDI"
console.log(bmw); // "BMW"
Copy the code

As long as the position of the array, the corresponding value can be correctly deconstructed.

Deconstructing defaults

With the default value scenario of object deconstruction, many times we also need to add the default value when deconstructing arrays to meet business needs.

const car = ['AUDI'.'BMW'];

const [audi, bmw, benz = 'BENZ'] = car;
console.log(benz); // "BENZ"
Copy the code

Exchange variables in deconstruction

Suppose we have the following two variables:

let car1 = 'bmw';
let car2 = 'audi'
Copy the code

If we wanted to swap these two variables, the usual approach would be:

let temp = car1;
car1 = car2;
car2 = temp;
Copy the code

You need an intermediate variable to do this. Using array deconstruction, it is much easier:

let car1 = 'bmw';
let car2 = 'audi'
[car2, car1] = [car1, car2]
console.log(car1); // 'audi'
console.log(car2); // 'bmw'
Copy the code

If you want to swap elements within an array, say [1,2,3] to [1,3,2], you can do this:

const arr = [1.2.3];
[arr[2], arr[1]] = [arr[1], arr[2]].console.log(arr); // [1,3,2]
Copy the code

Destruct the array from the return of the function

Many functions return the result of an array type, which can be retrieved directly from an array:

functin fun(){
	return [1.2.3]}let a, b, c; 
[a, b, c] = fun();
Copy the code

Of course, if we only want the function to return some of the values in the array, we can ignore them

functin fun(){
	return [1.2.3]}let a, c; 
[a, , c] = fun();
Copy the code

As you can see, the deconstruction feature of ES6 can be very useful in many scenarios. Expect more deconstruction into your projects, making your code simpler, clearer and easier to understand.