Sådan bruges Ja­va­Scripts .map()-metode

Ja­va­Script-metoden .map() giver dig mulighed for at gennemgå hvert element i en matrix og udføre hand­lin­ger. Der oprettes en ny matrix til at gemme re­sul­ta­ter­ne, så den op­rin­de­li­ge matrix forbliver intakt.

Hvad er Ja­va­Script .map()?

Ja­va­Scripts .map() opretter en ny matrix ved at anvende en callback-funktion på hvert element i den op­rin­de­li­ge matrix. Metoden trans­for­me­rer hver værdi fra den op­rin­de­li­ge matrix og gemmer re­sul­ta­tet i en separat matrix. JS .map() er ikke-muterende, hvilket betyder, at den op­rin­de­li­ge matrix forbliver uændret.

Metoden .map() bruges ofte til at trans­for­me­re alle ele­men­ter­ne i en matrix. Den kan for eksempel kvadrere elementer, formatere tekst, filtrere objekter og foretage en række andre ændringer. Det gør .map() praktisk til at foretage ikke-de­struk­ti­ve ændringer af data, hvilket re­sul­te­rer i ren, sam­men­hæn­gen­de kode.

Hvad er syntaksen for Ja­va­Script .map()?

Syntaksen for JS .map() består af en callback-funktion på en array:

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

• originalArr: Den matrix, som .map() skal anvendes på
• element: Det aktuelle element, der behandles
• index (optional): Indekset for det aktuelle element i arrayet
• array (optional): Den op­rin­de­li­ge matrix

Lad os se på et eksempel.

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]

Callback-funk­tio­nen, der indtastes som argument til .map(), tager hvert element fra den op­rin­de­li­ge matrix number og kvadrerer det. Vi får derefter en ny matrix med kva­dra­ter­ne af hvert element fra den op­rin­de­li­ge matrix.

Eksempler på Ja­va­Scripts .map()

Ja­va­Scripts .map() kan bruges til at udføre for­skel­li­ge ope­ra­tio­ner på ele­men­ter­ne i en matrix. Her er nogle af de mest al­min­de­li­ge an­ven­del­ses­mu­lig­he­der.

Fil­tre­ring af data

Hvis du kom­bi­ne­rer .map() med .filter(), får du en matrix, der kun in­de­hol­der værdier, der er sande for den valgte be­tin­gel­se.

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

I dette eksempel in­de­hol­der arrayet numbers værdierne 1-5. Derefter anvender vi metoden .filter(). Fil­tre­rings­be­tin­gel­sen siger, at tallet modulo 2 skal være nul, hvilket kun er tilfældet for lige tal. Dette re­sul­te­rer i en ny matrix, der kun in­de­hol­der elementer, der kan deles med 2, hvilket giver os matrixen [2,4]. Dernæst bruger vi metoden .map() til at fordoble hvert element i matrixen. Som resultat bliver [2,4] til [4,8].

Gen­gi­vel­se af lister i Ja­va­Script-bi­bli­o­te­ker

React er et af de mest populære Ja­va­Script-fra­mewor­ks og -bi­bli­o­te­ker, og .map()nyttigt til at gengive lister i det. Bemærk, at React bruger JSX-syntaks.

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

Ovenfor im­por­te­re­de vi mo­del­ler­ne React og ReactDOM og oprettede en matrix ved navn colors med for­skel­li­ge far­ve­nav­ne. Den funk­tio­nel­le React-komponent ColorList bruger .map() til at oprette et <li> for hver farve. At­tri­but­ten key muliggør effektive op­da­te­rin­ger med React. I det sidste trin gengives ColorsListi DOM med ReactDOM.render, og outputtet føjes til DOM-elementet med ID root.

For­ma­te­ring af elementer i en matrix

Ja­va­Scripts .map() er en enkel måde at formatere elementer som strenge på.

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

I dette eksempel kom­bi­ne­rer vi .map() med metoden toLowerCase() for at kon­ver­te­re hvert navn til små bogstaver. Re­sul­ta­tet er en ny matrix kaldet formattedNames, som in­de­hol­der navnene med små bogstaver. Den op­rin­de­li­ge matrix names forbliver uændret.