javascript - javascript中的功能不可变方式根据项目的条件在某些位置复制带有附加项目的数组

Question

我有一个数组：

[
    { "name": "batman", "hasSidekick": true },
    { "name": "shazam!", "hasSidekick": false },
    { "name": "capt america", "hasSidekick": true },
    { "name": "spiderman", "hasSidekick": false }
]

由此，我想创建一个新的英雄名称数组，其中包含上述所有名称，但是当hasSidekick英雄为真时，应该在其后插入一个额外的名称。

预期输出：

[
    "batman",
    "batman's sidekick",
    "shazam!", ,
    "capt america",
    "capt america's sidekick",
    "spiderman"
]

我可以forEach根据以下条件有条件地推送其他项目hasSidekick：

const heroes = [
  { name: "batman", hasSidekick: true },
  { name: "shazam!", hasSidekick: false },
  { name: "capt america", hasSidekick: true },
  { name: "spiderman", hasSidekick: false },
];
let heroesAndSidekicks = [];
heroes.forEach(hero => {
  heroesAndSidekicks.push(hero.name);
  if (hero.hasSidekick) {
    heroesAndSidekicks.push(`${hero.name}'s sidekick`);
  }
});
console.log(heroesAndSidekicks);

但请建议我如何以函数式编程方式做到这一点而不会发生突变。

标签： javascriptarraysfunctional-programmingimmutability

Answer 1

你可以拿Array#flatMap。

var data = [{ name: "batman", hasSidekick: true }, { name: "shazam!", hasSidekick: false }, { name: "capt america", hasSidekick: true }, { name: "spiderman", hasSidekick: false }],
    result = data.flatMap(({ name, hasSidekick }) => hasSidekick
        ? [name, name + '\'s sidekick']
        : name
    );

console.log(result);