JavaScript数组对象中指定字段转换

在 JavaScript 中,将数组对象中的 enable 字段转换为 disabled 字段(即删除旧键、添加新键并保留原值),最推荐的方式是使用 map 方法结合解构赋值。这种方式不会修改原数组,而是返回一个新的数组,符合函数式编程的最佳实践。

以下是几种常用的实现方式:

例如:
复制代码
let list = [
    {
        "enable": true,
        "key": "11111111",
        "name": "黄金糕"
    },
    {
        "enable": false,
        "key": "33333333",
        "name": "龙须面"
    },
    {
        "enable": true,
        "key": "22222222",
        "name": "北京烤鸭"
    }
];


转换结果:

let list = [
    {
        "disabled": true,
        "key": "11111111",
        "name": "黄金糕"
    },
    {
        "disabled": false,
        "key": "33333333",
        "name": "龙须面"
    },
    {
        "disabled": true,
        "key": "22222222",
        "name": "北京烤鸭"
    }
]
方法一:使用 map 和解构赋值(推荐)

这种方法代码简洁,且能确保生成全新的对象,避免引用污染。

复制代码
// 转换逻辑
list = list.map(item => {
    // 从 item 中解构出 enable,其余属性放入 rest
    const { enable, ...rest } = item;
    // 返回新对象,将 enable 的值赋给 disabled
    return {
        disabled: enable,
        ...rest
    };
});

console.log(list);
方法二:使用 forEach 原地修改

直接修改原数组对象(不创建新数组),可以使用 forEach。注意这会改变原始数据。

复制代码
list.forEach(item => {
    // 将 enable 的值赋给 disabled
    item.disabled = item.enable;
    // 删除 enable 属性
    delete item.enable;
});
方法三:通用封装函数

如果项目中经常需要重命名字段,可以封装一个通用工具函数:

复制代码
/**
 * 重命名数组中对象的某个键
 * @param {Array} arr - 目标数组
 * @param {String} oldKey - 旧键名
 * @param {String} newKey - 新键名
 */
function renameKeyInArray(arr, oldKey, newKey) {
    return arr.map(item => {
        if (item.hasOwnProperty(oldKey)) {
            const { [oldKey]: value, ...rest } = item;
            return { [newKey]: value, ...rest };
        }
        return item;
    });
}

// 使用
list = renameKeyInArray(list, 'enable', 'disabled');
总结:
  • 推荐使用 map + 解构‌:安全、不可变数据流、代码清晰。
  • 注意‌:delete 操作在某些 JavaScript 引擎中可能会影响对象的性能优化(隐藏类变更),因此在高性能场景下,创建新对象(方法一)通常优于删除属性(方法二)。
相关推荐
Wang's Blog11 小时前
Go-Zero 项目开发47:自研微服务框架的必要性与核心结构设计
开发语言·微服务·golang
白鸽(二般)11 小时前
MinIO Java Client API
java·开发语言
hPw0eKIqD11 小时前
C++ 模板参数推导问题小记(非推导上下文)
开发语言·c++
90后的晨仔12 小时前
从 H5 到 uni-app:一篇写给前端小白的"翻译指南"
前端·vue.js·前端框架
临床数据科学和人工智能兴趣组12 小时前
要使用 R Markdown,首先需要安装 R 和 RStudio,接着安装 rmarkdown 包
开发语言·数据挖掘·数据分析·r语言·r语言-4.2.1
软萌萌的112 小时前
Java Spring Boot 修改yml配置&加载顺序规则
java·spring boot·python
Nebula嵌入式12 小时前
【C语言】09-深入解析main函数
linux·c语言·开发语言·嵌入式
陈随易12 小时前
moon,apt和yum之外linux系统命令安装新选择
前端·后端·程序员
IT小盘13 小时前
13-企业Prompt模板-角色任务约束与输出格式
java·前端·prompt
爱敲键盘的猴子13 小时前
Java并发编程 -- volatile
java·java并发