Функционально неизменный способ в 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);

Но, пожалуйста, предложите, как Я могу сделать это функциональным способом программирования без мутаций.

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

Answer 2

Я думаю Array.prototype.reduce() может решить вашу проблему. Из документации:

Метод redu () выполняет функцию редуктора (которую вы предоставляете) для каждого элемента массива, в результате чего получается одно выходное значение.

Пожалуйста, найдите возможное решение ниже:

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

const result = data.reduce((a, e) => {
  a.push(e.name);

  if (e.hasSidekick) {
     a.push(`${e.name}'s sidekick`);
  }

  return a;
}, []);

console.log(result);

Надеюсь, это поможет!