JavaScript-metoden .map() lar deg gjenta hvert element i en matrise og utføre handlinger. En ny matrise opprettes for å lagre resultatene, slik at den opprinnelige matrisen forblir intakt.

Hva er JavaScript .map()?

JavaScripts .map() oppretter en ny matrise ved å bruke en tilbakekallingsfunksjon på hvert element i den opprinnelige matrisen. Metoden transformerer hver verdi fra den opprinnelige matrisen og lagrer resultatet i en egen matrise. JS .map() er ikke-mutativ, noe som betyr at den opprinnelige matrisen forblir uendret.

Metoden .map() brukes ofte til å transformere alle elementene i en matrise. Den kan for eksempel kvadratere elementer, formatere tekst, filtrere objekter og gjøre en rekke andre modifikasjoner. Det gjør .map() praktisk for å gjøre ikke-destruktive endringer i data, noe som resulterer i ren, sammenhengende kode.

Hva er syntaksen for JavaScript .map()?

Syntaksen for JS .map() består av en tilbakekallingsfunksjon på en matrise:

const newArr = originalArr.map(function(element, index, array) {
    // Code
});
javascript
  • originalArr: Matrisen som .map() skal brukes på
  • element: Det aktuelle elementet som behandles
  • index (optional): Indeksen til det aktuelle elementet i matrisen
  • array (optional): Den opprinnelige matrisen

La oss 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]
javascript

Tilbakekallingsfunksjonen som er angitt som et argument til .map(), tar hvert element fra den opprinnelige matrisen number og kvadrerer det. Deretter får vi en ny matrise med kvadratene til hvert element fra den opprinnelige matrisen.

Eksempler på JavaScripts .map()

JavaScripts .map() kan brukes til å utføre ulike operasjoner på elementene i en matrise. Her er noen av de vanligste bruksområdene.

Filtrering av data

Hvis du kombinerer .map() med .filter(), får du en matrise som bare inneholder verdier som er sanne for den valgte betingelsen.

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

I dette eksemplet inneholder matrisen numbers verdiene 1-5. Deretter bruker vi metoden .filter(). Filtreringsbetingelsen sier at tallet modulo 2 må være null, noe som bare gjelder for partall. Dette resulterer i en ny matrise, som bare inneholder elementer som er delbare med 2, noe som gir oss matrisen [2,4]. Deretter bruker vi metoden .map() for å doble hvert element i matrisen. Som et resultat blir [2,4] til [4,8].

Gjengivelse av lister i JavaScript-biblioteker

React er et av de mest populære JavaScript-rammeverkene og -bibliotekene, og .map()nyttig for å gjengi lister i det. Merk at React bruker 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);
javascript

Ovenfor importerte vi modellene React og ReactDOM og opprettet en matrise med colors med forskjellige fargenavn. Den funksjonelle React-komponenten ColorList bruker .map() til å opprette et <li> for hver farge. Attributtet key muliggjør effektive oppdateringer med React. I det siste trinnet blir ColorsListgjengitt i DOM med ReactDOM.render, og utdataene legges til DOM-elementet med ID root.

Formatering av elementer i en matrise

JavaScripts .map() er en enkel måte å formatere elementer som strenger på.

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

I dette eksemplet kombinerer vi .map() med metoden toLowerCase() for å konvertere hvert navn til små bokstaver. Resultatet er en ny matrise kalt formattedNames, som inneholder navnene med små bokstaver. Den opprinnelige matrisen names forblir uendret.

Go to Main Menu