Talk about deconstruction in JS ES6

Time:2022-5-7

summary

ES6 adds a new way to get specified elements from arrays or objects, which is what we want to talk about today.

Let’s talk about the deconstruction of arrays first

Before deconstruction, we usually get the specified elements in the array according to the index:


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

After deconstruction, we can use the following methods to quickly obtain an element in the array:


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

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

In this way, the values of a, B and C are printed as follows:

1

2

3

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


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

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

We can also combine the extension operator to obtain multiple elements specified in the array, such as:


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

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

In this way, BRR is an array composed of elements other than 1. Print out the values of a and BRR as follows:

1

[2, 3]

What if we just want to get an element in the array? For example, if I only want to get 2 in the array, how can I write it?


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

Above, we use a comma placeholder to ensure that our deconstruction is consistent with the position of the array itself to obtain an element at a specific position.
It can be seen that the appearance of deconstruction facilitates us to obtain one or more elements at the specified position of the array. This is also an important application in the code.

After the deconstruction of the array, let’s talk about it again

Deconstruction of objects

Unlike array deconstruction, object deconstruction is matched according to attribute names, because objects are not sequential like array subscripts, so they cannot be extracted with subscripts.
For example, if we define an object obj and want to get its name attribute value, we can write as follows:


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 still widely used. For example, if we need to call an attribute or method of an object frequently, we can assign it to a variable through deconstruction, and calling it through a variable can reduce the amount of code to a certain extent.

The above is the details of the deconstruction in JS ES6. For more information about the deconstruction in JS ES6, please pay attention to other relevant articles of developeppaer!

Recommended Today

Upload PHP files to OSS and Delete remote alicloud OSS files

When deleting, remember not to take the domain name or ‘/’ as the path symbol. For example, the full path is: ‘ https://hxty.oss-cn-beijing.aliyuncs.com/data/pdf/contract/2021-06-16/HXSHB21061611594482340c.pdf ‘is the path here_ The file path is: ‘data / PDF / contract / 2021-06-16 / hxshb2106161594482340c pdf’。 <?php include ‘./aliyun-oss-php-sdk-2.4.2/autoload.php’; use OSS\OssClient; use OSS\Core\OssException; error_reporting(E_ALL); ini_ set(‘display_errors’, 1); // error message […]