javascript - 如何从数组中输出多个结果

Question

我有这个对象数组，最初只有名称和单位字段。我最近添加了一个数组类型的 unitConv 字段。

我曾经输出一个字符串数组，其中包含每个对象的名称和单位。

const ingredients = [
  {name: 'wine', unit: 'ml', unitConv: []},
  {name: 'salt', unit: 'gr', unitConv: [{unitMeasure: { name: 'spoon'}}, {unitMeasure: { name: 'tea-spoon'}}]},
  {name: 'onion', unit: 'piece', unitConv: []},
]

const response = ingredients.map(ing => `${ing.name} [${ing.unit}]`)

这是响应:

["wine [ml]", "salt [gr]", "onion [piece]"]

现在我添加了 unitConv，我想查看对象中是否有可用的 unitConv，并将它们作为选项传递，如下所示:

["wine [ml]", "salt [gr]", "onion [piece]", "salt[spoon]", "salt[tea-spoon]"]

我也想保留盐的初始值，即使用'gr'作为单位的值。因此，对于盐，因为我有一个 unit 和两个 unitConv，所以我想使用每个选项将其输出三次。 如果其中一个对象没有unitConv，则unitConv字段将显示为空数组，如上面的示例所示。

Answer 1

您可以使用Array#flatMap创建第二个数组与第一个数组连接。

const ingredients = [
  {name: 'wine', unit: 'ml', unitConv: []},
  {name: 'salt', unit: 'gr', unitConv: [{unitMeasure: { name: 'spoon'}}, {unitMeasure: { name: 'tea-spoon'}}]},
  {name: 'onion', unit: 'piece', unitConv: []},
]

const response = ingredients.map(ing => `${ing.name} [${ing.unit}]`)
     .concat(ingredients.flatMap(({name, unitConv})=>
         unitConv.map(x => `${name} [${x.unitMeasure.name}]`)));
console.log(response);