Med JavaScript-metoden .map() kan du iterera genom varje element i en array och utföra åtgärder. En ny array skapas för att lagra resultaten, vilket lämnar den ursprungliga arrayen intakt.

Vad är JavaScript .map()?

JavaScripts metod .map() skapar en ny array genom att tillämpa en återanropningsfunktion på varje element i den ursprungliga arrayen. Metoden omvandlar varje värde från den ursprungliga arrayen och lagrar resultatet i en separat array. JS .map() är icke-mutativ, vilket innebär att den ursprungliga arrayen förblir oförändrad.

Metoden .map() används ofta för att omvandla alla element i en matris. Den kan till exempel kvadrera element, formatera text, filtrera objekt och göra en rad andra modifieringar. Det gör .map() praktiskt för att göra icke-destruktiva ändringar av data, vilket resulterar i ren, sammanhängande kod.

Vad är syntaxen för JavaScript .map()?

Syntaxen för JS .map() består av en återkopplingsfunktion på en array:

const newArr = originalArr.map(function(element, index, array) {
    // Code
});
javascript
  • originalArr: Matrisen som .map() kommer att tillämpas på
  • element: Det aktuella elementet som bearbetas
  • index (optional): Index för det aktuella elementet i arrayen
  • array (optional): Den ursprungliga arrayen

Låt oss titta på ett exempel.

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

Återkopplingsfunktionen som anges som argument till .map() tar varje element från den ursprungliga matrisen number och kvadrerar det. Vi får då en ny matris med kvadraterna för varje element från den ursprungliga matrisen.

Exempel på JavaScripts .map()

JavaScripts .map() kan användas för att utföra olika operationer på elementen i en array. Här är några av de vanligaste användningsfallen.

Filtrering av data

Om du kombinerar .map() med .filter() får du en matris som endast innehåller värden som är sanna för det villkor du valt.

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

I det här exemplet innehåller arrayen numbers värdena 1-5. Vi tillämpar sedan metoden .filter(). Filtreringsvillkoret säger att talet modulo 2 måste vara noll, vilket endast gäller jämna tal. Detta resulterar i en ny array som endast innehåller element som är delbara med 2, vilket ger oss arrayen [2,4]. Därefter använder vi metoden .map() för att dubbla varje element i arrayen. Som resultat blir [2,4] [4,8].

Rendering av listor i JavaScript-bibliotek

React är ett av de mest populära JavaScript-ramverken och biblioteken, och .map()användbart för att rendera listor i det. Observera att React använder JSX-syntax.

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

Ovan importerade vi modellerna React och ReactDOM och skapade en array med namnet colors med olika färgnamn. Den funktionella React-komponenten ColorList använder .map() för att skapa ett <li> för varje färg. Attributet key möjliggör effektiva uppdateringar med React. I det sista steget renderas ColorsListi DOM med ReactDOM.render och utdata läggs till i DOM-elementet med ID root.

Formateringselement i en matris

JavaScripts metod .map() är ett enkelt sätt att formatera element som strängar.

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

I det här exemplet kombinerar vi .map() med metoden toLowerCase() för att konvertera varje namn till gemener. Resultatet är en ny array som heter formattedNames, som innehåller namnen i gemener. Den ursprungliga arrayen names förblir oförändrad.

Gå till huvudmeny