嵌套数组的Javascript数组重组答案

【问题标题】：Javascript array restructuring for nested array嵌套数组的Javascript数组重组
【发布时间】：2019-08-02 04:39:27
【问题描述】：

我有一个如下所述的对象数组。

const inputArray =[
  {
    name: "Energy",
    quantity: [
      {
        qval: "100 ",
        unit: "unit1"
      },
      {
        qval: "200 ",
        unit: "unit2"
      }
    ],
  },
  {
    name: "Fat",
    quantity: [
      {
        qval: "300",
        unit: "unit3"
      }
    ],
  },
]

我正在尝试使用以下代码重构此数组，我得到了如下所述的内容

const outputArray = inputArray.map(function(item,i) {
  return {
    name: item.name,
    amount: (item.quantity[0] && 
    item.quantity[0].qval+item.quantity[0].unit)+'|'+ (item.quantity[1] && item.quantity[1].qval+item.quantity[1].unit),
 };

});

这是我得到的输出

[
  {name: "Energy", amount: "100 unit1|200 unit2"}
  {name: "Fat", amount: "300unit3|undefined"}
]

由于我是新手，我认为这不是一个好方法，请建议任何更简单的整洁代码。我期待着

[
  {name: "Energy", amount: "100 unit1|200 unit2"}
  {name: "Fat", amount: "300unit3"}
]

如果该值不存在，我还需要删除“未定义”。请建议。

【问题讨论】：

标签： javascript arrays ecmascript-6 array-map array-reduce

【解决方案1】：

你来了

inputArray.map(item => ({
    name: item.name,
    amount: item.quantity.reduce((accumulator, currentValue) => (accumulator+currentValue.qval+currentValue.unit+"|"),"").slice(0, -1)
}))

【讨论】：

谢谢@linkinmedo。我可以使用您的答案而无需太多修改。

【解决方案2】：

这是一个非常简单的方法，使用map 作为外部列表，另一个用于每个数量：

const combine = arr => arr.map(({name, quantity}) => ({
  name, 
  amount: quantity.map(({qval, unit}) => `${qval}${unit}`).join('|')
}))

const inputArray = [{name: "Energy", quantity: [{qval: "100 ", unit: "unit1"}, {qval: "200 ", unit: "unit2"}]}, {name: "Fat", quantity: [{qval: "300", unit: "unit3"}]}]

console.log(combine(inputArray))

与您的方法相比，这种方法的最大优势在于它适用于每件商品的任意数量的数量。第一个或第二个没有特殊情况代码。

【讨论】：

【解决方案3】：

您可以在 map 函数中添加三元条件来说明可能未声明的变量。例如：

const inputArray =[
  {
    name: "Energy",
    quantity: [
      {
        qval: "100 ",
        unit: "unit1"
      },
      {
        qval: "200 ",
        unit: "unit2"
      }
    ],
  },
  {
    name: "Fat",
    quantity: [
      {
        qval: "300",
        unit: "unit3"
      }
    ],
  },
]


const outputArray = inputArray.map(function(item,i) {
  return {
    name: item.name,
    amount: `${item.quantity[0] ? 
    item.quantity[0].qval+item.quantity[0].unit : ''}${item.quantity[1] ? `|${item.quantity[1].qval+item.quantity[1].unit}` : ''}`,
 };
})

console.log(outputArray);

如果每个对象的属性也不能得到保证 - 您也需要为属性本身添加检查。例如：

(item[0] && item[0].prop1 && item[0].prop2) ? 'stuff' : 'otherstuff'

【讨论】：

【解决方案4】：

在使用它之前，您应该检查索引处特定元素的存在。这里是相关的变化：

const outputArray = inputArray.map(function(item, i) {
    var qt = "";
    if (item.quantity[0]) {
        qt += (item.quantity[0].qval + item.quantity[0].unit);
    }
    if (item.quantity[1]) {
        qt += '|';
        qt += (item.quantity[1].qval + item.quantity[1].unit);
    }
    return {
        name: item.name,
        amount: qt
    };
});

【讨论】：

【解决方案5】：

如果里面有不确定数量的项目，使用for循环遍历item.quantity的长度：

const outputArray = inputArray.map(function(item, i) {
  let amountStr = "";
  for (i = 0; i < item.quantity.length; i++) {
    amountStr += item.quantity[i].qval + item.quantity[i].unit;
    // add delimiter when the current item is not the last one in the array
    if (i < quantity.length - 1) amountStr += "|";
  }
  return {
    name: item.name,
    amount: amountStr
 };

【讨论】：