如何将 2 个数组组合成 1 个 React答案

【问题标题】：How to combine 2 arrays into 1 React如何将 2 个数组组合成 1 个 React
【发布时间】：2021-10-28 10:20:05
【问题描述】：

我对反应还很陌生。目前我正在尝试将 2 个数组项合并为一个，但我想遍历每个项。我该怎么做？

const arr1 = [ { value: "red", label: "Red" },{ value: "yellow", label: "Yellow" },{value: "Blue", label: "Blue" },]

const arr2 =[ { value: "s", label: "S" },{ value: "m", label: "M" },{ value: "l", label: "L" },]

预期结果： ["red,s","red,m","red,l"],["yellow,s","yellow,m","yellow,l"]....

我尝试过 concat() & reduce，但我得到的结果是两个数组合并在一起，而不是项目单独合并。有人可以帮忙吗？

【问题讨论】：

您可以遍历 arr1，然后从第二个数组中获取要添加到值的元素。
请注意，您的问题与 React 无关。是的，React 的一大优势是上手非常容易，但还是要先了解 JavaScript 的基本知识 :)

标签： javascript arrays reactjs

【解决方案1】：

您可以使用地图来操作数据。

const arr1 = [ { value: "red", label: "Red" },{ value: "yellow", label: "Yellow" },{value: "Blue", label: "Blue" },]

const arr2 =[ { value: "s", label: "S" },{ value: "m", label: "M" },{ value: "l", label: "L" },]

console.log(...arr1.map(data => {

return arr2.map(data2 => data.value + "," + data2.value)
}))

【讨论】：

@BenStephens 我的错误，完成更改

【解决方案2】：

这对我有用，使用嵌套循环：

const arr1 = [ { value: "red", label: "Red" },{ value: "yellow", label: "Yellow" },{value: "Blue", label: "Blue" },]
const arr2 =[ { value: "s", label: "S" },{ value: "m", label: "M" },{ value: "l", label: "L" },]

const newarr = []
for (i=0; i<arr1.length; i++) {
    tmp = []
    for (j=0; j<arr2.length; j++) {
        tmp.push([arr1[i].value, arr2[j].value])
    }
    newarr.push(tmp)
}

console.log(newarr)

// [
//   [ [ 'red', 's' ], [ 'red', 'm' ], [ 'red', 'l' ] ],
//   [ [ 'yellow', 's' ], [ 'yellow', 'm' ], [ 'yellow', 'l' ] ],
//   [ [ 'Blue', 's' ], [ 'Blue', 'm' ], [ 'Blue', 'l' ] ]
// ]

【讨论】：

【解决方案3】：

试一试（随意将键更改为 .value 或 .label）

function mergeArrays(arr1, arr2) {
    let result = [];
    
    for (let i = 0; i < arr1.length; i++) {
        result.push([]);
        for (let j = 0; j < arr2.length; j++) {
            result[i] = [ ...result[i], arr1[i].value + arr2[j].value ]
        }
    }
}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

相当直接的尝试是

[...arr1, ...arr2].forEach(console.log)

【讨论】：

【解决方案5】：

const newArray = [...arr1,...arrr2];
 newArray.map((element)=>{
   return console.log(element)
});

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。