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.

1. Extract data

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.

2. Alias ​​value

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

3. Dynamic properties

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.

4. Rest in Object Destructuring

Add rest syntax to destructuring, and the Rest property collects the remaining enumerable property keys that have not been picked up by the destructuring mode.

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); // 1

In this way, you can ensure that there is a default value when

B and A are not defined.

Summary

Destructuring is a very useful feature that was added to the ES6 version of JavaScript. Destructuring allows you to quickly and easily extract properties or data from objects and arrays into separate variables. It works on nested objects, and array assignments can be assigned using the

... operators.

Recommended learning: "

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!