Let's talk about destructuring in JS ES6

Overview

es6 adds a new way to get specified elements from an array or object, which is what we are going to talk about today: destructuring.

Let's talk about array deconstruction first

Before destructuring, we usually get the specified element in the array based on the index:

const arr = [1, 2, 3]; 
const a = arr[1];

After deconstruction, we can use the following method to quickly get an element in the array:

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a);
console.log(b);
console.log(c);

This prints out the values ​​of a, b, and c respectively:

1

2

3

If we only want to get the first two elements, we can write:

const arr = [1, 2, 3];
const [a, b] = arr;

console.log(a);
console.log(b);

We can also combine the spread operator to get multiple elements specified in the array, for example:

const arr = [1, 2, 3];
const [a, ...brr] = arr;

console.log(a);
console.log(brr);

In this way, brr is an array consisting of elements other than 1, and the printed values ​​of a and brr are:

1

[twenty three]

What if we only want to get a certain element in the array? For example, if I only want to get 2 in the array, how should I write it?

const arr = [1, 2, 3];
const [, a] = arr;
console.log(a);

Above, we use a comma as a placeholder to ensure that our deconstruction is consistent with the position of the array itself to obtain an element at a specific position.
As you can see, the emergence of destructuring makes it easier for us to get one or more elements at a specified position in the array. This is also an important application of it in the code.

After talking about array deconstruction, let's talk about

Deconstruction of objects

Unlike array destructuring, object destructuring is matched based on property names. Since objects do not have an order like array subscripts, they cannot be extracted using subscripts.
For example, if we define an object obj, and we want to get the value of its name attribute, we can write it like this:

const obj = {
    name: 'wudixiaodoujie',
    age: 18
};
const { name } = obj;
console.log(name);
wudixiaodoujie

const age = 0;
const { age: perAge } = obj;
console.log(perAge);
18

Object deconstruction is widely used. For example, if we need to frequently call a property or method of an object, we can assign it to a variable through deconstruction. Calling it through a variable can reduce the amount of code to a certain extent.

The above is the detailed content of deconstruction in JS ES6. For more information about deconstruction in JS ES6, please pay attention to other related articles on 123WORDPRESS.COM!