我有一系列的类:

const transferClasses = [
  {
    id: "c5d91430-aaab-ed11-8daf-85953743f5cc",
    name: "Class1",
    isTransfer: false,
    children: [],
  },
  {
    id: "775cb75d-aaab-ed11-8daf-85953743f5cc",
    name: "Class2",
    isTransfer: false,
    children: [
      {
        id: "89134f56-3ef6-ed11-8daf-85953743f5cc",
        name: "Class2-1",
        isTransfer: false,
        children: [],
      },
      {
        id: "89134f56-3ef6-ed11-8daf-85953743f4cc",
        name: "Class2-2",
        isTransfer: false,
        children: [
          {
            id: "89134f56-3ef6-ed11-8daf-85953743f4de",
            name: "Class2-2-1",
            isTransfer: false,
            children: [],
          },
          {
            id: "89134f56-3ef6-ed11-8daf-85953743f1ce",
            name: "Class2-2-2",
            isTransfer: false,
            children: [],
          },
        ],
      },
    ],
  },
];

我需要迭代数组并将其转换为平面列表.例如:

const flatList = [
  {
    id: "c5d91430-aaab-ed11-8daf-85953743f5cc",
    name: "Class1",
    isTransfer: false,
    childrenId: null,
    parentId: null,
  },
  {
    id: "775cb75d-aaab-ed11-8daf-85953743f5cc",
    name: "Class2",
    isTransfer: false,
    childrenId: [
      "89134f56-3ef6-ed11-8daf-85953743f5cc",
      "89134f56-3ef6-ed11-8daf-85953743f4cc",
    ],
    parentId: null,
  },
  {
    id: "89134f56-3ef6-ed11-8daf-85953743f5cc",
    name: "Class2-1",
    isTransfer: false,
    childrenId: [],
    parentId: ["775cb75d-aaab-ed11-8daf-85953743f5cc"],
  },
  {
    id: "89134f56-3ef6-ed11-8daf-85953743f5cc",
    name: "Class2-2",
    isTransfer: false,
    childrenId: [
      "89134f56-3ef6-ed11-8daf-85953743f4de",
      "89134f56-3ef6-ed11-8daf-85953743f1ce",
    ],
    parentId: ["775cb75d-aaab-ed11-8daf-85953743f5cc"],
  },
  {
    id: "89134f56-3ef6-ed11-8daf-85953743f4de",
    name: "Class2-2-1",
    isTransfer: false,
    childrenId: [],
    parentId: ["89134f56-3ef6-ed11-8daf-85953743f5cc"],
  },
  {
    id: "89134f56-3ef6-ed11-8daf-85953743f1ce",
    name: "Class2-2-2",
    isTransfer: false,
    childrenId: [],
    parentId: ["89134f56-3ef6-ed11-8daf-85953743f5cc"],
  },
];

需要 for each 元素提供其父元素和子元素的id列表.

这是我的函数代码.似乎我想好了怎么处理子元素,但完全没有办法添加父母.

export const getFlatList = (classes) => {
  return classes.map((cl) => {
    
    const getChildIds = (classes) => {
      return classes.map((cl) => {
        if (cl.children.length > 0) {
          getChildIds(cl.children);
        } else {
          return cl.id;
        }
        return cl.id;
      });
    };

    return {
      id: cl.id,
      name: cl.name,
      isTransfer: cl.isTransfer,
      children: getChildIds(cl.children),
      parentId: ?? // :(
    };
  });
};

推荐答案

我想出了类似的东西.我们从顶层开始,然后寻找子元素.如果找到,我们再深入一级,直到子数组为空.

const flattenArray = (array) => {
    let flatArray = [];

    const traverse = (node, parentId = null) => {
        const { children, ...restOfNode } = node;

        flatArray.push({
            ...restOfNode,
            childrenId: children ? children.map(child => child.id) : [],
            parentId: [parentId],
        });

        if (node.children.length) {
            node.children.forEach((child) => traverse(child, node.id));
        }
    }

    array.forEach((arrayItem) => traverse(arrayItem));

    return flatArray;
}

Jsfidle:https://jsfiddle.net/wlecki/34cL8jh1/

Javascript相关问答推荐

无法将nPM simplex-noise包导入在JS项目中工作

Cypress -使用commands.js将数据测试id串在一起失败,但在将它们串在一起时不使用命令有效

node TS:JWT令牌签名以验证客户端和后台问题之间的身份验证

Google图表时间轴—更改hAxis文本 colored颜色

类型自定义lazy Promise. all

我可以从React中的出口从主布局调用一个处理程序函数吗?

Prisma具有至少一个值的多对多关系

在JS中拖放:检测文件

从包含数百行的表中获取更改后的值(以表单形式发送到后端)的正确方法是什么?

NG/Express API路由处理程序停止工作

将数组扩展到对象中

更改agGRID/Reaction中的单元格格式

如何在Jest中模拟函数

为什么NULL不能在构造函数的.Prototype中工作

如何在Firebase中读取对象的特定字段?

React数组查找不读取变量

在传单的图像覆盖中重新着色特定 colored颜色 的所有像素

如何阻止外部脚本进入顶层导航

如何在不将整个文件加载到内存的情况下,在Node.js中实现Unix粘贴命令?

观察子组件中的@Output事件emits 器?