Kuidas kasutada Ja­vaSc­ripti meetodit .map()

Ja­vaSc­ripti meetod .map() võimaldab teil läbida kõik massiivi elemendid ja täita toi­min­guid. Tulemuste sal­ves­ta­miseks luuakse uus massiiv, jättes algse massiivi muutmata.

Mis on Ja­vaSc­ript .map()?

Ja­vaSc­ripti meetod .map() loob uue massiivi, ra­ken­da­des ta­ga­si­kõ­ne­funkt­siooni algse massiivi igale ele­men­dile. Meetod teisendab algse massiivi iga väärtuse, sal­ves­ta­des tulemuse eraldi massiivi. JS .map() on mit­te­muu­tuv, mis tähendab, et algne massiiv jääb muu­tu­ma­tuks.

Meetodit .map() ka­su­ta­takse sageli massiivi kõikide ele­men­tide tei­sen­da­miseks. Näiteks saab sellega elemente ruutuda, teksti vor­min­dada, objekte filt­ree­rida ja teha mit­me­su­gu­seid muudatusi. See muudab .map() prak­ti­li­seks andmete mit­te­tü­his­ta­vate muu­da­tuste te­ge­miseks, mille tu­le­mu­seks on puhas ja ühtne kood.

Milline on Ja­vaSc­ript .map() süntaks?

JS .map() süntaks koosneb massiivi ta­ga­si­kõ­ne­funkt­sioo­nist:

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

• originalArr: massiiv, millele .map() ra­ken­da­takse
• element: Praegu töödeldav element
• index (optional): Praeguse elemendi indeks massiivis
• array (optional): Algne massiiv

Vaatame ühte näidet.

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­men­dina .map() si­ses­ta­tud ta­ga­si­kõ­ne­funkt­sioon võtab iga elemendi algsest mas­sii­vist number ja ruutub selle. Seejärel saame uue massiivi, mis sisaldab iga algse massiivi elemendi ruutu.

Ja­vaSc­ripti .map() näiteid

Ja­vaSc­ripti .map() abil saab teha mit­me­su­gu­seid ope­rat­sioone massiivi ele­men­ti­dega. Siin on mõned selle kõige levinumad ka­su­tus­ju­hud.

Andmete filt­ree­ri­mine

Kui ühendate .map() ja .filter(), saate massiivi, mis sisaldab ainult väärtusi, mis vastavad teie valitud tin­gi­mu­sele.

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

Selles näites sisaldab massiiv numbers väärtusi 1–5. Seejärel rakendame meetodit .filter(). Filt­ree­ri­mis­tin­gi­mus ütleb, et number modulo 2 peab olema null, mis kehtib ainult paa­ris­ar­vude puhul. Selle tu­le­mu­sena saame uue massiivi, mis sisaldab ainult 2-ga jaguvaid elemente, mille tu­le­mu­seks on massiiv [2,4]. Seejärel kasutame meetodit .map(), et ka­he­kor­dis­tada iga massiivi element. Selle tu­le­mu­sena muutub [2,4] [4,8].

Ni­me­kir­jade ren­der­da­mine Ja­vaSc­ripti raa­ma­tu­ko­gu­des

React on üks po­pu­laar­se­maid Ja­vaSc­ripti raa­mis­tikke ja raa­ma­tu­ko­gusid ning .map()kasulik ni­me­kir­jade ren­der­da­miseks selles. Pange tähele, et React kasutab JSX-süntaksit.

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

Eespool im­por­ti­sime mudelid React ja ReactDOM ning lõime massiivi nimega colors, mis sisaldab erinevaid vär­vini­me­sid. Reacti funkt­sio­naalne komponent ColorList kasutab .map(), et luua iga värvi jaoks <li> element. Atribuut key võimaldab Reactiga tõhusalt uuendusi teha. Viimases etapis ren­der­da­takse ColorsListDOMis koos ReactDOM.render ja väljund lisatakse DOM-ele­men­dile ID-ga root.

Massiivi vormingu elemendid

Ja­vaSc­ripti meetod .map() on lihtne viis stringide ja muude ele­men­tide vor­min­da­miseks.

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

Selles näites kom­bi­nee­rime .map() meetodiga toLowerCase(), et muuta iga nimi väi­ke­tä­heks. Tu­le­mu­seks on uus massiiv nimega formattedNames, mis sisaldab väi­ke­tähti. Algne massiiv names jääb muu­tu­ma­tuks.