# Kā lietot JavaScript metodi .map()

JavaScript metode `.map()` ļauj iziet cauri katram masīva elementam un izpildīt darbības. Rezultātu saglabāšanai tiek izveidots jauns masīvs, atstājot sākotnējo masīvu nemainīgu.

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

JavaScript `.map()` metode izveido jaunu masīvu, piemērojot **atgriezenisko funkciju** katram sākotnējā masīva elementam. Metode pārveido katru sākotnējā masīva vērtību, rezultātu saglabājot atsevišķā masīvā. JS `.map()` nav mutējoša, kas nozīmē, ka sākotnējais masīvs paliek nemainīgs.

`.map()` metode bieži tiek izmantota, lai **pārveidotu visus masīva elementus**. Piemēram, tā var kvadrātveidot elementus, formatēt tekstu, filtrēt objektus un veikt dažādus citus labojumus. Tas padara `.map()` praktisku, lai veiktu nedestruktīvus datu labojumus, rezultātā iegūstot tīru, saskaņotu kodu.

## Kāda ir JavaScript `.map()` sintakse?

JS `.map()` sintakse sastāv no masīva atgriezeniskās funkcijas:

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

- **`originalArr`**: masīvs, uz kuru tiks attiecināts `.map()`
- **`element`**: Pašreizējais apstrādājamais elements
- **`index (optional)`**: Pašreizējā elementa indekss masīvā
- **`array (optional)`**: Sākotnējais masīvs

Paskatīsimies uz piemēru.

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

Atgriešanās funkcija, kas ievadīta kā arguments `.map()`, ņem katru elementu no sākotnējā masīva `number` un to kvadrātveido. Tad mēs iegūstam jaunu masīvu ar katra elementa kvadrātu no sākotnējā masīva.

## JavaScript `.map()` piemēri

JavaScript `.map()` var izmantot, lai veiktu dažādas darbības ar masīva elementiem. Šeit ir daži no visbiežāk sastopamajiem lietošanas gadījumiem.

### Datu filtrēšana

Ja apvienojat `.map()` ar `.filter()`, iegūsit masīvu, kas satur tikai tās vērtības, kas atbilst jūsu izvēlētajam nosacījumam.

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

Šajā piemērā masīvs `numbers` satur vērtības no 1 līdz 5. Tad mēs piemērojam metodi `.filter()`. Filtrēšanas nosacījums nosaka, ka skaitļa modulo 2 jābūt nullei, kas attiecas tikai uz pāra skaitļiem. Rezultātā tiek izveidots jauns masīvs, kas satur tikai elementus, kuri dalās ar 2, tādējādi iegūstot masīvu `[2,4]`. Pēc tam izmantojam metodi `.map()`, lai dubultotu katru masīva elementu. Rezultātā `[2,4]` kļūst par `[4,8]`.

### Sarakstu renderēšana JavaScript bibliotēkās

React ir viens no populārākajiem JavaScript rāmjiem un bibliotēkām, un `.map()`noderīgs, lai tajā attēlotu sarakstus. Ņemiet vērā, ka React izmanto **JSX sintaksi**.

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

Iepriekš mēs importējām modeļus `React` un `ReactDOM` un izveidojām masīvu ar nosaukumu `colors` ar dažādiem krāsu nosaukumiem. **React funkcionālā komponente** `ColorList` izmanto `.map()`, lai izveidotu `<li>` elementu katrai krāsai. `key` atribūts nodrošina efektīvas atjaunināšanas ar React. Pēdējā solī `ColorsList`tiek renderēta DOM ar `ReactDOM.render`, un izvade tiek pievienota DOM elementam ar ID `root`.

### Masīva elementu formatēšana

JavaScript `.map()` metode ir vienkāršs veids, kā formatēt elementus, piemēram, virknes.

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

Šajā piemērā mēs apvienojam `.map()` ar metodi `toLowerCase()`, lai pārvērstu katru vārdu mazajiem burtiem. Rezultāts ir jauns masīvs ar nosaukumu `formattedNames`, kas satur vārdus mazajiem burtiem. Sākotnējais masīvs `names` paliek nemainīgs.


This is a markdown version of: [https://www.ionos.com/lv-lv/digitalguide/timekla-vietnes/timekla-izstrade/javascript-karte/](https://www.ionos.com/lv-lv/digitalguide/timekla-vietnes/timekla-izstrade/javascript-karte/) for AI/LLM consumption.