避免写乱的 JavaScript：今天学习对象解构

Source: Dev.to

老实说

如果你的 JavaScript 仍然是这样写的：

const user = { name: "Alex", age: 25 };

const name = user.name;
const age = user.age;

…我们得聊聊了。 😅

因为 JavaScript 已经提供了一个 更简洁的特性——对象解构，而忽视它基本上就是在 无缘无故写更多代码。

今天我们将学习

• 对象解构是什么
• 它是如何工作的
• 到底在幕后发生了什么

结束后，你的代码将会 更短、更清晰，也更专业。

什么是对象解构？

对象解构让你在一行代码中将对象属性提取到变量中。

基本示例

const user = {
  name: "Alex",
  age: 25,
  country: "India"
};

const { name, age, country } = user;

console.log(name, age, country);

输出

Alex 25 India

解释

const { name, age, country } = user;

表示：

• 从 user 中取出 name、age 和 country 属性
• 创建同名的变量

这比写三个独立的赋值语句要简洁得多。

默认值

有时属性可能不存在。解构赋值允许你设置 默认值。

const user = { name: "Alex" };

const { name, age = 18 } = user;

console.log(name, age);

输出

Alex 18

解释

age = 18 在对象 不包含 age 时设置默认值。这可以防止代码中出现 undefined 值。

重命名变量

有时你希望变量名不同。

const user = { name: "Alex", age: 25 };

const { name: username, age } = user;

console.log(username, age);

输出

Alex 25

解释

name: username 的含义是：

• 取属性 name
• 将其存入名为 username 的变量中

原始对象未被修改。

嵌套对象解构

对象可以包含其他对象。解构可以轻松提取嵌套值。

const user = {
  name: "Alex",
  address: {
    city: "Chennai",
    country: "India"
  }
};

const { address: { city, country } } = user;

console.log(city, country);

输出

Chennai India

解释

address: { city, country } 进入 address 对象并提取其属性。此时 city 和 country 成为 顶层变量。

解构在函数参数中

解构也可以直接在函数参数中使用。

const user = { name: "Alex", age: 25 };

function greet({ name, age }) {
  console.log(`Hello ${name}, you are ${age} years old.`);
}

greet(user);

输出

Hello Alex, you are 25 years old.

解释

函数参数 { name, age } 会自动从传入函数的对象中提取对应的值。你不需要在函数内部写 user.name——代码更简洁、易读。

Source: …

实际案例：API 响应

想象一下，你调用了一个 API 并收到以下响应：

const apiResponse = {
  id: 1,
  username: "devAlex",
  email: "alex@email.com",
  profile: {
    followers: 100,
    following: 50
  }
};

你可以这样进行解构：

const {
  username,
  email,
  profile: { followers, following }
} = apiResponse;

console.log(username, email, followers, following);

输出

devAlex
alex@email.com
100
50

解释

解构让你一次性获取：

• username
• email
• 嵌套的 followers
• 嵌套的 following

全部在 一条简洁的语句 中完成。再也不需要一遍遍写 apiResponse.profile.followers 了。

为什么应该使用 Object Destructuring

• 更少代码 – 避免重复赋值
• 更好的可读性 – 更易浏览
• 默认值 – 防止 undefined
• 更简洁的函数 – 解构参数
• 行业标准 – 在 React、Node.js 和 API 处理方面被广泛使用

快速提示

• 一次性解构 – 在函数或模块的顶部提取所有需要的属性。
• 使用默认值 – 防止数据缺失。
• 必要时重命名 – 保持变量名有意义。
• 明智地嵌套 – 你可以对深层结构进行解构，但要避免过于复杂的模式，以免影响可读性。

结束语

如果你仍在编写这些代码：

const name = user.name;
const age = user.age;

…深呼吸一下，拥抱解构赋值。

你的代码将会 更短、更简洁，而且更易于维护。

编码愉快！ 🎉