Ja­vaSc­rip­tin .map()-me­ne­tel­män käyttö

Ja­vaSc­ript-me­ne­tel­mäl­lä .map() voit käydä läpi jokaisen elementin tau­lu­kos­sa ja suorittaa toi­min­to­ja. Tulosten tal­len­ta­mi­sek­si luodaan uusi taulukko, jolloin al­ku­pe­räi­nen taulukko säilyy ennallaan.

Mikä on Ja­vaSc­ript .map()?

Ja­vaSc­rip­tin .map() luo uuden taulukon so­vel­ta­mal­la kut­su­funk­tio­ta al­ku­pe­räi­sen taulukon jokaiseen ele­ment­tiin. Metodi muuntaa al­ku­pe­räi­sen taulukon jokaisen arvon ja tallentaa tuloksen eril­li­seen tau­luk­koon. JS .map() ei muuta al­ku­pe­räis­tä taulukkoa, eli se pysyy muut­tu­mat­to­ma­na.

.map() käytetään usein taulukon kaikkien ele­ment­tien muun­ta­mi­seen. Sen avulla voidaan esi­mer­kik­si neliöidä ele­ment­te­jä, muotoilla tekstiä, suodattaa objekteja ja tehdä monia muita muutoksia. Tämä tekee .map() käy­tän­nöl­li­sen työkalun tietojen muut­ta­mi­seen tu­hoa­mat­ta niitä, mikä johtaa siistiin ja joh­don­mu­kai­seen koodiin.

Mikä on Ja­vaSc­ript .map():n syntaksi?

JS .map():n syntaksi koostuu taulukon callback-funk­tios­ta:

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

• originalArr: Taulukko, johon .map() so­vel­le­taan
• element: Kä­si­tel­tä­vä nykyinen elementti
• index (optional): Nykyisen elementin indeksi tau­lu­kos­sa
• array (optional): Al­ku­pe­räi­nen taulukko

Kat­so­taan­pa esi­merk­kiä.

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]

Ar­gu­ment­ti­na .map() aan syötetty callback-funktio ottaa jokaisen elementin al­ku­pe­räi­ses­tä tau­lu­kos­ta number ja neliöi sen. Sitten saamme uuden taulukon, jossa on al­ku­pe­räi­sen taulukon jokaisen elementin neliöt.

Esi­merk­ke­jä Ja­vaSc­rip­tin .map():stä

Ja­vaSc­rip­tin .map() voidaan käyttää suo­rit­ta­maan erilaisia ope­raa­tioi­ta taulukon ele­men­teil­le. Tässä on joitakin sen ylei­sim­piä käyt­tö­ta­pauk­sia.

Tietojen suo­dat­ta­mi­nen

Jos yhdistät .map() ja .filter(), saat taulukon, joka sisältää vain arvot, jotka ovat totta va­lit­se­mal­le­si ehdolle.

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

Tässä esi­mer­kis­sä taulukko numbers sisältää arvot 1–5. Sitten so­vel­lam­me me­ne­tel­mää .filter(). Suo­da­tuseh­to sanoo, että luvun modulo 2 on oltava nolla, mikä pätee vain pa­ril­li­siin lukuihin. Tuloksena on uusi taulukko, joka sisältää vain luvut, jotka ovat jaollisia kahdella, jolloin saamme taulukon [2,4]. Seu­raa­vak­si käytämme me­ne­tel­mää .map() kak­sin­ker­tais­ta­maan jokaisen taulukon elementin. Tuloksena [2,4] muuttuu [4,8].

Luet­te­loi­den ren­de­roin­ti Ja­vaSc­ript-kir­jas­tois­sa

React on yksi suo­si­tuim­mis­ta Ja­vaSc­ript-ke­hyk­sis­tä ja -kir­jas­tois­ta, ja .map()hyö­dyl­li­nen luet­te­loi­den ren­de­roin­nis­sa siinä. Huomaa, että React käyttää JSX-syntaksia.

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

Yllä olemme tuoneet mallit React ja ReactDOM ja luoneet taulukon nimeltä colors, jossa on erilaisia värinimiä. React-funk­tio­naa­li­ses­sa kom­po­nen­tis­sa ColorList käytetään .map() luomaan <li> jo­kai­sel­le värille. key mah­dol­lis­taa tehokkaat päi­vi­tyk­set Reactin avulla. Vii­mei­ses­sä vaiheessa ColorsListren­de­röi­dään DOM:ssa ReactDOM.render ä ja tulos lisätään DOM-ele­ment­tiin, jonka ID on root.

Taulukon muo­toi­lue­le­men­tit

Ja­vaSc­rip­tin .map() -metodi on yk­sin­ker­tai­nen tapa muotoilla ele­ment­te­jä, kuten merk­ki­jo­no­ja.

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

Tässä esi­mer­kis­sä yh­dis­täm­me .map() ja toLowerCase() muun­taak­sem­me jokaisen nimen pieniksi kir­jai­mik­si. Tuloksena on uusi taulukko nimeltä formattedNames, joka sisältää pienet kirjaimet. Al­ku­pe­räi­nen taulukko names pysyy muut­tu­mat­to­ma­na.