当前位置：首页 > news >正文

JavaScript 解构赋值（下）：对象解构与高级应用

news 来源：原创 2025/4/28 7:30:22

对象解构赋值

基本语法

const person = { name: 'Alice', age: 30 };
const { name, age } = person;console.log(name); // 'Alice'
console.log(age);  // 30

别名

const { name: fullName, age: years } = person;
console.log(fullName); // 'Alice'
console.log(years);    // 30

嵌套对象

const user = {id: 1,info: {name: 'Bob',address: {city: 'New York',country: 'USA'}}
};const { info: { address: { city } } } = user;
console.log(city); // 'New York'

默认值

const { title = 'Unnamed', count = 0 } = { title: 'Article' };
console.log(title); // 'Article'
console.log(count); // 0

处理 null/undefined

const data = null;
const { name = 'Guest' } = data || {};
console.log(name); // 'Guest'

解构赋值的高级应用

函数参数解构

function printUser({ name, age }) {console.log(`${name} is ${age} years old.`);
}const user = { name: 'Charlie', age: 25 };
printUser(user); // 'Charlie is 25 years old.'

带默认值的函数参数

function createUser({ name = 'Guest', age = 18 } = {}) {return { name, age };
}const user1 = createUser();
console.log(user1); // { name: 'Guest', age: 18 }const user2 = createUser({ name: 'David' });
console.log(user2); // { name: 'David', age: 18 }

处理 API 响应

const response = {status: 200,data: {users: [{ name: 'Eve' }, { name: 'Frank' }]},metadata: {total: 2}
};const { data: { users }, metadata: { total } } = response;
console.log(users);  // [{ name: 'Eve' }, { name: 'Frank' }]
console.log(total);  // 2

动态属性名解构

const key = 'email';
const user = {name: 'Grace',email: 'grace@example.com'
};const { [key]: emailValue } = user;
console.log(emailValue); // 'grace@example.com'

解构赋值的最佳实践

保持代码简洁

解构赋值最适合用于提取你真正需要的数据，避免过度解构导致代码可读性下降：

// 推荐：只提取需要的属性
const { name, email } = user;// 不推荐：过度解构复杂对象
const { a: { b: { c } } } = data; // 难以理解

避免命名冲突

当解构多个对象时，注意避免变量名冲突：

const user = { name: 'Alice' };
const profile = { name: 'Bob', age: 30 };// 使用别名避免冲突
const { name: userName } = user;
const { name: profileName, age } = profile;

结合剩余参数

const settings = {theme: 'dark',fontSize: 14,showNotifications: true,allowCookies: true
};const { theme, ...otherSettings } = settings;
console.log(theme);          // 'dark'
console.log(otherSettings);  // { fontSize: 14, showNotifications: true, allowCookies: true }