将对象转换为对象嵌套结构时代码失效的问题排查

问题背景 #

你想要把原始的对象结构：

{ 
  "Results": { 
    "circle": 0.06879016757011414, 
    "quad": { 
      "exp": 0.8039023876190186, 
      "actual": 0.19609761238098145 
    }, 
    "square": 0.8266428709030151 
  } 
}

转换成目标结构：

{ 
  "Results": { 
    "circle": { "circle": 0.06879016757011414 }, 
    "quad": { 
      "exp": 0.8039023876190186, 
      "actual": 0.19609761238098145 
    }, 
    "square": { "square": 0.8266428709030151 } 
  } 
}

但你写的代码执行后还是返回原对象，我来帮你拆解问题所在，再给你正确的解法。

原代码的问题拆解 #

先看你写的这段代码：

var modData = {}; 
data = data.Results; 
for (var key in data) { 
  if (data.hasOwnProperty(key)) { 
    modData[key] = data[key]; 
    for (var innerKey in data[key]) { 
      modData[key] = data[key]; 
    } 
  } 
} 
console.log("Modified is:", modData);

这里有三个核心问题：

• 没有处理非对象类型的属性：比如circle和square是数值，你直接把原数值赋值给modData[key]，完全没把它们包装成目标要求的新对象。
• 内部循环完全无效：当data[key]是对象（比如quad）时，你循环它的内部属性，但最后还是把原对象赋值回去，等于白做；当data[key]是数值时，这个循环根本不会执行（数值没有可枚举属性）。
• 缺少外层的Results包装：你最终的modData没有放回Results键下，结构和目标要求不符。

原生JavaScript正确解法 #

我们需要判断每个属性的值类型：如果是对象就直接保留，否则把它包装成以当前键为键的新对象，最后再放回Results中：

// 假设原始数据存在这个变量里
const originalData = { 
  "Results": { 
    "circle": 0.06879016757011414, 
    "quad": { "exp": 0.8039023876190186, "actual": 0.19609761238098145 }, 
    "square": 0.8266428709030151 
  } 
};

const modData = { Results: {} };
const results = originalData.Results;

for (const key in results) {
  if (results.hasOwnProperty(key)) {
    const value = results[key];
    // 注意要排除null，因为typeof null也是'object'
    if (typeof value === 'object' && value !== null) {
      modData.Results[key] = value;
    } else {
      // 用计算属性名包装成新对象
      modData.Results[key] = { [key]: value };
    }
  }
}

console.log("Modified is:", modData);

执行这段代码就能得到你想要的目标结构。

jQuery解决方案 #

如果习惯用jQuery，我们可以用$.each遍历对象，逻辑和原生JS一致：

const originalData = { 
  "Results": { 
    "circle": 0.06879016757011414, 
    "quad": { "exp": 0.8039023876190186, "actual": 0.19609761238098145 }, 
    "square": 0.8266428709030151 
  } 
};

const modData = { Results: {} };

$.each(originalData.Results, function(key, value) {
  if (typeof value === 'object' && value !== null) {
    modData.Results[key] = value;
  } else {
    modData.Results[key] = { [key]: value };
  }
});

console.log("Modified is:", modData);

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