JavaScript中使用扩展语法声明对象时设置嵌套路径的方法

当然可以实现——你只需要通过嵌套扩展的方式，在同一个对象声明里完成嵌套属性的覆盖或新增，不用额外拆分两行代码。下面是几种常见场景的写法：

1. 覆盖/新增已有嵌套层级的属性 #

如果原对象本身就有对应的嵌套结构，在扩展时重新定义该嵌套对象，同时保留原有属性并添加新值：

举个例子，原对象是这样的：

const original = {
  id: 1,
  user: {
    name: "Alice",
    age: 28
  }
};

要复制对象的同时，把user.age改成30，再新增user.email，可以这么写：

const updated = {
  ...original, // 复制顶层所有属性
  user: {
    ...original.user, // 保留user原有的所有属性
    age: 30, // 覆盖原有age值
    email: "alice@example.com" // 新增嵌套属性
  }
};

最终updated的结构会是：

{
  id: 1,
  user: {
    name: "Alice",
    age: 30,
    email: "alice@example.com"
  }
}

2. 创建全新的嵌套路径 #

如果原对象没有对应的嵌套层级，直接在扩展语法里声明完整的嵌套结构即可：

比如原对象只有顶层属性：

const original = { id: 1 };

要新增settings.notifications.enabled这个嵌套路径：

const updated = {
  ...original,
  settings: {
    notifications: {
      enabled: true
    }
  }
};

3. 处理多层嵌套的修改 #

如果是更深层级的嵌套，只需要逐层嵌套扩展就行，逻辑和上面一致：

原对象：

const original = {
  id: 1,
  app: {
    config: {
      theme: "light",
      layout: "grid"
    }
  }
};

要修改app.config.theme为dark，同时新增app.config.fontSize：

const updated = {
  ...original,
  app: {
    ...original.app,
    config: {
      ...original.app.config,
      theme: "dark",
      fontSize: 16
    }
  }
};

避坑提示 #

• 如果原对象的嵌套属性可能是undefined（比如可能不存在user这个属性），记得用可选链+空值合并运算符处理，避免解构时报错：

const updated = {
  ...original,
  user: {
    ...(original.user ?? {}), // 当user不存在时，用空对象兜底
    age: 30
  }
};

• 这种方式属于层级式的浅拷贝，如果嵌套层级里还有更深的引用类型（比如数组、嵌套对象），如果需要完全深拷贝，得自己写递归逻辑或者用工具函数（比如lodash的cloneDeep），但扩展语法本身不支持原生深拷贝嵌套结构。

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