如何在React中从嵌套数组中提取所有对象到一个数组

Question

我有一个这样的数组，这是我的useState的初始状态:

Array [ (6) […], (6) […] ]
​
0: Array(6) [ undefined, {…}, {…}, … ]
​
1: Array(6) [ undefined, undefined, {…}, … ]

例如:

const[arr,setArr] = React.useState([
[
{label: "Beklam", id: 5032},
{label: "Dx6", id: 5052},
undefined,
undefined
],
[
{label: "item1", id: 50567},
{label: "item4", id: 505567},
{label: "item6", id: 50537},
{label: "itemA", id: 505647},
undefined,
undefined,
]
])

我想这样写:

[
{label: "Beklam", id: 5032},
{label: "Dx6", id: 5052},
{label: "item1", id: 50567},
{label: "item4", id: 505567},
{label: "item6", id: 50537},
{label: "itemA", id: 505647},
]

我应该提到undefined值来自输入。在我的情况下，有可能收到undefined，我应该处理它。

这是来自浏览器的console.log输出。一个数组里面有两个数组。这两个数组中的每一个都有6个元素。它们可以大于6。因此，元素的数量不是静态的，数组也是如此。

数组可以有多个子数组。

像这样:

0: undefined
1: undefined
2: Object { label: "Beklam", id: 5032 }
3: Object { label: "0/65%", id: 5061 }
4: undefined
5: undefined

我想将子数组中的所有对象提取到一个对象中。显然，将这两个数组的所有值提取到包含其对象的单个数组中。

，如果可能的话，过滤undefined值，不显示它们。而不是尝试使用array.filter变量。

我实际上还没有遇到过这样的问题。所以我真的不知道如何处理多维数组。

Answer 1

你可以直接使用flatmap把它变成一维数组

console.log(arr.flatMap((e) => e));

或者更简单:

console.log(arr.flat());

和过滤掉未定义的值:

console.log(arr.flatMap((e) => e.filter((f) => f !== undefined)));

Answer 2

您可以使用flat将其平展为单个数组。

您可以使用过滤器删除undefined条目。

const data = arr.flat(Infinity).filter(Boolean)

Answer 3

另一个使用filter()和concat()等数组基本函数的例子:

var arr = [
[
{label: "Beklam", id: 5032},
{label: "Dx6", id: 5052},
undefined,
undefined
],
[
{label: "item1", id: 50567},
{label: "item4", id: 505567},
{label: "item6", id: 50537},
{label: "itemA", id: 505647},
undefined,
undefined,
]
];
arr = arr[0].concat(arr[1]);
var arr2 = arr.filter(e => e != undefined && e);
console.log(arr2)