如何通过点符号给JavaScript对象的不存在嵌套属性赋值？

问题回顾 #

在JavaScript中，直接使用点符号为已存在的对象添加属性是可行的：

const obj = {}
obj.a = "hello"
console.log(obj) // 输出: { a: "hello" }

但如果尝试给尚未存在的嵌套属性赋值，会直接抛出错误：

obj.a.b = "hello" // 报错: cannot set properties of undefined (setting 'b')

我们需要实现的效果是让这类赋值语句自动创建缺失的嵌套层级，最终得到：

const obj = {}
obj.a.b = "hello"
console.log(obj) // 输出: { a: { b: "hello" } }

可行方案：使用Proxy的get陷阱 #

你之前的思路误用了set陷阱，实际上错误发生在属性读取阶段：当访问obj.a时它不存在，返回undefined，后续访问.b自然报错。我们需要在get陷阱中拦截属性读取操作，自动创建缺失的嵌套对象。

完整实现代码 #

function createNestedProxy(target = {}) {
  return new Proxy(target, {
    get(target, prop) {
      // 仅当属性不存在时，创建新的嵌套Proxy对象
      if (!(prop in target)) {
        target[prop] = createNestedProxy();
      }
      // 返回目标属性（已存在或刚创建的Proxy）
      return target[prop];
    }
  });
}

// 测试示例
const obj = createNestedProxy();
obj.a.b = "hello";
console.log(obj); // 输出: { a: { b: 'hello' } }

// 支持任意深度嵌套
obj.x.y.z.w = 123;
console.log(obj.x.y.z); // 输出: { w: 123 }

// 不覆盖已有属性
obj.a.c = "world";
console.log(obj.a); // 输出: { b: 'hello', c: 'world' }

原理说明 #

1. 当访问对象的某个属性时，get陷阱被触发
2. 如果该属性不存在于目标对象中，就创建一个新的空对象，并将其包装成同样的嵌套Proxy，赋值给目标对象的对应属性
3. 返回这个新创建的Proxy（或已存在的属性值），后续的链式属性访问会继续触发同样的逻辑，直到完成赋值

扩展说明 #

• 若要支持数组自动创建，可以在get陷阱中判断属性是否为数字索引，然后创建数组而非对象
• 如需限制自动创建的层级，可以在函数中添加深度参数进行控制
• 该实现仅作用于通过createNestedProxy创建的对象，不会修改JavaScript原生对象的行为

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