Javascript 嵌套数组的数组重构

Question

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

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"}
]

如果该值不存在，我还需要删除 'undefined'。请建议。

Answer 1

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

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'

Answer 2

好了

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

Answer 3

您应该在使用前检查索引处的特定元素是否存在。此处进行相关修改：

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
    };
});

Answer 4

如果其中的项目数量不确定，请使用 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
 };

Answer 5

这是一个非常简单的方法，对外部列表使用 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))

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

Javascript 嵌套数组的数组重构

Javascript array restructuring for nested array

javascript

arrays

array-map

ecmascript-6

array-reduce