如何将数组对象中details子对象的属性提取至外层同级位置？

嘿，这个需求太常见啦！其实用JavaScript的数组方法配合对象操作就能轻松解决，我给你两种方案，看你习惯哪种：

首先得提一句，你给出的原数据有个小语法错误——每个对象属性后面要加逗号（比如"vol":"0.0"后面缺了逗号），先修正这个才能正常运行哦。

方案一：ES6解构+展开语法（简洁首选） #

这种写法代码更清爽，是现在主流的写法，现代浏览器和Node.js都支持：

// 修正后的原数据
const originalData = [
  {
    "data": {
      "id":1,
      "vol":"0.0",
      "details":{
        "ABC":"8.30",
        "OFG":"13.85",
        "SPG":"70.80"
      }
    }
  },
  {
    "data": {
      "id":2,
      "vol":"1.0",
      "details":{
        "ABC":"3.30",
        "OFG":"15.85",
        "SPG":"70.80"
      }
    }
  }
];

// 处理逻辑
const processedData = originalData.map(item => {
  // 从item.data里解构出details，剩下的属性放到restOfData里
  const { details, ...restOfData } = item.data;
  // 合并restOfData和details，生成新的data对象
  return {
    data: {
      ...restOfData,
      ...details
    }
  };
});

console.log(processedData);

方案二：Object.assign兼容写法（适配旧环境） #

如果你的项目还要兼容不支持ES6的旧环境，可以用Object.assign来实现：

const processedData = originalData.map(item => {
  // 先复制一份原data对象，避免修改原数据
  const newData = Object.assign({}, item.data);
  // 取出details属性
  const details = newData.details;
  // 删除原data里的details键
  delete newData.details;
  // 把details里的所有属性合并到newData中
  Object.assign(newData, details);
  // 返回处理后的对象
  return { data: newData };
});

两种方案最终都会生成你想要的数组——每个data对象里直接包含id、vol以及原details里的所有属性，不再有details这个嵌套对象啦。

备注：内容来源于stack exchange，提问作者Roma