ES6解构赋值（Destructuring assignment）：定义、用途、目的及示例咨询

Hey there! Let's dive into destructuring assignment in ES6—this feature is a total game-changer for writing clean, readable JavaScript, so I’m glad you asked about it. Let’s break it down step by step.

Destructuring assignment is an ES6 syntax that lets you extract values from arrays or objects and assign them to variables in a single, concise line. Instead of manually accessing elements by index or object properties one by one, you can unpack the data directly into variables that make your code more intuitive.

For example, instead of writing:

const fruits = ['apple', 'banana'];
const firstFruit = fruits[0];
const secondFruit = fruits[1];

You can do this in one line:

const [firstFruit, secondFruit] = ['apple', 'banana'];

The ES6 spec introduced destructuring to solve several pain points in pre-ES6 JavaScript:

• Simplify data extraction: Cut down on repetitive code like obj.property or arr[index] that cluttered up logic.
• Boost readability: When you see const { name, age } = user, you immediately know which properties you’re working with, no need to scan lines of assignment code.
• Enable structured function parameters: Instead of passing a messy object and picking apart its properties inside the function, you can destructure directly in the parameter list.
• Play nice with other ES6 features: It pairs seamlessly with arrow functions, module imports, Promise return values, and more, creating a smoother, more modern code style.

Let’s walk through common use cases to see how destructuring works in practice.

数组解构 #

Basic extraction #

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

Skip elements #

Use commas to skip values you don’t need:

const [, , tertiary] = colors;
console.log(tertiary); // 'blue'

Default values #

Assign a fallback value if the extracted position is undefined:

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

Rest elements #

Capture remaining elements into a new array with the spread operator (...):

const [firstColor, ...restColors] = colors;
console.log(restColors); // ['green', 'blue']

对象解构 #

Basic extraction #

Match variable names to object property names:

const product = { id: 101, name: 'Laptop', price: 999 };
const { name, price } = product;
console.log(name); // 'Laptop'
console.log(price); // 999

Rename variables #

If you want a variable name different from the property name:

const { name: productName, price: productPrice } = product;
console.log(productName); // 'Laptop'

Default values #

Set defaults for properties that might not exist:

const { name, inStock = false } = product;
console.log(inStock); // false

Nested object解构 #

Unpack values from nested objects directly:

const user = {
  username: 'jdoe',
  profile: {
    bio: 'JavaScript developer',
    location: 'Berlin'
  }
};
const { profile: { bio, location } } = user;
console.log(bio); // 'JavaScript developer'

其他实用场景 #

Swap variables without a temp #

No need for an extra variable to swap values:

let a = 5, b = 10;
[a, b] = [b, a];
console.log(a); // 10, b: 5

Destructure function parameters #

Clean up function logic by destructuring parameters upfront:

function logUser({ username, profile: { location } }) {
  console.log(`User ${username} is in ${location}`);
}
logUser(user); // User jdoe is in Berlin

Unpack function return values #

If a function returns an object or array, destructure the result immediately:

function fetchPost() {
  return { id: 1, title: 'ES6 Destructuring', author: 'Jane' };
}
const { title, author } = fetchPost();
console.log(title); // 'ES6 Destructuring'

内容的提问来源于stack exchange，提问作者Code Maniac