如何在JS中用if/else修改对象数组中的指定属性值

问题描述 #

有一个嵌套对象数组，需要找到指定name值的对象并修改其name属性。编写的findName函数运行后得到[Array(1), Array(1)]的结果，而非预期的[{…}, {…}]，相关代码如下：

原数据（注：原代码存在语法错误，已修正） #

const example = [
    {
      id: '1234',
      desc: 'sample1',
      items: [
         {
           itemsName: [
            { id: 1, name: 'name1' },
            { id: 2, name: 'testItem2' }
           ],
           id: 888,
         }
       ]
    },    
    {
        id: '3456',
        desc: 'sample2',
        items: [
           {
             itemsName: [
              { id: 1, name: 'name2' },
              { id: 2, name: 'testItem3' }
             ],
             id: 889,
           }
        ]
    }
];

原错误函数 #

const findName = (name, changedName) => {
 const result = example?.map((group) =>
      group.items.map((group) =>
        group.itemsName?.map((i) => {
          if (i.name === name) return i.name === changedName;
          return null;
        })
      )
    );
}

findName('name1', 'name2')

错误原因分析 #

1. 语法错误：原example数组中items的元素缺少对象包裹（{}），导致数据结构不合法，这是基础问题。
2. map使用不当：嵌套map会生成多层数组结构，而非保留原有的对象数组层级，最终返回嵌套数组而非原结构的对象集合。
3. 属性修改逻辑错误：return i.name === changedName是返回布尔值，而非修改对象的name属性，完全偏离需求。
4. 未保留原数据结构：遍历过程中只返回修改后的布尔值或null，丢弃了原对象的其他属性，导致结构完全破坏。

正确实现方案 #

方案1：直接修改原数据（适合无需保留原数据的场景） #

const findName = (targetName, newName) => {
  // 遍历外层数组
  example.forEach(group => {
    // 遍历items数组
    group.items.forEach(item => {
      // 遍历itemsName数组，修改匹配对象的name
      item.itemsName.forEach(obj => {
        if (obj.name === targetName) {
          obj.name = newName;
        }
      });
    });
  });
  return example;
}

// 调用示例
findName('name1', 'newName1');
console.log(example);

方案2：返回新数组（不修改原数据，适合状态不可变的场景） #

const findName = (targetName, newName) => {
  return example.map(group => ({
    ...group,
    items: group.items.map(item => ({
      ...item,
      itemsName: item.itemsName.map(obj => 
        obj.name === targetName ? { ...obj, name: newName } : obj
      )
    }))
  }));
}

// 调用示例
const modifiedExample = findName('name1', 'newName1');
console.log(modifiedExample);

说明 #

• 方案1效率更高，但会改变原数组；方案2会创建新的对象和数组，保留原数据不变，适合React等需要状态不可变的场景。
• 两种方案都会保留原数据的完整结构，返回符合预期的对象数组。

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