如何使用JavaScript破坏对象的数组并将其附加到新的数组中

Question

我刚开始学习JavaScript，现在我在玩我无法理解的话题，我有一个简单的API调用，当我得到某种数据时，我的目标是转换现有的数组并组合成一个完整的数组。如下面的例子所示，这个问题的最佳解决方案是什么？提前谢谢。P.S数据是动态的，其中可能有两种以上的变化

//The existing array I want to change
let TestVariation = [{
NameValueList: [{
Name: "US Shoe Size (Women's)",
Value: [
"12"
]
},
{
Name: "Shoe Width",
Value: [
"G"
]
}
]
},
{
NameValueList: [{
Name: "US Shoe Size (Women's)",
Value: [
"9"
]
},
{
Name: "Shoe Width",
Value: [
"D"
]
}
]
},
]




//The result I want to get
let result = [{
Name: "US Shoe Size (Women's)",
Value: [
"12",
"9"
]
},
{
Name: "Shoe Width",
Value: [
"G",
"D"
]
}
]

Answer 1

您想要的是展平和压缩数组。这涉及到一系列的步骤。为了简单起见，我将使用普通javascript并将其分解为多个步骤，这样您就可以了解如何处理类似的问题。

首先，我们需要将数据压平，并使其成为所需的结构。为此，我将使用一个名为map的数组方法。

// let TestVariation = [{...}, {...}];
// overwrite TestVariation or use a new variable
function flatVariations (eachVariationObjectInArray) {
return eachVariationObjectInArray.NameValueList
}
TestVariation = TestVariation.map(flatVariations)
console.log(TestVariation) // [Array(2), Array(2)]
// flatten the array into one array
TestVariation = TestVariation.flat();
console.log(TestVariation) // [{…}, {…}, {…}, {…}]

其次，我们需要压缩数据。为此，我们可以创建一个独特标识符的集合，如"鞋宽"、"美国鞋码(女式("，然后我们可以使用它来组织和压缩给定的数据。。或者我们使用一种叫做减少的数组方法

// The above continuation
TestVariation.reduce((variations, testVariant) => {
// find the new testVariant if its already existed
const currentVariant = variations.find(variation => variation.Name === testVariant.Name);
// If: doesn't exist, then add to variations
if (!currentVariant) variations.push(testVariant);
// Else: Map through variations, find by name and compress variations
else {
variations = variations.map(variation => {
if (variation.Name === testVariant.Name) {
return { ...variation, Value: [...variation.Value, ...testVariant.Value] }
}
return variation
})
}
return variations;
}, [])

总之，

// let TestVariation = [{...}, {...}];
function flatVariations (eachVariationObjectInArray) {
return eachVariationObjectInArray.NameValueList
}
TestVariation = TestVariation.map(flatVariations)
TestVariation = TestVariation.flat();
TestVariation = TestVariation.reduce((variations, testVariant) => {
const currentVariant = variations.find(variation => variation.Name === testVariant.Name);
if (!currentVariant) variations.push(testVariant);
else {
variations = variations.map(variation => {
if (variation.Name === testVariant.Name) {
return { ...variation, Value: [...variation.Value, ...testVariant.Value] }
}
return variation
})
}
return variations;
}, []);

Answer 2

Javascript数组提供了map方法，可以帮助您将数组转换为另一个对象；换句话说，你可以得到第一个数组的每个元素，然后开始修改第二个数组(称为备忘录(，用你想要做的结构。