JavaScript对象uiAppMsg属性值更新失败问题求助

问题场景 #

从硬件设备通过Websocket接收JSON对象，其中uiAppMsg是Base64编码格式。解码后重新赋值给jsonObj.uiAppMsg，应用里该属性仍显示编码字符串，但相同代码在JSFiddle里完全正常，能看到uiAppMsg更新为解码后的JSON对象。

测试代码：

let socketMsg = "{\"msgType\":\"uiAppMsg\",\"uiAppMsg\":\"eyJ0cmFuc2FjdGlvbkRhdGEiOnsiQnJkU3RhdHVzRGlzcGxheSI6eyJEaXNwbGF5VGV4dCI6IkFMUkVBRFkgbmV3bGluZSBPTkJPQVJEIiwidGltZXIiOiIiLCJjb2xvciI6IiJ9fSwidHJhbnNhY3Rpb25UaW1lb3V0RGF0YSI6eyJCcmRTdGF0dXNEaXNwbGF5Ijp7IkRpc3BsYXlUZXh0IjoiIiwidGltZXIiOiIiLCJjb2xvciI6IiJ9fX0=\"}"
var jsonObj = JSON.parse(socketMsg);
const decodedUIAppMsg = atob(jsonObj.uiAppMsg);
jsonObj.uiAppMsg = JSON.parse(decodedUIAppMsg);

console.log(jsonObj)

可能的原因及解决办法 #

1. 应用接收的实际消息与测试用例不一致 #

硬件设备发送的Base64可能是URL安全变种（用-替代+、_替代/），或者带有换行、空格等冗余字符，导致atob解码静默失败，最终uiAppMsg没被正确赋值。

解决：先预处理Base64字符串再解码：

// 处理URL安全Base64，去除冗余字符
const safeBase64 = jsonObj.uiAppMsg
  .replace(/-/g, '+')
  .replace(/_/g, '/')
  .trim();
const decodedUIAppMsg = atob(safeBase64);

2. 对象被冻结/不可修改 #

如果应用中jsonObj被其他代码用Object.freeze()冻结，或者设置为不可扩展，直接赋值会静默失败。

排查：赋值前执行console.log(Object.isFrozen(jsonObj))，返回true则说明对象被冻结。

解决：创建新对象替代原对象：

var jsonObj = JSON.parse(socketMsg);
const decodedUIAppMsg = atob(jsonObj.uiAppMsg);
// 生成新对象替换原冻结对象
jsonObj = {
  ...jsonObj,
  uiAppMsg: JSON.parse(decodedUIAppMsg)
};

3. 异步时机错误：赋值前已使用对象 #

应用中可能在完成解码赋值前，就把jsonObj传给了UI渲染或其他逻辑，导致后续使用的是未修改的原始对象引用。

解决：调整代码顺序，确保解码赋值完成后再传递对象：

// 错误顺序：先传递后修改
renderUI(jsonObj);
jsonObj.uiAppMsg = ...;

// 正确顺序：先修改后传递
jsonObj.uiAppMsg = ...;
renderUI(jsonObj);

4. 其他代码覆盖了属性值 #

赋值完成后，可能有其他逻辑（比如消息重处理、状态同步代码）重新将uiAppMsg设置为原始的Base64字符串。

排查：在赋值后加断点，查看后续代码是否修改了jsonObj.uiAppMsg。

通用排查步骤 #

1. 在应用中打印接收的原始socketMsg，和JSFiddle测试字符串对比，确认内容完全一致。
2. 在解码、赋值的每一步添加日志，查看中间结果：

   console.log('原始uiAppMsg:', jsonObj.uiAppMsg);
   console.log('解码后字符串:', decodedUIAppMsg);
   console.log('赋值后的jsonObj:', jsonObj);
   

3. 添加错误捕获，避免静默失败：

   try {
     var jsonObj = JSON.parse(socketMsg);
     const decodedUIAppMsg = atob(jsonObj.uiAppMsg);
     jsonObj.uiAppMsg = JSON.parse(decodedUIAppMsg);
   } catch (e) {
     console.error('处理消息出错:', e);
   }
   

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