Home >Web Front-end >JS Tutorial >Let's talk about 5 common scenarios and examples of JS destructuring assignment
This article brings you relevant knowledge about JavaScript. It mainly talks about 5 common scenarios and examples of js destructuring and assignment. Friends who are interested can take a look at it. I hope it will be helpful to everyone. help.
Destructuring assignment syntax is a JavaScript expression. Through destructuring 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 that makes it easier to get values from arrays and objects.
Let’s first look at how to deconstruct objects in JavaScript. You can start with a simple example of this product 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, you can access the corresponding properties in the following ways:
console.log(id); // 1 console.log(price); // 120 console.log(title); // Nike Air Zoom Pegasus 38
Destructuring can make the code clearer and more concise. What if you need to deconstruct a more complex object? That is, an object within an object.
Now assume that we need to obtain the attributes of one of the products from the product 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 several levels, and if you need to access the product information, you can deconstruct it. Possibly multiple levels to obtain the properties of the item object.
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 demonstrate its usage. It is not recommended to obtain object information in an array in this way during 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. The above data can be changed to a 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 destructuring assignment is also suitable for use in the definition of function parameters, as follows:
const printArticle = ({ title, remark }) => { console.log(title); console.log(remark); }; printArticle({ title: "JavaScript 解构赋值", remark: "解构赋值的实用场景介绍", });
When using frameworks such as React or Vue, there are many places for destructuring assignments, such as the introduction of methods, etc.
If you want to create a variable with a different name than the property, you can use the alias function of object destructuring.
const { identifier: aliasIdentifier } = expression;
identifier
is the name of the property to be accessed 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
You can use dynamic names to extract variable properties (the property names are known at runtime):
const { [propName]: identifier } = expression;
propName
The expression should evaluate to the property name (usually a string) and the identifier should indicate the variable name created after destructuring, 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 productKey = "1"; const { [productKey]: product } = products; console.log(product); // { title: 'Nike Air Zoom Pegasus 38', price: 120 }
In the above code, you can update it by updating productKey# The value of ## then causes the value of
product to also change.
const { identifier, ...rest } = expression;After destructuring, the variable identifier contains the attribute value.
rest A variable is an ordinary object with remaining properties.
const product = { title: "Nike Air Zoom Pegasus 38", price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45, }; const { title, ...others } = product; console.log(others); // { price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45 }For arrays, you can obtain the first and last values through Rest implementation:
const numbers = [1, 2, 3]; const [head, ...tail] = numbers; console.log(head); // 1 console.log(tail); // [ 2, 3 ]5. The default value As mentioned before, it can be assigned when deconstructing the array. Default value:
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); // 1In this way, you can ensure that there is a default value when
B and A are not defined.
... operators.
JavaScript Video Tutorial"
The above is the detailed content of Let's talk about 5 common scenarios and examples of JS destructuring assignment. For more information, please follow other related articles on the PHP Chinese website!