现代JavaScript中更新嵌套属性后创建新对象的最佳实践

嘿，你的思路其实已经很靠谱了——用扩展运算符做浅拷贝避免污染原始对象，配合reduce遍历处理，这本身就是不可变更新的标准操作！不过确实有几个可以让代码更简洁、更易读的优化方向，我来给你梳理几种方案：

1. 用Object.entries简化遍历逻辑 #

你之前用Object.keys需要额外一步取值，换成Object.entries可以直接拿到键值对，代码更紧凑。另外要注意：你现在的代码里option.selections还是原始对象的引用，如果要严格保证完全不可变（比如在Redux这类依赖不可变状态的场景），需要同时拷贝selections对象，彻底切断与原始数据的关联：

const newObject = Object.entries(options).reduce((obj, [key, option]) => {
  // 浅拷贝外层option
  const updatedOption = { ...option };
  const newVal = getNewValue(updatedOption.label);

  // 用可选链语法简化条件判断，更简洁
  if (updatedOption.selections?.value && newVal) {
    // 拷贝selections再修改value，避免影响原始对象
    updatedOption.selections = { ...updatedOption.selections, value: newVal };
  }

  return { ...obj, [key]: updatedOption };
}, {});

2. 用Object.fromEntries+map实现更直观的函数式写法 #

如果觉得reduce的累加逻辑有点绕，可以用map先把每个键值对转换成新的，再用Object.fromEntries转回对象，整体逻辑更线性，可读性更好：

const newObject = Object.fromEntries(
  Object.entries(options).map(([key, option]) => {
    const newVal = getNewValue(option.label);
    // 只有满足更新条件时才生成新的option，否则直接浅拷贝原option
    const updatedOption = option.selections?.value && newVal
      ? {
          ...option,
          selections: { ...option.selections, value: newVal }
        }
      : { ...option };
    return [key, updatedOption];
  })
);

3. 用Immer库大幅简化不可变更新（推荐场景：嵌套层级深/频繁更新） #

如果你的项目允许引入第三方库，Immer的produce函数绝对是处理不可变对象的神器——它让你可以像写“可变代码”一样直接修改对象，但内部会自动生成全新的不可变对象，代码量骤减且可读性拉满：

import { produce } from 'immer';

const newObject = produce(options, draft => {
  Object.values(draft).forEach(option => {
    const newVal = getNewValue(option.label);
    // 直接修改draft就行，Immer会帮你处理所有不可变逻辑
    if (option.selections?.value && newVal) {
      option.selections.value = newVal;
    }
  });
});

对你原始实现的点评 #

你的代码已经符合不可变更新的最佳实践了，尤其是修正了浅拷贝option的步骤，成功避免了意外修改原始对象。唯一需要注意的细节就是我上面提到的：如果要完全切断与原始对象的引用，记得也要拷贝selections对象，否则原始对象的selections.value可能会被意外修改。

总结一下：

• 无依赖场景下，Object.entries+map+Object.fromEntries的写法比reduce更直观；
• 追求极致简洁和可读性，Immer是最优解；
• 你的原始写法完全可行，只是做一些细节优化就能更优雅。

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