0

0

JavaScript中对象解构时重命名属性的语法编写规范

冰川箭仙

冰川箭仙

发布时间:2026-03-16 21:32:39

|

522人浏览过

|

来源于php中文网

原创

JavaScript对象解构重命名的正确写法是原属性名:新变量名,如const {name: userName} = obj;冒号左为字面量键名,右为合法标识符;可结合默认值写作原名:新名=默认值;嵌套时重命名仅作用于当前层级。

javascript中对象解构时重命名属性的语法编写规范

JavaScript对象解构中重命名属性,使用 原属性名: 新变量名 的语法,冒号前是对象中的实际键名,冒号后是你要声明的局部变量名。这是标准且唯一的写法,必须严格遵循。

基本语法格式

重命名解构的核心结构为:

  • const { originalKey: newVarName } = obj;</li>
      <li><code>let { count: totalCount } = data;</li>
      <li><code>const { user: currentUser, id: userId } = response;

注意:冒号左侧必须是字面量属性名(或字符串形式的键),不能是表达式;右侧是合法的标识符,作为新变量名使用。

与默认值结合使用的写法

重命名后仍可设置默认值,但默认值要写在新变量名之后,用等号连接:

立即学习Java免费学习笔记(深入)”;

  • const { name: userName = 'anonymous' } = user;
  • const { status: httpStatus = 200, code: errorCode } = res;errorCode 没有默认值,httpStatus 有)

顺序不可颠倒:必须是 原名: 新名 = 默认值,不能写成 原名 = 默认值: 新名,后者语法错误。

会译·对照式翻译
会译·对照式翻译

会译是一款AI智能翻译浏览器插件,支持多语种对照式翻译

下载

嵌套对象中重命名的注意事项

在嵌套解构中,重命名只作用于当前层级的属性名,不影响内部结构:

  • const { profile: { name: fullName, age: userAge } } = userData; → 将 userData.profile.name 赋给 fullNameuserData.profile.age 赋给 userAge
  • 不能直接写 { profile: userInfo } 来重命名整个 profile 对象,除非你明确想把 profile 整体赋给 userInfo,此时没有深层解构

若需同时重命名并解构嵌套对象,推荐分步或使用括号明确层级,避免可读性下降。

常见错误与规避方式

以下写法均不合法:

  • const { 'first-name': firstName } = user; → 键含特殊字符时必须加引号,但解构中带引号的字符串不能直接用于重命名(会报语法错误);应改用计算属性或先解构再赋值
  • const { [key]: value } = obj; → 计算属性名在解构左侧不支持重命名,仅支持静态键名
  • const { name: 'userName' } = user; → 右侧必须是变量名,不能是字符串

遇到动态键或带连字符的键(如 first-name),建议用传统点号或方括号访问,或先用解构获取父对象再取值。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

203

2023.11.20

mysql标识符无效错误怎么解决
mysql标识符无效错误怎么解决

mysql标识符无效错误的解决办法:1、检查标识符是否被其他表或数据库使用;2、检查标识符是否包含特殊字符;3、使用引号包裹标识符;4、使用反引号包裹标识符;5、检查MySQL的配置文件等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

218

2023.12.04

Python标识符有哪些
Python标识符有哪些

Python标识符有变量标识符、函数标识符、类标识符、模块标识符、下划线开头的标识符、双下划线开头、双下划线结尾的标识符、整型标识符、浮点型标识符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

326

2024.02.23

java标识符合集
java标识符合集

本专题整合了java标识符相关内容,想了解更多详细内容,请阅读下面的文章。

294

2025.06.11

c++标识符介绍
c++标识符介绍

本专题整合了c++标识符相关内容,阅读专题下面的文章了解更多详细内容。

179

2025.08.07

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

565

2023.09.20

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

761

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

chatgpt使用指南
chatgpt使用指南

本专题整合了chatgpt使用教程、新手使用说明等等相关内容,阅读专题下面的文章了解更多详细内容。

0

2026.03.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号