如何扁平化含childFilters的嵌套对象数组？已尝试lodash方法未果

原始输入数组 #

[
    {
        "_id": "63c6cd09c4836daca5a8ea51",
        "groupBy": "Title Metadata",
        "name": "Search Title Name",
        "tooltip": "Searches for books based on title input",
        "renderNATypes": false,
        "isFrequentlyUsed": true,
        "childFilters": [
            {
                "_id": "63c6cd09c4836daca5a8ea1f",
                "controlType": {
                    "name": "inputbox"
                }
            },
            {
                "_id": "63c6cd09c42136daca5a8ea1f",
                "controlType": {
                    "name": "dropdown"
                }
            }
        ]
    }
]

期望输出数组 #

[
    {
        "_id": "63c6cd09c4836daca5a8ea51",
        "child_id": "63c6cd09c4836daca5a8ea1f",
        "groupBy": "Title Metadata",
        "name": "Search Title Name",
        "tooltip": "Searches for books based on title input",
        "renderNATypes": false,
        "isFrequentlyUsed": true,
        "controlType": {"name": "inputbox"}
    },
    {
        "_id": "63c6cd09c4836daca5a8ea51",
        "child_id": "63c6cd09c42136daca5a8ea1f",
        "groupBy": "Title Metadata",
        "name": "Search Title Name",
        "tooltip": "Searches for books based on title input",
        "renderNATypes": false,
        "isFrequentlyUsed": true,
        "controlType": {"name": "dropdown"}
    }
]

实现方案 #

1. 原生JavaScript实现

利用Array.prototype.flatMap遍历父元素，分离出childFilters后，将父元素剩余属性与每个子元素的关键属性合并：

const originalArray = [/* 你的原始数组 */];

const result = originalArray.flatMap(parent => {
  // 提取childFilters，保留父元素其他属性
  const { childFilters, ...parentProps } = parent;
  // 遍历子过滤器生成目标结构对象
  return childFilters.map(child => ({
    ...parentProps,
    child_id: child._id,
    controlType: child.controlType
  }));
});

console.log(result);

2. Lodash实现

使用_.flatMap配合_.map，逻辑与原生方法一致：

const _ = require('lodash');
const originalArray = [/* 你的原始数组 */];

const result = _.flatMap(originalArray, parent => {
  const { childFilters, ...parentProps } = parent;
  return _.map(childFilters, child => ({
    ...parentProps,
    child_id: child._id,
    controlType: child.controlType
  }));
});

console.log(result);

核心逻辑是先剥离父元素的childFilters数组，再将父元素的基础属性逐个与子元素的_id（重命名为child_id）、controlType合并，最终展开为一维数组。

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