Hur man använder Ja­va­Scripts .map()-metod

Med Ja­va­Script-metoden .map() kan du iterera genom varje element i en array och utföra åtgärder. En ny array skapas för att lagra re­sul­ta­ten, vilket lämnar den ur­sprung­li­ga arrayen intakt.

Vad är Ja­va­Script .map()?

Ja­va­Scripts metod .map() skapar en ny array genom att tillämpa en åter­an­rop­nings­funk­tion på varje element i den ur­sprung­li­ga arrayen. Metoden omvandlar varje värde från den ur­sprung­li­ga arrayen och lagrar re­sul­ta­tet i en separat array. JS .map() är icke-mutativ, vilket innebär att den ur­sprung­li­ga arrayen förblir oför­änd­rad.

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 mo­di­fi­e­ring­ar. Det gör .map() praktiskt för att göra icke-de­struk­ti­va ändringar av data, vilket re­sul­te­rar i ren, sam­man­häng­an­de kod.

Vad är syntaxen för Ja­va­Script .map()?

Syntaxen för JS .map() består av en åter­kopp­lings­funk­tion på en array:

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

• 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 ur­sprung­li­ga 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]

Åter­kopp­lings­funk­tio­nen som anges som argument till .map() tar varje element från den ur­sprung­li­ga matrisen number och kvadrerar det. Vi får då en ny matris med kvadra­ter­na för varje element från den ur­sprung­li­ga matrisen.

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

Ja­va­Scripts .map() kan användas för att utföra olika ope­ra­tio­ner på elementen i en array. Här är några av de van­li­gas­te an­vänd­nings­fal­len.

Fil­tre­ring av data

Om du kom­bi­ne­rar .map() med .filter() får du en matris som endast in­ne­hål­ler 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]

I det här exemplet in­ne­hål­ler arrayen numbers värdena 1-5. Vi tillämpar sedan metoden .filter(). Fil­tre­rings­vill­ko­ret säger att talet modulo 2 måste vara noll, vilket endast gäller jämna tal. Detta re­sul­te­rar i en ny array som endast in­ne­hål­ler 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 Ja­va­Script-bibliotek

React är ett av de mest populära Ja­va­Script-ramverken och bib­li­o­te­ken, och .map()an­vänd­bart 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);

Ovan im­por­te­ra­de vi mo­del­ler­na React och ReactDOM och skapade en array med namnet colors med olika färgnamn. Den funk­tio­nel­la React-kom­po­nen­ten ColorList använder .map() för att skapa ett <li> för varje färg. At­tri­bu­tet key möjliggör effektiva upp­da­te­ring­ar med React. I det sista steget renderas ColorsListi DOM med ReactDOM.render och utdata läggs till i DOM-elementet med ID root.

For­ma­te­ring­s­e­le­ment i en matris

Ja­va­Scripts 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"]

I det här exemplet kom­bi­ne­rar vi .map() med metoden toLowerCase() för att kon­ver­te­ra varje namn till gemener. Re­sul­ta­tet är en ny array som heter formattedNames, som in­ne­hål­ler namnen i gemener. Den ur­sprung­li­ga arrayen names förblir oför­änd­rad.