如何在JavaScript对象数组中修改指定字段值且保留原有数据

你的需求 #

将对象obj的create数组内，field值为test的元素的field属性修改为test_ID，同时保留对象和数组中的所有原有数据。

你的对象结构：

const obj = {
  pro: 0,
  gr: 0,
  create: [
    {
      field: "test",
      value: 12345
    }
  ]
};

当前代码的问题 #

你编写的代码存在两处关键错误：

• 字符串'OWNER'无法调用数组的join方法，且你需要匹配的是field: 'test'，目标值写错了
• find方法的箭头函数语法不完整，缺少闭合括号，且找到元素后未执行修改操作

错误代码示例：

const test = obj.create.find((ele) => ele.field === 'OWNER'.join('_ID');

正确解法 #

方法1：直接修改原对象（适合允许修改原数据的场景） #

通过find定位目标元素后，直接修改其field属性，不会丢失任何原有数据：

// 找到field为'test'的元素
const targetEle = obj.create.find(ele => ele.field === 'test');
// 确保找到元素后再修改，避免报错
if (targetEle) {
  targetEle.field = 'test_ID';
}

console.log(obj);
// 输出结果：
// {
//   pro: 0,
//   gr: 0,
//   create: [ { field: 'test_ID', value: 12345 } ]
// }

方法2：创建新对象（适合需要保持原对象不可变的场景） #

如果不想修改原对象，可通过解构赋值生成新的对象和数组：

const newObj = {
  ...obj,
  create: obj.create.map(ele => {
    if (ele.field === 'test') {
      return { ...ele, field: 'test_ID' };
    }
    return ele;
  })
};

console.log(newObj); // 新对象的create数组中目标元素已修改
console.log(obj); // 原对象保持不变

内容的提问来源于stack exchange，提问作者Marizona