JS中使用flatMap()保留父级与子级的数组扁平化问题

原数组 #

export const Array = [
  {
    id: "1",
    title: "Dashboard 1",
  },
  {
    id: "2",
    title: "Dashboard 2",
  },
  {
    id: "3",
    title: "Dashboard 3",
  },
 {
    id: "10",
    title: "Dashboard 7",
    subNav: [
      {
        id: "11",
        title: "Dashboard 4",
      },
      {
        id: "12",
        title: "Dashboard 5",
      },
    ],
  },
];

原代码 #

Array.flatMap(item => item.subNav ? item.subNav?.flatMap(item1 => item1) : item)

当前输出（丢失父级元素） #

[{id: '1', title: 'Dashboard 1'},
{id: '2', title: 'Dashboard 2'},
{id: '3', title: 'Dashboard 3'},
{id: '11', title: 'Dashboard 4'} ,
{id: '12', title: 'Dashboard 5'}]

期望输出（保留父级与子级） #

[{id: '1', title: 'Dashboard 1'},
{id: '2', title: 'Dashboard 2'},
{id: '3', title: 'Dashboard 3'},
{id: '10', title: 'Dashboard 7'} ,
{id: '11', title: 'Dashboard 4'} ,
{id: '12', title: 'Dashboard 5'}]

问题分析 #

原代码的核心问题是：处理带subNav的元素时，仅返回了子数组的内容，完全遗漏了父元素本身，导致id为10的项丢失。

修改后的代码 #

const flattenedArray = Array.flatMap(item => {
  if (item.subNav) {
    // 创建不含subNav的父元素副本，避免结果中保留无用的子数组
    const parentItem = { ...item };
    delete parentItem.subNav;
    // 返回包含父元素和子元素的数组，flatMap会自动扁平化
    return [parentItem, ...item.subNav];
  }
  // 无subNav的元素直接返回
  return item;
});

更简洁的写法：

const flattenedArray = Array.flatMap(item => 
  item.subNav ? [{...item, subNav: undefined}, ...item.subNav] : item
);

代码说明 #

1. 针对含subNav的元素：
   • 先复制父元素并移除subNav属性，确保结果数组干净
   • 返回一个包含父元素和展开子元素的数组，交给flatMap自动扁平化
2. 针对无subNav的元素，直接返回原元素
3. 最终flatMap会将所有嵌套的子数组合并为一维数组

运行修改后的代码即可得到期望的输出结果。

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