Metóda JavaScript .map() vám umožňuje prechádzať každý prvok v poli a vykonávať akcie. Na uloženie výsledkov sa vytvorí nové pole, pričom pôvodné pole zostane nedotknuté.

Čo je JavaScript .map()?

Metóda JavaScriptu .map() vytvorí nové pole pomocou funkcie spätného volania na každý prvok pôvodného poľa. Metóda transformuje každú hodnotu z pôvodného poľa a výsledok uloží do samostatného poľa. JS .map() je nemutujúci, čo znamená, že pôvodné pole zostáva nezmenené.

Metóda .map() sa často používa na transformáciu všetkých prvkov v poli. Môže napríklad umiestňovať prvky do štvorca, formátovať text, filtrovať objekty a vykonávať rôzne ďalšie úpravy. Vďaka tomu je .map() praktická na vykonávanie nedestruktívnych zmien údajov, čo vedie k čistému a koherentnému kódu.

Aká je syntax JavaScriptu .map()?

Syntax pre JS .map() pozostáva z funkcie spätného volania na poli:

const newArr = originalArr.map(function(element, index, array) {
    // Code
});
javascript
  • originalArr: Pole, na ktoré sa .map() bude aplikovať
  • element: Aktuálny spracovávaný prvok
  • index (optional): Index aktuálneho prvku v poli
  • array (optional): Pôvodné pole

Pozrime sa na prí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

Funkcia callback, ktorá je zadaná ako argument pre .map(), vezme každý prvok z pôvodného poľa number a vynásobí ho druhou mocninou. Potom dostaneme nové pole so štvorcami každého prvku z pôvodného poľa.

Príklady JavaScriptu .map()

JavaScript .map() sa dá použiť na vykonávanie rôznych operácií s prvkami poľa. Tu je niekoľko najčastejších prípadov použitia.

Filtrovanie údajov

Ak skombinujete .map() s .filter(), dostanete pole, ktoré obsahuje iba hodnoty, ktoré sú pravdivé pre zvolenú podmienku.

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 príklade pole numbers obsahuje hodnoty 1-5. Potom použijeme metódu .filter(). Filtrovacia podmienka hovorí, že číslo modulo 2 musí byť nulové, čo platí len pre párne čísla. Výsledkom je nové pole, ktoré obsahuje len prvky deliteľné 2, čím dostaneme pole [2,4]. Ďalej použijeme metódu .map() na zdvojnásobenie každého prvku v poli. Výsledkom je, že [2,4] sa stane [4,8].

Vykresľovanie zoznamov v knižniciach JavaScriptu

React je jeden z najpopulárnejších JavaScriptových frameworkov a knižníc a .map()užitočný na vykresľovanie zoznamov v ňom. Upozorňujeme, že React používa syntax 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

Vyššie sme importovali modely React a ReactDOM a vytvorili pole s názvom colors s rôznymi názvami farieb. Funkčná komponenta React ColorList používa .map() na vytvorenie prvku <li> pre každú farbu. Atribút key umožňuje efektívne aktualizácie s React. V poslednom kroku sa ColorsListvykreslí v DOM s ReactDOM.render a výstup sa pridá do prvku DOM s ID root.

Formátovanie prvkov poľa

Metóda .map() jazyka JavaScript je jednoduchý spôsob formátovania prvkov, ako sú reťazce.

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

V tomto príklade kombinujeme .map() s metódou toLowerCase(), aby sme premenili každé meno na malé písmená. Výsledkom je nové pole s názvom formattedNames, ktoré obsahuje mená v malých písmenách. Pôvodné pole names zostáva nezmenené.

Prejsť na hlavné menu