JavaScript 中怎么用对象解构赋值简化属性获取代码-js教程-PHP中文网

对象解构赋值是javascript中提取对象属性并赋值给变量的简洁写法，支持基础解构、重命名、默认值及嵌套解构，但不支持对undefined层级的安全访问。

javascript 中怎么用对象解构赋值简化属性获取代码

对象解构赋值是 JavaScript 中提取对象属性并赋值给变量的简洁写法，能避免重复写 obj.prop，让代码更清晰、更少冗余。

基础用法：按属性名直接解构

只要变量名和对象属性名一致，就能一行完成赋值：

const user = { name: '张三', age: 28, city: '杭州' };
const { name, age } = user; // 直接得到两个变量
console.log(name); // '张三'
console.log(age);  // 28

解构出来的变量名必须与对象属性名完全相同（区分大小写）
没被解构的属性（如 city）不会报错，只是不创建对应变量
原对象不受影响，解构只是读取值

重命名变量：用冒号指定新名称

当变量名需要不同于属性名时，用 属性名: 新变量名 语法：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

const { name: userName, age: userAge } = user;
console.log(userName); // '张三'
console.log(userAge);  // 28

左边是原始属性名，右边是你要声明的变量名
适合避免命名冲突，或让变量语义更明确（比如多个对象都有 id，可分别解构为 userId、postId）

设置默认值：防止 undefined

如果属性不存在或值为 undefined，可以设定默认值：

const { name, job = '未知职业', level = 1 } = { name: '李四' };
console.log(name);  // '李四'
console.log(job);   // '未知职业'
console.log(level); // 1

默认值只在属性值严格等于 undefined 时生效（null、''、0 都会保留原值）
常用于处理接口返回字段可能缺失的情况

嵌套解构：一层或多层对象结构直接展开

对深层嵌套的对象，可以在解构中直接用点号路径语法（实际是嵌套对象字面量）：

const data = {
  profile: {
    info: { nickname: '小王', tags: ['前端', '开源'] }
  }
};
const { profile: { info: { nickname, tags } } } = data;
console.log(nickname); // '小王'
console.log(tags);     // ['前端', '开源']