JavaScript deconstruction assignment can extract data from arrays or objects and assign values ??to variables, making the code more concise and clear. 1. Object deconstruction can directly extract attributes, such as const {name, age} = user; 2. Support renaming attributes and setting default values, such as const {name: userName, gender = 'unknown'} = user; 3. Array deconstruction takes values ??in index order, and certain elements can be skipped, such as const [,, third] = colors; 4. Deconstruction can be used to exchange variables and function parameters, such as function connect({host, port = 3000}) combined with default values ??to make the interface clearer. Mastering these key points can help write more maintainable code.

JavaScript's Destructuring Assignment is a very practical feature. It allows you to extract data from arrays or objects and assign values ??to variables, with a simpler writing and clearer semantics. Many people feel a little confused when they first come into contact, but in fact, after understanding it, you will find that it is really convenient.

Let’s talk about how to use deconstruction of objects and arrays, as well as some small details you may encounter.

Object destruction: Easily extract the properties you need

The most common use of object destruction is to quickly extract certain properties from an object. for example:

 const user = { name: 'Alice', age: 25, role: 'admin' };
const { name, age } = user;
console.log(name); // Alice

This writing is much simpler than const name = user.name , especially when you need to take multiple attributes.

• If you want to change the attribute name to a variable name, it is also possible:

  

   const { name: userName, age: userAge } = user;

• The default values ??are also useful, especially when dealing with properties that may not exist:

   const { gender = 'unknown' } = user; // gender does not exist, so the default is 'unknown'

Note: If your object level is deep, nested deconstruction is also OK, but it is recommended not to be too deep, otherwise it will affect readability.

Array deconstruction: Take values ??in order, skip unwanted elements

Array deconstruction extracts values ??in index order. for example:

 const colors = ['red', 'green', 'blue'];
const [first, second] = colors;
console.log(first); // red

You can skip the middle element by leaving it blank:

 const [,, third] = colors; // Skip the first two and get blue directly

Another common scenario is to exchange variables, no temporary variables are needed:

 let a = 1, b = 2;
[a, b] = [b, a]; // a becomes 2, b becomes 1

The default values ??are also supported:

 const [x = 10, y = 20] = [5]; // x=5, y=20

Deconstruction in function parameters: make the interface clearer

Deconstruction is particularly useful in function parameters, especially when passing configuration objects or options:

 function connect({ host, port = 3000 }) {
  console.log(`Connecting to ${host}:${port}`);
}

connect({ host: 'localhost' }); // Connecting to localhost:3000

This not only uses object deconstruction, but also combines default values, which are clear and flexible in logic.

If the parameters may be missing, remember to add the default value to prevent errors:

 function connect({ host = 'localhost', port = 3000 } = {}) { ... }

Otherwise, an error will occur when the entire parameter is not passed.

Basically that's it.
Deconstruction may seem simple, but mastering it will make your code cleaner and easier to maintain. At first, I may feel a little unfamiliar, so I will be able to write a few more times. Remember a few key points: objects are taken according to attribute names, arrays are taken in order, and function parameters are very good to use with default values.

The above is the detailed content of JavaScript Destructuring: Objects and Arrays Explained. For more information, please follow other related articles on the PHP Chinese website!