Filtrujte a mapujte hodnoty pole pomocí flatMap one-liner

Nepoužil jsem Array.flatMap() přesto, ale po přečtení vysvětlujícího příspěvku Dmitriho Pavlutina jsem byl z této metody velmi nadšený, protože dokáže zkrátit kód.

Podívejme se na rychlý příklad čísel:pokud chcete filtrovat a mapovat hodnoty pole, pravděpodobně byste k tomu přistoupili následovně.

// Filter out negative numbers
// Double the positive numbers
[-3, -1, 1, 3, 5]
  .filter((num) => num >= 0)
  .map((num) => num * 2);

// -> [2, 6, 10]

Na řetězení filter není nic zvlášť špatného a map volání, ale co kdybych vám řekl, že to můžete udělat jedinou iterací?

// Filter out negative numbers
// Double the positive numbers
[-3, -1, 1, 3, 5].flatMap((num) => {
  if (num >= 0) {
    return [num * 2];
  }
  
  return [];
});

// -> [2, 6, 10]

Podobné jako map() , flatMap() iteruje přes každý prvek poskytující funkci zpětného volání.

flatMap metoda je totožná s map následuje volání na flat hloubky 1.

Rozdíl:zmíněný flat call umožňuje přidávání a odebírání prvků v jedné iteraci pole. To není možné pomocí "normálního map smyčka".

Zpětné volání vrátí prázdné pole, pokud je číslo záporné, což vede k odstranění prvku. A jinak, pokud je prvek kladný, zpětné volání vrátí pole se zdvojnásobenou hodnotou. To je mapování na jinou hodnotu.

Pokud chcete přidat prvky, vraťte pole s více hodnotami.

A abyste ušetřili další znaky, mohli byste úryvek ještě zkrátit pomocí ternárního operátoru a filtrovat a mapovat pomocí sladkého jednořádkového.

[-3, -1, 1, 3, 5]
  .flatMap((num) => (num >= 0 ? [num * 2] : []));
  
// -> [2, 6, 10]

Velkou otázkou tohoto řádku je, zda je tento kód snadno čitelný. A filter /map kombinace mi jde lépe pro oči, ale je pravděpodobně jen otázkou času, než si zvyknu na tyhle krátké flatMap hovory.

Jaká je tedy podpora prohlížeče flatMap , můžete se zeptat? Je pěkně zelený a připravený k použití!

MDN Compat Data (zdroj)