JavaScript 中的解构赋值

Source: Dev.to

🧠 什么是解构？

在单一步骤中将数组或对象中的值 解包 到不同的变量中。

🔹 解构数组

之前

const numbers = [10, 20, 30];
const first = numbers[0];
const second = numbers[1];

之后

const [first, second, third] = [10, 20, 30];
console.log(first);  // 10
console.log(second); // 20
console.log(third);  // 30

✅ 注意事项

• 数组的顺序很重要。
• 可以用逗号跳过元素：

const [, , third] = [10, 20, 30];
console.log(third); // 30

🔹 解构对象

之前

const person = { name: "Rahul", age: 22, city: "Delhi" };
const name = person.name;
const age = person.age;

之后

const { name, age } = { name: "Rahul", age: 22, city: "Delhi" };
console.log(name); // Rahul
console.log(age);  // 22

• 对象的顺序无关紧要。
• 变量名必须与属性名匹配（或进行重命名）。

// 重命名
const { name: userName } = { name: "Rahul" };
console.log(userName); // Rahul

🔹 默认值

如果属性可能不存在，可以提供默认值：

const { name, city = "Unknown" } = { name: "Rahul" };
console.log(city); // Unknown

嵌套解构

const user = { name: "Rahul", address: { city: "Delhi" } };
const { name, address: { city } } = user;
console.log(name); // Rahul
console.log(city); // Delhi

⚡ 解构的好处

• 减少重复代码
• 更简洁、更易读
• 更容易提取嵌套数据
• 与函数参数配合使用效果极佳

🔹 在函数参数中使用解构

function greet({ name, city = "Unknown" }) {
  console.log(`Hello ${name} from ${city}`);
}

greet({ name: "Rahul" });
// Hello Rahul from Unknown

之前

function greet(person) {
  const name = person.name;
  const city = person.city || "Unknown";
  console.log(`Hello ${name} from ${city}`);
}

之后

function greet({ name, city = "Unknown" }) {
  console.log(`Hello ${name} from ${city}`);
}

✅ 更简洁、更短、更易读。

• 解构用于从数组或对象中提取值。
• 数组 → 顺序重要。
• 对象 → 变量名必须匹配键（或进行重命名）。
• 支持默认值和嵌套结构。
• 适用于编写更简洁的代码和函数参数。