扁平化数组树js

Question

你能帮我把这棵树弄平吗？我尝试了一些东西但没有用。我想获得最快的方法（算法）。

const source = [
  {
    item: { id: 1, name: "item name", code: "1d4g4" },
    children: [
      {
        item: { id: 2, name: "item name 2", code: "1d4g4" },
        children: [
          {
            item: { id: 2, name: "item name 2", code: "1d4g4" },
            children: [
              {
                item: { id: 3, name: "item name 2", code: "1d4g4" },
                children: [
                  { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
                  { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
                  { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
];

这是我期望的结果：

  { id: 1, name: 'item name', code: '1d4g4' },
  { id: 2, name: 'item name 2', code: '1d4g4' },
  { id: 2, name: 'item name 2', code: '1d4g4' },
  { id: 3, name: 'item name 2', code: '1d4g4' },
  { id: 4, name: 'item name 2', code: '1d4g4' },
  { id: 4, name: 'item name 2', code: '1d4g4' },
  { id: 4, name: 'item name 2', code: '1d4g4' }
]```

Answer 1

将语法修改为实际有效后JavaScript，您将需要一个递归函数：

function flatten(destArray, nodeList) {
  nodeList.forEach((node) => {
    destArray.push(node.item);
    flatten(destArray, node.children || []);
  });
}

const source = [
  {
    item: { id: 1, name: "item name", code: "1d4g4" },
    children: [
      {
        item: { id: 2, name: "item name 2", code: "1d4g4" },
        children: [
          {
            item: { id: 2, name: "item name 2", code: "1d4g4" },
            children: [
              {
                item: { id: 3, name: "item name 2", code: "1d4g4" },
                children: [
                  { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
                  { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
                  { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
];

const dest = [];
flatten(dest, source);
console.log(dest);

产出

[
  { id: 1, name: 'item name', code: '1d4g4' },
  { id: 2, name: 'item name 2', code: '1d4g4' },
  { id: 2, name: 'item name 2', code: '1d4g4' },
  { id: 3, name: 'item name 2', code: '1d4g4' },
  { id: 4, name: 'item name 2', code: '1d4g4' },
  { id: 4, name: 'item name 2', code: '1d4g4' },
  { id: 4, name: 'item name 2', code: '1d4g4' }
]

Answer 2

您可以编写内部 visit 方法来处理遍历树并将项目添加到内部 results 列表。

注意：确保您的 JS/JSON 数据结构正确。

const tree = [{
  item: {id: 1, name: "item name", code: "1d4g4"},
  children: [{
    item: {id: 2, name: "item name 2", code: "1d4g4"},
    children: [{
      item: {id: 2, name: "item name 2", code: "1d4g4"},
      children: [{
        item: {id: 3, name: "item name 2", code: "1d4g4"},
        children:[
          {item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []},
          {item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []},
          {item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []},
        ]
      }]
    }]
  }]
}];

const treeToList = (tree, results = []) => {
  const visit = ({ item, children = [] }, res) => {
    if (item) res.push(item);
    children.forEach(child => visit(child, res));
  }
  visit({ children: tree }, results);
  return results;
}

console.log(treeToList(tree));

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 3

您可以使用 Array#flatMap 和一个调用自身的回调。

const
    flat = ({ item, children = [] }) => [item, ...children.flatMap(flat)],
    data = [{ item: { id: 1, name: "item name", code: "1d4g4" }, children: [{ item: { id: 2, name: "item name 2", code: "1d4g4" }, children: [{ item: { id: 2, name: "item name 2", code: "1d4g4" }, children: [{ item: { id: 3, name: "item name 2", code: "1d4g4" }, children: [{ item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] }, { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] }, { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] }] }] }] }] }],
    result = data.flatMap(flat);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

const flatten = (data) => data.map(({ children }) => ([...flatten(children)]));

您当前的代码确实遍历了整棵树，但从未真正从数据中提取 item。另一个问题是您当前使用 map, which means the resulting value will always have the same amount of elements as the initial array. Use flatMap 来增加或减少数组中的元素数量。

尽可能少地更改您的代码，它可能看起来像这样：

const flatten = (data) => data.flatMap(({item, children}) => ([item, ...flatten(children)]));

const flatten = (data) => data.flatMap(({item, children}) => ([item, ...flatten(children)]));

const data = [{
  item: {id: 1, name: "item name", code: "1d4g4"},
  children: [{
    item: {id: 2, name: "item name 2", code: "1d4g4"},
    children: [{
      item: {id: 2, name: "item name 2", code: "1d4g4"},
      children: [{
        item: {id: 3, name: "item name 2", code: "1d4g4"},
        children:[
          {item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []},
          {item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []},
          {item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []},
        ]
      }]
    }]
  }]
}];

console.log(flatten(data));

扁平化数组树js

Flat an array tree js

javascript

arrays

flat