Five Common Scenarios and Example Tutorials of JavaScript Deconstruction Assignment
- 2021-12-04 09:32:10
- OfStack
Preface
Deconstruction assignment syntax is an JavaScript expression. By deconstruction assignment, attributes/values can be taken out of objects/arrays and assigned to other variables. This syntax is a new syntax introduced by the ECMAscript 6 specification, which makes it easier to get values from arrays and objects.
STEP 1 Extract data
Let's take a look at how to deconstruct objects in JavaScript, starting with this simple example of a merchandise object.
const product = {
id: 1,
title: "Nike Air Zoom Pegasus 38",
product_image: "/resources/products/01.jpeg",
shown: "White/Pure Platinum/Midnight Navy/Wolf Grey",
price: 120,
};
const { id, price, title } = product;
In this way, the corresponding properties can be accessed in the following ways:
console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38
Deconstruction can make the code clearer and more concise. What if you need to deconstruct a more complex object? That is, objects within objects.
Now assume that you need to get the attributes of one of the items from the item list data, as follows:
const products = [
{
id: 1,
title: "Nike Air Zoom Pegasus 38",
price: 120,
},
{
id: 2,
title: "Nike Air Zoom Alphafly NEXT%",
price: 275,
},
{
id: 3,
title: "Nike Zoom Fly 4",
price: 89.0,
},
];
Here, the product list is nested in several layers, and the information of goods needs to be accessed. You can deconstruct as many levels as possible to obtain the attributes of goods objects.
const [tmp, { id, title, price }] = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275
The above code is only used to show its usage, and it is not recommended to get object information in an array in project development.
Usually, the data list does not have to be an array. In terms of acquisition efficiency, the access efficiency of map objects is higher than that of arrays. You can change the above data to an map object, as follows:
const products = {
1: {
title: "Nike Air Zoom Pegasus 38",
price: 120,
},
2: {
title: "Nike Air Zoom Alphafly NEXT%",
price: 275,
},
3: {
title: "Nike Zoom Fly 4",
price: 89.0,
},
};
const {
2: { id, title, price },
} = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275
In JavaScript, data can be variables and methods, so deconstruction assignment is also suitable for the definition of function parameters, as follows:
const printArticle = ({ title, remark }) => {
console.log(title);
console.log(remark);
};
printArticle({
title: "JavaScript Deconstruction assignment ",
remark: " Introduction to practical scenarios of deconstruction assignment ",
});
When using frameworks such as React or Vue, there are many ways to deconstruct and assign values, such as the introduction of methods and so on.
2. Alias Values
If you want to create a variable that is different from the property name, you can use the alias function of object deconstruction.
const { identifier: aliasIdentifier } = expression;
identifier is the name of the property to access, and aliasIdentifier is the variable name. The specific usage is as follows:
const products = {
1: {
title: "Nike Air Zoom Pegasus 38",
price: 120,
},
2: {
title: "Nike Air Zoom Alphafly NEXT%",
price: 275,
},
3: {
title: "Nike Zoom Fly 4",
price: 89.0,
},
};
const {
2: { price: productPrice },
} = products;
console.log(productPrice); // 275
3. Dynamic attributes
You can extract variable attributes using dynamic names (attribute names are known at run time):
const { [propName]: identifier } = expression;
The propName expression should evaluate to the attribute name (usually a string), and the identifier should indicate the name of the variable created after deconstruction, which is used as follows:
const products = {
1: {
title: "Nike Air Zoom Pegasus 38",
price: 120,
},
2: {
title: "Nike Air Zoom Alphafly NEXT%",
price: 275,
},
3: {
title: "Nike Zoom Fly 4",
price: 89.0,
},
};
const productKey = "1";
const { [productKey]: product } = products;
console.log(product); // { title: 'Nike Air Zoom Pegasus 38', price: 120 }
In the above code, the value of product can be changed by updating the value of productKey.
4. Rest in object deconstruction
The rest syntax is added to the deconstruction, and the Rest attribute collects the remaining enumerable attribute keys that have not been picked up by the deconstruction pattern.
console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38
After deconstruction, the variable identifier contains the attribute value. The rest variable is a normal object with the remaining properties.
console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38
For arrays, the first and last values can be obtained through the implementation of Rest:
console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38
5. Default values
As described earlier, you can assign default values to arrays when they are deconstructed:
const RGBA = [255, 34];
const [R, G, B = 0, A = 1] = RGBA;
console.log(R); // 255
console.log(G); // 34
console.log(B); // 0
console.log(A); // 1
In this way, you can ensure that there is a default value if B and A are not defined.
Summarize
Deconstruction is a very useful feature that has been added to the ES 6 version of JavaScript. Through deconstruction, you can quickly and easily extract attributes or data from objects and arrays into individual variables. It is suitable for nested objects, and you can use the... operator to assign values to array allocations.