Metoda JavaScriptu .map() umožňuje procházet jednotlivé prvky pole a provádět akce. Pro uložení výsledků se vytvoří nové pole, přičemž původní pole zůstane nezměněno.

Co je JavaScript .map()?

Metoda JavaScriptu .map() vytvoří nové pole pomocí aplikace zpětné funkce na každý prvek původního pole. Metoda transformuje každou hodnotu z původního pole a výsledek uloží do samostatného pole. JS .map() je nemutující, což znamená, že původní pole zůstává nezměněno.

Metoda .map() se často používá k transformaci všech prvků v poli. Může například umocňovat prvky, formátovat text, filtrovat objekty a provádět řadu dalších úprav. Díky tomu je .map() praktická pro provádění nedestruktivních změn dat, což vede k čistému a soudržnému kódu.

Jaká je syntaxe pro JavaScript .map()?

Syntaxe pro JS .map() se skládá z callback funkce na poli:

const newArr = originalArr.map(function(element, index, array) {
    // Code
});
javascript
  • originalArr: Pole, na které bude .map() aplikováno
  • element: Aktuální prvek, který je zpracováván
  • index (optional): Index aktuálního prvku v poli
  • array (optional): Původní pole

Podívejme se na příklad.

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
    return number * number;
});
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]
javascript

Funkce callback, která je zadána jako argument pro .map(), vezme každý prvek z původního pole number a vypočítá jeho druhou mocninu. Poté získáme nové pole s druhou mocninou každého prvku z původního pole.

Příklady JavaScriptu .map()

JavaScript .map() lze použít k provádění různých operací s prvky pole. Zde jsou některé z nejčastějších případů použití.

Filtrování dat

Pokud zkombinujete .map() s .filter(), získáte pole, které obsahuje pouze hodnoty, které jsou pravdivé pro vámi zvolenou podmínku.

const numbers = [1, 2, 3, 4, 5];
const evenNumbersTimesTwo = numbers.filter(num => num % 2 === 0) .map(num => num * 2);
// Output: [4, 8]
javascript

V tomto příkladu obsahuje pole numbers hodnoty 1–5. Poté použijeme metodu .filter(). Podmínka filtrování říká, že číslo modulo 2 musí být nulové, což platí pouze pro sudá čísla. Výsledkem je nové pole, které obsahuje pouze prvky dělitelné 2, což nám dává pole [2,4]. Dále použijeme metodu .map() k zdvojnásobení každého prvku v poli. Výsledkem je, [2,4] se stane [4,8].

Renderování seznamů v knihovnách JavaScriptu

React je jedním z nejpopulárnějších JavaScriptových frameworků a knihoven a .map()užitečný pro vykreslování seznamů v něm. Upozorňujeme, že React používá syntaxi JSX.

import React from "react";
import ReactDOM from "react-dom";
const colors = ["red", "green", "blue", "yellow", "orange"];
const ColorsList = () => (
    <div>
        <ul>{colors.map(color => <li key={color}> {color} </li>)}</ul>
    </div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<ColorsList />, rootElement);
javascript

Výše jsme importovali modely React a ReactDOM a vytvořili pole s názvem colors s různými názvy barev. Funkční komponenta React ColorList používá .map() k vytvoření prvku <li> pro každou barvu. Atribut key umožňuje efektivní aktualizace pomocí React. V posledním kroku je ColorsListvykreslena v DOM pomocí ReactDOM.render a výstup je přidán do prvku DOM s ID root.

Formátování prvků pole

Metoda .map() jazyka JavaScript je jednoduchý způsob formátování prvků, jako jsou řetězce.

const names = ["Alice", "Bob", "Charlie"];
const formattedNames = names.map(name => name.toLowerCase());
// Output: ["alice", "bob", "charlie"]
javascript

V tomto příkladu kombinujeme .map() s metodou toLowerCase(), abychom převedli každé jméno na malá písmena. Výsledkem je nové pole s názvem formattedNames, které obsahuje jména v malých písmenách. Původní pole names zůstává beze změny.

Přejít do hlavního menu