如何用ES6优化动态对象myDefaults值提取逻辑？

我有一个来自API响应的动态对象myObj，结构如下：

{
    "section-1": {
        "id": "section-1",
        "fields": [
            {
                "id": "field1",
                "items": [
                    {
                        "display": "Select",
                        "value": "SELECT"
                    },
                    {
                        "display": "A 1",
                        "value": "A1"
                    },
                    {
                        "display": "A 2",
                        "value": "A2"
                    }
                ],
                "value": "A1"
            }, {
                "id": "field2",
                "items": [],
                "value": "Field 2"
            }
        ]
    },
    "section-2": {
        "id": "section-2",
        "fields": []
    },
    "section-3": {
        "id": "section-3",
        "fields": []
    }
}

其中sections和fields的数量均为动态，可包含任意数量的sections及对应的fields。我需要从中提取value属性组成myDefaults对象。目前我通过手动遍历每个section实现该逻辑，代码如下：

const section1 = myObj?.sections['section-1'];
const section2 = myObj?.sections['section-2'];
let myDefaults = {};
section1.fields.forEach((field) => {
    myDefaults[field.id] = field.value;
    if (field.items && field.items.length > 0) {
        myDefaults[field.id] = field.items.find(item => item.value === field.value);
    }
});
section2.fields.forEach((field) => {
    myDefaults[field.id] = field.value;
    if (field.items && field.items.length > 0) {
        myDefaults[field.id] = field.items.find(item => item.value === field.value);
    }
});

现寻求更简洁的ES6写法来优化该提取逻辑。

可以利用ES6的数组和对象方法，实现适配任意数量sections和fields的简洁逻辑：

const myDefaults = Object.values(myObj)
  .flatMap(section => section.fields)
  .reduce((acc, field) => {
    acc[field.id] = field.items?.length 
      ? field.items.find(item => item.value === field.value) 
      : field.value;
    return acc;
  }, {});

代码解析 #

• Object.values(myObj)：获取myObj中所有section对象的数组，无需手动指定section名称，完美适配动态数量的sections。
• flatMap(section => section.fields)：将每个section的fields数组合并为一个一维数组，避免嵌套遍历，统一处理所有fields。
• reduce()：遍历所有fields，根据字段是否有有效选项列表赋值：
  • 若field.items存在且不为空，找到与field.value匹配的item对象；
  • 否则直接使用field.value；
  • 最终将所有字段的结果累积到初始空对象中，得到目标myDefaults。

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