Kako upo­ra­blja­ti metodo .map() v Ja­va­Scrip­tu

Metoda Ja­va­Script .map() omogoča po­na­vlja­nje vsakega elementa v nizu in izvajanje akcij. Ustvari se nov niz za shra­nje­va­nje re­zul­ta­tov, pri čemer ostane prvotni niz ne­spre­me­njen.

Kaj je Ja­va­Script .map()?

Metoda Ja­va­Script .map() ustvari nov niz z uporabo funkcije po­vra­tne­ga klica za vsak element izvirnega niza. Metoda pretvori vsako vrednost iz izvirnega niza in rezultat shrani v ločenem nizu. JS .map() je ne­mu­ti­ra­joč, kar pomeni, da izvirni niz ostane ne­spre­me­njen.

Metoda .map() se pogosto uporablja za pre­o­bli­ko­va­nje vseh elementov v nizu. Na primer, lahko kvadrira elemente, oblikuje besedilo, filtrira objekte in izvede vrsto drugih sprememb. To pomeni, da je .map() praktična za ne­de­struk­tiv­ne spremembe podatkov, kar ima za posledico čisto in ko­he­ren­tno kodo.

Kakšna je sintaksa za Ja­va­Script .map()?

Sintaksa za JS .map() je se­sta­vlje­na iz funkcije za povratni klic na nizu:

const newArr = originalArr.map(function(element, index, array) {
    // Code
});

• originalArr: Niz, na katerega se bo .map() uporabilo
• element: Trenutni element, ki se obdeluje
• index (optional): Indeks tre­nu­tne­ga elementa v nizu
• array (optional): Izvorni niz

Poglejmo primer.

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]

Funkcija callback, ki je vnesena kot argument v .map(), vzame vsak element iz izvirnega niza number in ga kvadrira. Tako dobimo nov niz s kvadrati vsakega elementa iz izvirnega niza.

Primeri Ja­va­Scrip­to­vih .map()

Ja­va­Script .map() se lahko uporablja za izvajanje različnih operacij na elementih niza. Tukaj je nekaj naj­po­go­stej­ših primerov uporabe.

Fil­tri­ra­nje podatkov

Če združite .map() in .filter(), dobite niz, ki vsebuje samo vrednosti, ki ustrezajo izbranemu pogoju.

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

V tem primeru niz numbers vsebuje vrednosti 1–5. Nato uporabimo metodo .filter(). Pogoj fil­tri­ra­nja pravi, da mora biti število modulo 2 enako nič, kar velja samo za sode števila. Rezultat je nov niz, ki vsebuje samo elemente, ki so deljivi z 2, kar nam da niz [2,4]. Nato uporabimo metodo .map(), da podvojimo vsak element v nizu. Rezultat je, da [2,4] postane [4,8].

Ren­de­ri­ra­nje seznamov v Ja­va­Scrip­to­vih knji­žni­cah

React je eden najbolj pri­lju­blje­nih Ja­va­Scrip­to­vih okvirov in knjižnic, .map()pa .map()uporaben za upo­da­blja­nje seznamov v njem. Upo­šte­vaj­te, da React uporablja sintakso 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);

Zgoraj smo uvozili modela React in ReactDOM ter ustvarili niz z imenom colors z raz­lič­ni­mi imeni barv. Funk­ci­o­nal­na kom­po­nen­ta React ColorList uporablja .map() za ustvar­ja­nje elementa <li> za vsako barvo. Atribut key omogoča učin­ko­vi­te po­so­do­bi­tve z React. V zadnjem koraku se ColorsListupodobi v DOM z ReactDOM.render, izhod pa se doda elementu DOM z ID root.

Obli­ko­va­nje elementov matrike

Metoda .map() v Ja­va­Scrip­tu je preprost način za obli­ko­va­nje elementov, kot so nizi.

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

V tem primeru združimo .map() z metodo toLowerCase(), da pre­tvo­ri­mo vsako ime v male črke. Rezultat je nov niz z imenom formattedNames, ki vsebuje imena v malih črkah. Izvirni niz names ostane ne­spre­me­njen.