如何在JavaScript中转换对象结构？提取嵌套对象的value属性

首先明确你的输入（已修正语法错误的完整对象）：

const originalObj = {
  "pencil": {
    "100": {
      "value": "#00000008",
      "type": "color"
    },
    "200": {
      "value": "#0000000d",
      "type": "color"
    },
    "300": {
      "value": "#0000001a",
      "type": "color"
    }
  }
};

目标输出结构：

{
  "pencil": {
    "100": "#00000008",
    "200": "#0000000d",
    "300": "#0000001a"
  }
}

实现方式 #

1. 手动映射（适合结构固定的场景）

如果对象结构完全固定，直接提取对应值即可：

const simplifiedObj = {
  pencil: {
    100: originalObj.pencil[100].value,
    200: originalObj.pencil[200].value,
    300: originalObj.pencil[300].value
  }
};

2. 动态遍历（适合键名不固定的场景）

如果pencil下的键（如100、200）可能变化，用遍历方式更灵活：

const simplifiedObj = {
  pencil: {}
};

// 遍历pencil下的所有子对象
for (const key in originalObj.pencil) {
  if (originalObj.pencil.hasOwnProperty(key)) {
    simplifiedObj.pencil[key] = originalObj.pencil[key].value;
  }
}

3. 使用Object.fromEntries简化写法

ES6+环境下可以用更简洁的数组转换写法：

const simplifiedObj = {
  pencil: Object.fromEntries(
    Object.entries(originalObj.pencil).map(([key, item]) => [key, item.value])
  )
};

说明 #

三种方法都能实现结构转换，后两种更适配动态键名的场景，Object.fromEntries写法最简洁，推荐在现代JS环境中使用。

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