如何为嵌套JavaScript对象动态添加键值对？及失败原因排查

原始对象 #

{
 "696770849122": 
    {
         "min_num": 2,
         "nick": "绵米兔批发",
         "orginal_price": 23, 
         "post_fee": 4, 
         "price": 23,
         "sku": [[Object], [Object]], 
         "title": "街舞小众设计灰色运动裤女宽松阔腿美式 嘻哈卫裤爵士舞jazz长裤"
    }, 
 "727870247137":
    {
         "min_num": 2,
         "nick": "绵米兔批发",
         "orginal_price": 25, 
         "post_fee": 4, 
         "price": 25,
         "title": "白色龙字母长裤女2023春季新款女街头时尚嘻哈hiphop跳舞运动裤潮"
     }
 }

期望结果 #

{
 "696770849122": 
    {
         "min_num": 2,
         "nick": "绵米兔批发",
         "orginal_price": 23, 
         "post_fee": 4, 
         "price": 23,
         "sku": [[Object], [Object]], 
         "title": "街舞小众设计灰色运动裤女宽松阔腿美式 嘻哈卫裤爵士舞jazz长裤",
         "remark": 'welcome to my word',
         "receiver_address_id": 25
    }, 
 "727870247137":
    {
         "min_num": 2,
         "nick": "绵米兔批发",
         "orginal_price": 25, 
         "post_fee": 4, 
         "price": 25,
         "title": "白色龙字母长裤女2023春季新款女街头时尚嘻哈hiphop跳舞运动裤潮", 
         "remark": 'hello world',
         "receiver_address_id": 23
     }
 }

你尝试的代码 #

Object.keys(order).forEach( function(key) {
        order[key]['remark'] = dynamic value;
        order[key]['receiver_address_id'] = dynamic value;
    })

 console.log(order) //原对象未发生变化
 console.log(order[key].remark) // undefined
 console.log(order[key].receiver_address_id) // undefined
 console.log(order[key]['remark']) // undefined
 console.log(order[key]['receiver_address_id']) // undefined

错误原因分析 #

1. 回调内的key是局部变量，外部无法访问
   forEach回调函数中的key仅在函数内部有效，你在回调外部打印order[key]时，key未定义，自然对应的属性值都是undefined。

2. dynamic value未实际赋值
   代码中的dynamic value是占位符，没有给它赋具体的字符串或数值，导致新增的属性值可能为undefined（如果变量未声明），或者没有真正设置有效内容。

3. 可能order对象被冻结/密封
   如果order是通过Object.freeze()或Object.seal()处理过的对象，那么无法添加新属性，此时原对象不会发生任何变化。

解决方法 #

方法1：修正变量作用域与赋值逻辑 #

先给动态值定义具体内容，然后在回调内部或正确遍历外部属性：

// 定义每个key对应的动态值
const dynamicMap = {
  "696770849122": { remark: 'welcome to my word', receiver_address_id: 25 },
  "727870247137": { remark: 'hello world', receiver_address_id: 23 }
};

// 遍历添加属性
Object.keys(order).forEach(key => {
  order[key].remark = dynamicMap[key].remark;
  order[key].receiver_address_id = dynamicMap[key].receiver_address_id;
  // 回调内部打印，可看到当前子对象的新增属性
  console.log(order[key]);
});

// 外部打印整个对象，确认更新
console.log(order);

// 外部遍历打印每个子对象的新增属性
Object.keys(order).forEach(key => {
  console.log(order[key].remark);
  console.log(order[key].receiver_address_id);
});

方法2：处理冻结/密封的对象 #

如果order不可扩展，可通过创建新对象来实现：

const dynamicMap = {
  "696770849122": { remark: 'welcome to my word', receiver_address_id: 25 },
  "727870247137": { remark: 'hello world', receiver_address_id: 23 }
};

const updatedOrder = {};
Object.keys(order).forEach(key => {
  // 解构原对象属性，添加新属性
  updatedOrder[key] = {
    ...order[key],
    ...dynamicMap[key]
  };
});

console.log(updatedOrder);

验证对象是否可扩展 #

可以先检查order的可扩展性，确认是否被冻结：

console.log(Object.isExtensible(order)); // true表示可扩展，false表示被冻结/密封

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