“This is the first day of my participation in the Gwen Challenge in November. See details of the event: The last Gwen Challenge in 2021”.

Destruct assignment syntax is a JavaScript expression that allows you to take a property/value out of an object/array and assign it to another variable by destructing assignment. This syntax is the result of a new syntax introduced by the ECMAscript 6 specification that makes it easier to retrieve values from arrays and objects.

1. Extract data

To take a look at how to deconstruct objects in JavaScript, you can start with this simple example of a 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;
Copy the code

Thus, the corresponding attributes can be accessed in the following way:

console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38
Copy the code

Deconstruction makes code cleaner and simpler. What if you need to deconstruct a more complex object? An object within an object.

Now suppose 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 Alphafly 4", price: 89.0,},];Copy the code

Here, the product list is nested with several layers that require access to the product information, and 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); // 2 console.log(title); // Nike Air Zoom Alphafly NEXT% console.log(price); / / 275Copy the code

The above code is for demonstration purposes only, and it is not recommended to retrieve object information from arrays in this way in project development.

In general, data lists do not have to be arrays, and map objects are more efficient to access than arrays in terms of retrieval efficiency. You can change the above data 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 Air Zoom Alphafly 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); / / 275Copy the code

In JavaScript, data can be variables and methods, so destructuring assignments can also be used to define function parameters, as follows:

const printArticle = ({ title, remark }) => { console.log(title); console.log(remark); }; PrintArticle ({title: "JavaScript destruct assignment ", remark: "destruct assignment ",});Copy the code

When using frameworks like React or Vue, there’s a lot to deconstruct assignment, such as the introduction of methods, and so on.

2. Alias value

If you want to create a variable that is different from the attribute name, you can use the alias function of object destruction.

const { identifier: aliasIdentifier } = expression;
Copy the code

Identifier is the name of the property to be accessed, and aliasIdentifier is the variable name. 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 Air Zoom Alphafly 4", price: 89.0,},}; const { 2: { price: productPrice }, } = products; console.log(productPrice); / / 275Copy the code

3. Dynamic properties

Dynamic names can be used to extract variable properties (property names are known at run time) :

const { [propName]: identifier } = expression;
Copy the code

The propName expression should evaluate to the property name (usually a string), and the identifier should indicate the variable name created after the deconstruction, 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 Air Zoom Alphafly 4", price: 89.0,},}; const productKey = "1"; const { [productKey]: product } = products; console.log(product); // { title: 'Nike Air Zoom Pegasus 38', price: 120 }Copy the code

In the above code, the value of product can be changed by updating the value of productKey.

4. Rest in object deconstruction

Adding rest syntax to the deconstruction, REST properties collect the remaining enumerable property keys that have not yet been picked up by the deconstruction pattern.

const { identifier, ... rest } = expression;Copy the code

After deconstruction, variable identifiers contain attribute values. The REST variable is a normal object with the 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 }
Copy the code

For arrays, we can use Rest to get the first and last values:

const numbers = [1, 2, 3]; const [head, ...tail] = numbers; console.log(head); // 1 console.log(tail); // [2, 3]Copy the code

5. The default value

As explained earlier, you can assign a default value to an array when it is 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); / / 1Copy the code

This ensures that there is A default value if B and A are not defined.

conclusion

Deconstruction is a very useful feature that was added to the ES6 version of JavaScript. With deconstruction, you can quickly and easily extract properties or data from objects and arrays into separate variables. It works with nested objects and can be used with… The operator allocates and assigns values to arrays.