如何用JavaScript按条件将对象数组转换为新对象数组

需要用JavaScript修改给定的对象数组，返回新的对象数组，规则如下：

• 每个属性值转换为label和value属性
• 若属性值为数组，则将其嵌入到children属性中

原对象数组 #

var arrobj = [
  {
    title: "Test A",
    group: ['Travel', 'Health'],
    details: {
      'Travel': ['domestic', 'international'],
      'Health': ['hospital']
   }
  },
  {
    title: "Test B",
    group: ['Finance'],
    details: {
      'Finance': ['family']
   }
  }
]

预期输出 #

[
 {
   value: "Test A",
   label: "Test A",
   children: [
     {
       value: 'Travel', label: 'Travel',
       children: [
        { value: 'domestic', label: 'domestic'},
        { value: 'international', label: 'international'},
      ]
     },
     {
       value: 'Health', label: 'Health',
       children: [
        { value: 'hospital', label: 'hospital'},
      ]
     }  
   ]
 },
 {
   value: "Test B",
   label: "Test B",
   children: [
      { 
        value: 'Finance', label: 'Finance',
        children: [
          { value: 'family', label: 'family'},
        ]
      }
   ]
 }
]

我尝试的代码 #

arrrobj.map(e=> {
  label: e.title,  
  value: e.title,
  children: [
     {
       label: e.group;
       value: e.group;
       children: e.details.Travel
     }
   ]
})

问题分析与修正代码 #

你的尝试存在几个问题：

1. 箭头函数直接返回对象时需要用括号包裹，否则会被解析为代码块
2. 硬编码了Travel，没有遍历group数组处理所有分组
3. group是数组，不能直接赋值给label和value，应该取数组中的每个元素
4. 语法错误：对象属性间应该用逗号，而不是分号

以下是修正后的代码：

const transformedArray = arrobj.map(item => ({
  label: item.title,
  value: item.title,
  children: item.group.map(groupName => ({
    label: groupName,
    value: groupName,
    children: item.details[groupName].map(subItem => ({
      label: subItem,
      value: subItem
    }))
  }))
}));

console.log(transformedArray);

代码说明 #

• 外层map遍历原数组的每个对象，生成顶层的label/value，并处理children
• 第二层map遍历group数组，为每个分组生成对应的label/value，同时从details中取出该分组对应的子数组
• 最内层map遍历子数组，将每个元素转换为带label/value的对象

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