如何在对象中存储属性与数组，新增属性时同步更新内部keys数组？

我们需要实现向对象新增keyN格式的属性时，自动将新增的键名同步到对象内部的keys数组中，不需要手动维护数组内容。 #

方案1：使用Proxy代理（最便捷，无侵入式操作） #

Proxy可以拦截对象的属性写入操作，自动判断是否需要更新keys数组，后续直接给对象赋值新属性即可自动同步：

const obj = {
  key1: 1,
  key2: 2,
  key3: 3,
  keys: ['key1', 'key2', 'key3']
};

// 生成代理对象，后续所有操作都用proxyObj
const proxyObj = new Proxy(obj, {
  set(target, prop, value) {
    // 只处理key+数字格式的新增属性，跳过keys数组本身的修改
    if (/^key\d+$/.test(prop) && !target.hasOwnProperty(prop)) {
      target.keys.push(prop);
    }
    target[prop] = value;
    return true;
  }
});

// 测试：直接赋值即可自动同步
proxyObj.key4 = 4;
proxyObj.key5 = 5;
proxyObj.key6 = 6;

console.log(proxyObj.keys); // 输出：['key1', 'key2', 'key3', 'key4', 'key5', 'key6']

这种方式的优势是后续操作和普通对象完全一致，不需要额外调用方法，符合无感知同步的要求。

方案2：封装专用新增方法（兼容性好，逻辑直观） #

如果需要兼容不支持Proxy的老旧环境，可以封装统一的新增属性方法，所有新增操作都调用该方法实现同步：

const obj = {
  key1: 1,
  key2: 2,
  key3: 3,
  keys: ['key1', 'key2', 'key3'],
  // 新增属性的专用方法
  addKey(value) {
    const nextIndex = this.keys.length + 1;
    const newKey = `key${nextIndex}`;
    this[newKey] = value;
    this.keys.push(newKey);
    return newKey;
  }
};

// 测试：调用addKey方法新增
obj.addKey(4);
obj.addKey(5);
obj.addKey(6);

console.log(obj.keys); // 输出：['key1', 'key2', 'key3', 'key4', 'key5', 'key6']

这种方式逻辑简单易懂，没有额外语法依赖，面试场景下写这个也能完全满足考察要求。

两种方案最终输出的对象结构都和需求示例完全一致，新增的keyN属性会自动同步到keys数组中。

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