# Kaip naudoti JavaScript metodą .map()

JavaScript metodas `.map()` leidžia jums kartoti kiekvieną masyvo elementą ir vykdyti veiksmus. Sukuriama nauja masyvo struktūra rezultatams saugoti, paliekant originalų masyvą nepakitęs.

## Kas yra JavaScript `.map()`?

JavaScript `.map()` metodas sukuria naują masyvą, taikydamas **atgalinio skambučio funkciją** kiekvienam pradinio masyvo elementui. Šis metodas transformuoja kiekvieną pradinio masyvo vertę ir rezultatus saugo atskirame masyve. JS `.map()` yra nemutuojantis, tai reiškia, kad pradinis masyvas lieka nepakitęs.

`.map()` metodas dažnai naudojamas **visų masyvo elementų transformavimui**. Pavyzdžiui, jis gali pakelti elementus kvadratu, formatuoti tekstą, filtruoti objektus ir atlikti įvairius kitus pakeitimus. Tai leidžia `.map()` praktiškai atlikti nedestruktyvius duomenų pakeitimus, todėl gaunamas švarus, nuoseklus kodas.

## Kokia yra JavaScript `.map()` sintaksė?

JS `.map()` sintaksė susideda iš masyvo atgalinio skambučio funkcijos:

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

- **`originalArr`**: masyvas, kuriam bus taikomas `.map()`
- **`element`**: Dabartinis apdorojamas elementas
- **`index (optional)`**: Dabartinio elemento indeksas masyve
- **`array (optional)`**: Originalus masyvas

Pažvelkime į pavyzdį.

```javascript
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]
```

Atsakymo funkcija, įvesta kaip argumentas į `.map()`, paima kiekvieną elementą iš pradinio masyvo `number` ir pakelia jį kvadratu. Tada gauname naują masyvą su kiekvieno elemento iš pradinio masyvo kvadratais.

## JavaScript `.map()` pavyzdžiai

JavaScript `.map()` gali būti naudojamas įvairioms operacijoms su masyvo elementais atlikti. Čia pateikiami keli dažniausiai pasitaikantys naudojimo atvejai.

### Duomenų filtravimas

Jei sudėsite `.map()` ir `.filter()`, gausite masyvą, kuriame bus tik tos reikšmės, kurios atitinka jūsų pasirinktą sąlygą.

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

Šiame pavyzdyje masyvas `numbers` turi reikšmes nuo 1 iki 5. Tada taikome metodą `.filter()`. Filtravimo sąlyga nurodo, kad skaičiaus modulis 2 turi būti lygus nuliui, o tai tinka tik lyginiams skaičiams. Tai sukuria naują masyvą, kuriame yra tik elementai, dalijami iš 2, ir gauname masyvą `[2,4]`. Toliau naudojame metodą `.map()`, kad padvigubintume kiekvieną masyvo elementą. Dėl to `[2,4]` tampa `[4,8]`.

### Sąrašų atvaizdavimas JavaScript bibliotekose

React yra vienas iš populiariausių JavaScript sistemų ir bibliotekų, o `.map()`naudingas sąrašų atvaizdavimui jame. Atkreipkite dėmesį, kad React naudoja **JSX sintaksę**.

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

Aukščiau importavome modelius `React` ir `ReactDOM` ir sukūrėme masyvą pavadinimu `colors` su įvairiais spalvų pavadinimais. **Funkcinis komponentas React** `ColorList` naudoja `.map()`, kad sukurtų `<li>` elementą kiekvienai spalvai. Atributas `key` leidžia efektyviai atnaujinti su React. Paskutiniame žingsnyje `ColorsList`yra atvaizduojamas DOM su `ReactDOM.render`, o rezultatas pridedamas prie DOM elemento su ID `root`.

### Masyvo formatavimo elementai

JavaScript `.map()` metodas yra paprastas būdas formatuoti elementus, pvz., eilutes.

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

Šiame pavyzdyje mes sujungiame `.map()` su `toLowerCase()` metodu, kad kiekvieną vardą paverstume mažosiomis raidėmis. Rezultatas yra naujas masyvas, pavadintas `formattedNames`, kuriame yra mažosiomis raidėmis parašyti vardai. Pirminis masyvas `names` lieka nepakitęs.


This is a markdown version of: [https://www.ionos.com/lt-lt/digitalguide/interneto-svetaines/interneto-svetainiu-kurimas/javascript-zemelapis/](https://www.ionos.com/lt-lt/digitalguide/interneto-svetaines/interneto-svetainiu-kurimas/javascript-zemelapis/) for AI/LLM consumption.