0

0

如何在JavaScript中高效重命名并转换大型对象属性

聖光之護

聖光之護

发布时间:2025-09-29 10:22:01

|

497人浏览过

|

来源于php中文网

原创

如何在JavaScript中高效重命名并转换大型对象属性

本文介绍如何在JavaScript中高效地对大型对象进行属性重命名和类型转换。通过结合使用解构赋值和展开运算符,可以简洁明了地将原始对象的特定属性重命名、应用函数进行类型转换,同时保留其他未修改的属性,从而生成符合新数据模型要求的新对象。

在处理包含大量字段的javascript对象时,我们经常需要将其转换为另一种结构的对象,例如为了适应新的api接口或前端数据模型。这种转换通常涉及两类操作:一是重命名某些属性,二是将某些属性的值进行类型转换(如将毫秒时间戳转换为 date 对象)。直接遍历或手动复制所有属性效率低下且容易出错,而简单使用展开运算符 (...) 无法直接实现属性重命名和函数应用。

核心策略:解构赋值与展开运算符

解决这类问题的关键在于巧妙地结合使用JavaScript的解构赋值 (Destructuring Assignment)展开运算符 (Spread Syntax)

  1. 解构赋值重命名属性: 当从对象中解构属性时,我们可以同时对其进行重命名。语法是 { originalName: newName }。
  2. 解构赋值捕获剩余属性: 通过使用 ...rest 语法,我们可以将对象中除了被显式解构的属性之外的所有其他属性收集到一个新的对象中。
  3. 展开运算符构建新对象: 最后,我们可以使用展开运算符将 rest 对象的所有属性复制到新对象中,然后添加重命名后的属性和经过类型转换的属性。

这种方法允许我们精确地选择需要修改的属性,同时保持代码的简洁性和可读性。

实践示例与详细解析

假设我们有一个包含120多个字段的原始对象,其中 id 字段需要重命名为 client_id,而 created_at 字段(毫秒时间戳)需要转换为 Date 对象并重命名为 client_created_at。

首先,我们定义原始对象和目标对象的类型(在TypeScript环境中,这有助于类型检查和代码提示):

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

// 原始对象类型示例
interface OriginalObject {
  id: number;
  name: string;
  created_at: number; // 毫秒时间戳
  // ... 其他100多个字段
  [key: string]: unknown; // 允许存在其他任意字段
}

// 目标对象类型示例
export class NewDto {
  client_id: number;
  name: string;
  client_created_at: Date;
  // ... 其他100多个字段,与OriginalObject中未修改的字段保持一致
}

// 辅助函数:将毫秒时间戳转换为Date对象
function convertToDate(timestamp: number): Date {
  return new Date(timestamp);
}

// 示例原始数据
const originalObject: OriginalObject = {
  id: 12,
  name: "Sample Client",
  created_at: 1577999390226, // 示例毫秒时间戳
  status: "active",
  // ... 更多字段
};

接下来,我们使用解构赋值和展开运算符执行转换:

Otter.ai
Otter.ai

一个自动的会议记录和笔记工具,会议内容生成和实时转录

下载
// 步骤1:使用解构赋值重命名'id',并捕获其余属性
const { id: client_id, created_at, ...rest } = originalObject;

// 步骤2:构建新的对象
const newObject: NewDto = {
  ...rest, // 展开所有未修改的属性
  client_id, // 添加重命名后的'client_id'
  client_created_at: convertToDate(created_at), // 转换并添加'client_created_at'
};

console.log(newObject);
/*
输出示例 (部分字段):
{
  name: "Sample Client",
  status: "active",
  // ... 其他rest中的字段
  client_id: 12,
  client_created_at: "2020-01-02T02:29:50.226Z" // Date对象,具体格式取决于console.log的输出
}
*/

代码解析:

  1. const { id: client_id, created_at, ...rest } = originalObject;
    • id: client_id:从 originalObject 中提取 id 属性的值,并将其赋值给一个名为 client_id 的新变量。此时,originalObject 中的 id 属性实际上已被“提取”出来,不再包含在 rest 对象中。
    • created_at:从 originalObject 中提取 created_at 属性的值,并赋值给同名变量 created_at。与 id 类似,它也不再包含在 rest 对象中。
    • ...rest:这是一个“剩余属性”语法。它会收集 originalObject 中除了 id 和 created_at 之外的所有其他属性,并将它们封装到一个名为 rest 的新对象中。
  2. const newObject: NewDto = { ...rest, client_id, client_created_at: convertToDate(created_at), };
    • ...rest:将 rest 对象中的所有属性展开并复制到 newObject 中。
    • client_id:将第一步中重命名得到的 client_id 变量的值添加到 newObject 中。
    • client_created_at: convertToDate(created_at):调用 convertToDate 函数处理原始的 created_at 值,然后将结果赋值给 newObject 的 client_created_at 属性。

通过这种两步法,我们既实现了属性的重命名,又完成了特定属性的类型转换,同时保留了大部分未修改的属性,整个过程清晰且高效。

处理多个属性的场景

如果需要重命名和转换的属性更多,可以扩展解构赋值的语法:

// 假设还有 updated_at 需要转换为 Date,并重命名为 client_updated_at
const {
  id: client_id,
  created_at: raw_created_at, // 提取原始created_at
  updated_at: raw_updated_at, // 提取原始updated_at
  ...rest
} = originalObject;

const newObject: NewDto = {
  ...rest,
  client_id,
  client_created_at: convertToDate(raw_created_at),
  client_updated_at: convertToDate(raw_updated_at),
};

在这里,我们通过 created_at: raw_created_at 和 updated_at: raw_updated_at 的语法,将原始属性值提取到带有 raw_ 前缀的临时变量中,以便在新对象中进行转换。

注意事项

  1. 对象不可变性: 这种方法会创建一个全新的对象 newObject,而不会修改 originalObject。这符合函数式编程的原则,有助于避免副作用,使代码更易于理解和维护。
  2. 类型安全 (TypeScript): 在TypeScript项目中,明确定义 OriginalObject 和 NewDto 接口或类,并在转换时指定 newObject 的类型为 NewDto,可以确保转换后的对象符合预期结构,并在编译时捕获潜在的类型错误。
  3. 辅助函数: convertToDate 这样的辅助函数是业务逻辑的关键。根据实际需求,可能需要创建更多类似的函数来处理不同类型的转换(如字符串解析、数值计算等)。
  4. 性能考量: 对于大多数常规应用场景,解构赋值和展开运算符的性能开销可以忽略不计。JavaScript引擎对这些现代语法有很好的优化。对于处理数百万级别字段的极端情况,可能需要更底层的优化,但通常不必要。
  5. 属性顺序: 使用展开运算符时,属性的顺序可能会受到JavaScript引擎实现的影响。通常,在展开 ...rest 之后添加的属性会覆盖 rest 中同名的属性。但对于本例,我们是添加新名称的属性,所以顺序不是问题。

总结

通过巧妙地结合使用解构赋值进行属性重命名和提取,以及展开运算符进行对象合并和属性添加,我们能够以一种声明式、简洁且高效的方式,将大型JavaScript对象转换为新的数据模型。这种模式在数据转换、API响应处理和状态管理等场景中都非常实用,极大地提高了代码的可读性和可维护性。掌握这一技巧,将使你在处理复杂对象转换时游刃有余。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1501

2023.10.24

Go语言中的运算符有哪些
Go语言中的运算符有哪些

Go语言中的运算符有:1、加法运算符;2、减法运算符;3、乘法运算符;4、除法运算符;5、取余运算符;6、比较运算符;7、位运算符;8、按位与运算符;9、按位或运算符;10、按位异或运算符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

232

2024.02.23

php三元运算符用法
php三元运算符用法

本专题整合了php三元运算符相关教程,阅读专题下面的文章了解更多详细内容。

87

2025.10.17

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

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

531

2023.09.20

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

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

298

2023.08.03

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

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

212

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1501

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

624

2023.11.24

clawdbot ai使用教程 保姆级clawdbot部署安装手册
clawdbot ai使用教程 保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

8

2026.01.29

热门下载

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

精品课程

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

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

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

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