Kaip naudoti Ja­vaSc­ript metodą .map()

Ja­vaSc­ript metodas .map() leidžia jums kartoti kiekvieną masyvo elementą ir vykdyti veiksmus. Sukuriama nauja masyvo struktūra re­zul­ta­tams saugoti, paliekant originalų masyvą nepakitęs.

Kas yra Ja­vaSc­ript .map()?

Ja­vaSc­ript .map() metodas sukuria naują masyvą, tai­ky­da­mas atgalinio skambučio funkciją kiek­vie­nam pradinio masyvo elementui. Šis metodas trans­for­muo­ja kiekvieną pradinio masyvo vertę ir re­zul­ta­tus saugo atskirame masyve. JS .map() yra ne­mu­tuo­jan­tis, tai reiškia, kad pradinis masyvas lieka nepakitęs.

.map() metodas dažnai nau­do­ja­mas visų masyvo elementų trans­for­ma­vi­mui. Pa­vyz­džiui, jis gali pakelti elementus kvadratu, for­ma­tuo­ti tekstą, filtruoti objektus ir atlikti įvairius kitus pa­kei­ti­mus. Tai leidžia .map() prak­tiš­kai atlikti ne­destruk­ty­vius duomenų pa­kei­ti­mus, todėl gaunamas švarus, nuoseklus kodas.

Kokia yra Ja­vaSc­ript .map() sintaksė?

JS .map() sintaksė susideda iš masyvo atgalinio skambučio funkcijos:

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

• originalArr: masyvas, kuriam bus taikomas .map()
• element: Da­bar­ti­nis ap­do­ro­ja­mas elementas
• index (optional): Da­bar­ti­nio elemento indeksas masyve
• array (optional): Ori­gi­na­lus masyvas

Pa­žvel­ki­me į pavyzdį.

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]

Atsakymo funkcija, įvesta kaip ar­gu­men­tas į .map(), paima kiekvieną elementą iš pradinio masyvo number ir pakelia jį kvadratu. Tada gauname naują masyvą su kiekvieno elemento iš pradinio masyvo kvad­ra­tais.

Ja­vaSc­ript .map() pa­vyz­džiai

Ja­vaSc­ript .map() gali būti nau­do­ja­mas įvairioms ope­ra­ci­joms su masyvo ele­men­tais atlikti. Čia pa­tei­kia­mi keli daž­niau­siai pa­si­tai­kan­tys naudojimo atvejai.

Duomenų fil­t­ra­vi­mas

Jei sudėsite .map() ir .filter(), gausite masyvą, kuriame bus tik tos reikšmės, kurios atitinka jūsų pa­si­rink­tą sąlygą.

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

Šiame pavyzdyje masyvas numbers turi reikšmes nuo 1 iki 5. Tada taikome metodą .filter(). Fil­t­ra­vi­mo sąlyga nurodo, kad skaičiaus modulis 2 turi būti lygus nuliui, o tai tinka tik lyginiams skaičiams. Tai sukuria naują masyvą, kuriame yra tik elementai, dalijami iš 2, ir gauname masyvą [2,4]. Toliau naudojame metodą .map(), kad pa­dvi­gu­bin­tu­me kiekvieną masyvo elementą. Dėl to [2,4] tampa [4,8].

Sąrašų at­vaiz­da­vi­mas Ja­vaSc­ript bi­b­lio­te­ko­se

React yra vienas iš po­pu­lia­riau­sių Ja­vaSc­ript sistemų ir bi­b­lio­te­kų, o .map()naudingas sąrašų at­vaiz­da­vi­mui jame. At­kreip­ki­te dėmesį, kad React naudoja JSX sintaksę.

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

Aukščiau im­por­ta­vo­me modelius React ir ReactDOM ir sukūrėme masyvą pa­va­di­ni­mu colors su įvairiais spalvų pa­va­di­ni­mais. Funkcinis kom­po­nen­tas React ColorList naudoja .map(), kad sukurtų <li> elementą kiek­vie­nai spalvai. Atributas key leidžia efek­ty­viai at­nau­jin­ti su React. Pas­ku­ti­nia­me žingsnyje ColorsListyra at­vaiz­duo­ja­mas DOM su ReactDOM.render, o re­zul­ta­tas pri­de­da­mas prie DOM elemento su ID root.

Masyvo for­ma­ta­vi­mo elementai

Ja­vaSc­ript .map() metodas yra paprastas būdas for­ma­tuo­ti elementus, pvz., eilutes.

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

Šiame pavyzdyje mes su­jun­gia­me .map() su toLowerCase() metodu, kad kiekvieną vardą pa­vers­tu­me ma­žo­sio­mis raidėmis. Re­zul­ta­tas yra naujas masyvas, pa­va­din­tas formattedNames, kuriame yra ma­žo­sio­mis raidėmis parašyti vardai. Pirminis masyvas names lieka nepakitęs.