Kā lietot Ja­vaScript metodi .map()

Ja­vaScript metode .map() ļauj iziet cauri katram masīva elementam un izpildīt darbības. Rezultātu sa­gla­bā­ša­nai tiek izveidots jauns masīvs, atstājot sākotnējo masīvu nemainīgu.

Kas ir Ja­vaScript .map()?

Ja­vaScript .map() metode izveido jaunu masīvu, pie­mē­ro­jot at­grie­ze­nis­ko funkciju katram sākotnējā masīva elementam. Metode pārveido katru sākotnējā masīva vērtību, rezultātu sa­gla­bā­jot atsevišķā masīvā. JS .map() nav mutējoša, kas nozīmē, ka sā­kot­nē­jais masīvs paliek nemainīgs.

.map() metode bieži tiek izmantota, lai pār­vei­do­tu visus masīva elementus. Piemēram, tā var kvad­rāt­vei­dot elementus, formatēt tekstu, filtrēt objektus un veikt dažādus citus labojumus. Tas padara .map() praktisku, lai veiktu ne­des­truk­tī­vus datu labojumus, rezultātā iegūstot tīru, saskaņotu kodu.

Kāda ir Ja­vaScript .map() sintakse?

JS .map() sintakse sastāv no masīva at­grie­ze­nis­kās funkcijas:

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

• originalArr: masīvs, uz kuru tiks at­tie­ci­nāts .map()
• element: Pa­šrei­zē­jais ap­strā­dā­ja­mais elements
• index (optional): Pa­šrei­zē­jā elementa indekss masīvā
• array (optional): Sā­kot­nē­jais masīvs

Pa­ska­tī­si­mies uz piemēru.

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]

At­grie­ša­nās funkcija, kas ievadīta kā arguments .map(), ņem katru elementu no sākotnējā masīva number un to kvad­rāt­vei­do. Tad mēs iegūstam jaunu masīvu ar katra elementa kvadrātu no sākotnējā masīva.

Ja­vaScript .map() piemēri

Ja­vaScript .map() var izmantot, lai veiktu dažādas darbības ar masīva ele­men­tiem. Šeit ir daži no visbiežāk sa­sto­pa­ma­jiem lie­to­ša­nas ga­dī­ju­miem.

Datu fil­trē­ša­na

Ja ap­vie­no­jat .map() ar .filter(), iegūsit masīvu, kas satur tikai tās vērtības, kas atbilst jūsu iz­vē­lē­ta­jam no­sa­cī­ju­mam.

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

Šajā piemērā masīvs numbers satur vērtības no 1 līdz 5. Tad mēs pie­mē­ro­jam metodi .filter(). Fil­trē­ša­nas no­sa­cī­jums nosaka, ka skaitļa modulo 2 jābūt nullei, kas attiecas tikai uz pāra skaitļiem. Rezultātā tiek izveidots jauns masīvs, kas satur tikai elementus, kuri dalās ar 2, tādējādi iegūstot masīvu [2,4]. Pēc tam iz­man­to­jam metodi .map(), lai dubultotu katru masīva elementu. Rezultātā [2,4] kļūst par [4,8].

Sarakstu ren­de­rē­ša­na Ja­vaScript bib­lio­tē­kās

React ir viens no po­pu­lā­rā­ka­jiem Ja­vaScript rāmjiem un bib­lio­tē­kām, un .map()noderīgs, lai tajā attēlotu sarakstus. Ņemiet vērā, ka React izmanto JSX sintaksi.

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

Iepriekš mēs im­por­tē­jām modeļus React un ReactDOM un iz­vei­do­jām masīvu ar nosaukumu colors ar dažādiem krāsu no­sau­ku­miem. React fun­kcio­nā­lā kom­po­nen­te ColorList izmanto .map(), lai izveidotu <li> elementu katrai krāsai. key atribūts nodrošina efektīvas at­jau­ni­nā­ša­nas ar React. Pēdējā solī ColorsListtiek renderēta DOM ar ReactDOM.render, un izvade tiek pie­vie­no­ta DOM elementam ar ID root.

Masīva elementu for­ma­tē­ša­na

Ja­vaScript .map() metode ir vienkāršs veids, kā formatēt elementus, piemēram, virknes.

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

Šajā piemērā mēs ap­vie­no­jam .map() ar metodi toLowerCase(), lai pārvērstu katru vārdu mazajiem burtiem. Rezultāts ir jauns masīvs ar nosaukumu formattedNames, kas satur vārdus mazajiem burtiem. Sā­kot­nē­jais masīvs names paliek nemainīgs.