Deconstruction content shared by Shang Silicon Valley
The deconstruction assignment syntax is a JavaScript expression. By deconstruction assignment, you can take attributes/values from objects/arrays and assign them 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.
- Extract Data
Let's first look at how to deconstruct objects in JavaScript, starting with a simple example of this commodity 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); // one console.log(price); // one hundred and twenty console.log(title); // Nike Air Zoom Pegasus 38
Deconstruction can make the code clearer and simpler. What if you need to deconstruct a more complex object? That is, the object in the object.
Now suppose you need to obtain the attribute of one of the commodities from the commodity 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 with several layers. You need to access the product information. You can deconstruct as many levels as possible to obtain the attributes of the product object.
const [tmp, { id, title, price }] = products; console.log(id); // two console.log(title); // Nike Air Zoom Alphafly NEXT% console.log(price); // two hundred and seventy-five
The above code is only used to show its usage. It is not recommended to obtain object information like this in an array during project development.
In general, the data list does not have to be an array. In terms of acquisition efficiency, the access of map objects is more efficient than that of arrays. You can change the above data into 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); // two console.log(title); // Nike Air Zoom Alphafly NEXT% console.log(price); // two hundred and seventy-five
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 for deconstructing assignment", });
When using frameworks such as React or Vue, there are many places to deconstruct assignment, such as the introduction of methods.
- Alias value
If you want to create a variable that is different from the attribute name, you can use the alias function of object deconstruction.
const { identifier: aliasIdentifier } = expression;
Identifier is the name of the attribute to be accessed, and aliasIdentifier is the name of the variable. 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); // two hundred and seventy-five
- Dynamic Attributes
You can use dynamic names to extract variable attributes (the attribute names are known at runtime):
const { [propName]: identifier } = expression;
The propName expression should be evaluated as an attribute name (usually a string), and the identifier should indicate the variable name created after deconstruction. The 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, the value of product can be changed by updating the value of productKey.
- Rest in Object Deconstruction
Add the rest syntax to the deconstruction. The Rest attribute collects the remaining enumerable attribute keys that have not been picked up by the deconstruction mode.
const { identifier, ...rest } = expression;
After deconstruction, the variable identifier contains the attribute value. The rest variable is a normal object with other 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:
const numbers = [1, 2, 3]; const [head, ...tail] = numbers; console.log(head); // one console.log(tail); // [ 2, 3 ]
- Default
As described earlier, you can assign default values to arrays when they are destructed:
const RGBA = [255, 34]; const [R, G, B = 0, A = 1] = RGBA; console.log(R); // two hundred and fifty-five console.log(G); // thirty-four console.log(B); // zero console.log(A); // one
In this way, you can ensure that there is a default value when B and A are not defined.
It is concluded that deconstruction is a very practical feature, Front end training It has been added to the ES6 version of JavaScript. By deconstruction, you can quickly and easily extract attributes or data from objects and arrays into individual variables. It is applicable to nested objects, and you can use Operator assigns values to array assignments.
Author: Shang Silicon Valley
Link: https://juejin.cn/post/7037314654065917983
Source: Rare earth gold mining
The copyright belongs to the author. For commercial reproduction, please contact the author for authorization, and for non-commercial reproduction, please indicate the source.
Deconstruction of WeChat applet actual parameter transmission object
Use dataset in traditional way
<button bind:tap="sayHello" data-content="My name is SayHello">button</button> sayHello(e){ let content = e.target.dataset.content; console.log(content) }
Official WeChat applet document dataset usage
Deconstruction of function parameter objects
<button bind:tap="sayHello" data-content="My name is SayHello">button</button> sayHello({ currentTarget: { dataset: { content } } }){ console.log(content) }
If you don't understand it, just read it like this
let myObj = { currentTarget: { dataset: { content: "My name is SayHello" } } } const { currentTarget: { dataset: { content } } } = myObj console.log(content)