A JavaScript .map() metódus lehetővé teszi, hogy végigfutjon egy tömb minden elemén, és műveleteket hajtson végre. Az eredmények tárolására új tömb jön létre, az eredeti tömb pedig érintetlen marad.

Mi az a JavaScript .map()?

A JavaScript .map() metódusa új tömböt hoz létre úgy, hogy visszahívási függvényt alkalmaz az eredeti tömb minden elemére. A metódus átalakítja az eredeti tömb minden értékét, és az eredményt egy külön tömbben tárolja. A JS .map() nem módosító, vagyis az eredeti tömb változatlan marad.

A .map() módszert gyakran használják a tömb összes elemének átalakítására. Például négyzetre emelheti az elemeket, formázhatja a szöveget, szűrheti az objektumokat és számos egyéb módosítást végezhet. Ez praktikusvá teszi .map() az adatok nem destruktív módosításához, ami tiszta, koherens kódot eredményez.

Mi a JavaScript .map() szintaxisa?

A JS .map() szintaxisa egy tömbön végrehajtott visszahívási függvényből áll:

const newArr = originalArr.map(function(element, index, array) {
    // Code
});
javascript
  • originalArr: A tömb, amelyre .map() alkalmazásra kerül
  • element: A jelenleg feldolgozott elem
  • index (optional): A tömbben az aktuális elem indexe
  • array (optional): Az eredeti tömb

Nézzünk egy példát.

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

A .map() argumentumként megadott visszahívási függvény az eredeti tömb number minden elemét kiveszi, és négyzetre emeli. Ezután egy új tömböt kapunk, amely az eredeti tömb minden elemének négyzetét tartalmazza.

Példák a JavaScript .map()

A JavaScript .map() felhasználható különböző műveletek végrehajtására egy tömb elemein. Íme néhány leggyakoribb felhasználási eset.

Adatok szűrése

Ha .map() és .filter() kombinálja, akkor egy olyan tömböt kap, amely csak a választott feltételnek megfelelő értékeket tartalmazza.

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

Ebben a példában a numbers tömb az 1-5 értékeket tartalmazza. Ezután alkalmazzuk a .filter() módszert. A szűrési feltétel szerint a szám modulo 2-nek nullának kell lennie, ami csak a páros számokra igaz. Ez egy új tömböt eredményez, amely csak a 2-vel osztható elemeket tartalmazza, így kapjuk a [2,4] tömböt. Ezután a .map() metódust használjuk, hogy megduplázzuk a tömb minden elemét. Ennek eredményeként [2,4] [4,8] lesz.

Listák megjelenítése JavaScript könyvtárakban

A React az egyik legnépszerűbb JavaScript keretrendszer és könyvtár, .map()pedig hasznos a listák megjelenítéséhez benne. Ne feledje, hogy a React JSX szintaxist használ.

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

Fent importáltuk a React és ReactDOM modelleket, és létrehoztunk egy colors nevű tömböt különböző színnevekkel. A React funkcionális komponens ColorList .map() segítségével minden színhez létrehoz egy <li> elemet. A key attribútum hatékony frissítéseket tesz lehetővé a React segítségével. Az utolsó lépésben a ColorsList ReactDOM.render segítségével renderelésre kerül a DOM-ban, és a kimenet hozzáadódik a root azonosítóval rendelkező DOM elemhez.

Tömb elemeinek formázása

A JavaScript .map() metódusa egy egyszerű módszer olyan elemek formázására, mint például a karakterláncok.

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

Ebben a példában .map() és a toLowerCase() metódust kombináljuk, hogy minden nevet kisbetűvé alakítsunk. Az eredmény egy új tömb, formattedNames, amely a kisbetűs neveket tartalmazza. Az eredeti tömb, names, változatlan marad.

Ugrás a főmenübe