将一个深嵌套的包含对象和数组的数组扁平化

22 浏览
0 Comments

将一个深嵌套的包含对象和数组的数组扁平化

我有一个包含另一个包含对象的对象数组。嵌套层级为四层。

数组的结构如下：

[
  {
    title: '标题',
    type: 'section',
    links: [
      {
        label: '标签',
        id: 'id_1',
        links: [
          {
            title: '标题',
            type: 'section',
            links: [
              {
                label: '标签',
                id: 'id_2',
                links: [
                  {
                    label: '标签',
                    id: 'id_3',
                    links: [],
                  }
                ]
              }
            ]
          },
          {
            title: '其他标题',
            type: 'section',
            links: [
              {
                label: '标签',
                id: 'id_4',
                links: [],
              }
            ]
          }
        ]
      }
    ]
  }
]

我想要一个扁平化的数组，其中包含包含链接的链接数组的id（它们是子菜单的父级）。

所以期望的结果是：

["id_1", "id_2"]

我尝试使用来自MDN的这个函数来获得结果：

flatDeep(arr, d = 1) {
  return d > 0
    ? arr.reduce((acc, val) =>
      acc.concat(Array.isArray(val.links)
        ? this.flatDeep(val.links, d - 1)
        : val.links), [])
    : arr.slice();
}

这给我一个空数组。

0

3 答案

0 Comments

这段代码是用来将一个深层嵌套的数组中的对象和数组展开的。这个问题的出现是因为在处理深层嵌套的数组时，通常需要使用递归来处理，但递归可能会导致代码复杂和性能问题。为了解决这个问题，可以使用非递归的方法来展开数组。

代码首先创建了一个空数组result用来存储展开后的结果。然后创建了一个栈stack，并将原始数据data的副本放入栈中。接下来进入一个循环，每次循环都从栈中取出一个元素赋值给obj。如果obj中包含id属性并且links数组的长度大于0，则将obj的id属性值存入result数组中。接着将obj的links数组中的所有元素依次放入栈中。

这个过程使用了广度优先遍历的方法，如果要改为深度优先遍历，只需要将stack.push改为stack.unshift。

本文提供了一个更详细的解释，介绍了广度优先遍历和深度优先遍历的区别，可以点击链接：Breadth First Vs Depth First。

以上就是这个问题的出现原因以及解决方法的整理。通过使用非递归的方法，我们可以更简洁高效地展开深层嵌套的数组。

0
0 Comments

深度嵌套的数组和对象的扁平化是一个常见的问题，它的出现原因是在处理数据时，我们可能需要将一个嵌套层级很深的数组转化为一个扁平化的数组。

在给出的代码中，我们可以看到有一个名为`getId`的函数，它使用了递归和对`id`属性进行检查的方法来实现深度嵌套数组的扁平化。具体代码如下：

const
    getId = ({ id, links }) => [
        ...(id === undefined ? [] : [id]),
        ...links.flatMap(getId)
    ],
    data = [{ title: 'Title', type: 'section', links: [{ label: 'Label', id: 'id_1', links: [{ title: 'Title', type: 'section', links: [{ label: 'Label', id: 'id_2', links: [{ label: 'Label', id: 'id_3', links: [] }] }] }, { title: 'Other title', type: 'section', links: [{ label: 'Label', id: 'id_4', links: [] }] }] }] }],
    result = data.flatMap(getId);
console.log(result);

在这段代码中，我们首先定义了一个名为`getId`的函数，它接受一个包含`id`和`links`属性的对象作为参数。该函数的目的是将嵌套的数组扁平化并返回一个包含所有`id`的数组。

在函数内部，我们首先使用展开运算符`...`来判断`id`属性是否为`undefined`。如果是，我们返回一个空数组；如果不是，我们返回一个包含当前`id`值的数组。然后，我们使用`flatMap`方法来递归处理`links`数组中的每个元素，并将其传递给`getId`函数。最后，我们将所有的结果数组合并成一个扁平化的数组。

在给定的示例数据中，我们有一个嵌套层级很深的数组`data`，它包含了多个对象和数组的嵌套。我们通过调用`data.flatMap(getId)`来获取扁平化的结果数组。最终，我们将结果数组打印到控制台上。

感谢Nina的建议！我在代码中添加了一个对空的`links`数组进行检查的条件，其中检查了`id`是否为`undefined`，以便只返回具有链接的`id`。

通过这种方法，我们可以轻松地将一个深度嵌套的数组转化为一个扁平化的数组，并且只返回具有链接的`id`。这对于处理复杂的数据结构和进行进一步的数据处理非常有用。

0
0 Comments

本文介绍了如何使用Array.flatMap()方法来展开一个嵌套的包含对象和数组的数组。该问题的出现原因是需要将深度嵌套的数组展平，以便更方便地处理其中的数据。

解决方法是使用Array.flatMap()方法。首先，对于每个对象，使用解构赋值将其拆解，并使用一个空数组作为默认值来处理缺失的id值。然后，将id和递归展开链接后的结果进行拼接。

以下是使用这种方法来展开嵌套数组的示例代码：

const flattenIds = arr => arr.flatMap(({ id = [], links }) => 
  [].concat(id, flattenIds(links))
);
    
const data = [{ title: 'Title', type: 'section', links: [{ label: 'Label', id: 'id_1', links: [{ title: 'Title', type: 'section', links: [{ label: 'Label', id: 'id_2', links: [{ label: 'Label', id: 'id_3', links: [] }] }] }, { title: 'Other title', type: 'section', links: [{ label: 'Label', id: 'id_4', links: [] }] }] }] }];
const result = flattenIds(data);
console.log(result);

运行上述代码，将会得到展开后的数组[ 'id_1', 'id_2', 'id_3', 'id_4' ]。

使用Array.flatMap()方法可以更简洁地展开一个嵌套的数组，避免了使用循环或递归的复杂性。该方法在处理包含对象和数组的数组时非常有用，可以快速展开并处理其中的数据。

0