Metode de array
map, filter, reduce, find și chaining.
Actualizat
Ce este un array
Un array e o listă ordonată de valori. Fiecare valoare are o poziție numerotată de la 0 (indexul).
const fruits = ['măr', 'pară', 'prună']
fruits[0] // 'măr'
fruits.at(-1) // 'prună' — ultimul
fruits.length // 3Un array poate conține orice: numere, obiecte, alte array-uri. În practică, lucrezi aproape mereu cu liste de obiecte (produse, useri, comenzi).
Două familii de metode
Cea mai importantă distincție:
| Modifică array-ul (mutație) | Returnează array nou | |
|---|---|---|
| Metode | push, pop, shift, unshift, splice, sort, reverse, fill |
map, filter, slice, concat, toSorted, toReversed, with, [...arr] |
| În React state | ✗ — UI-ul nu se actualizează | ✓ |
Regula: în cod de UI, preferă metodele care returnează array nou.
Metodele de transformare — ce face fiecare
| Metodă | Primește | Returnează | Întrebarea la care răspunde |
|---|---|---|---|
map(fn) |
fiecare element | array nou, aceeași lungime | „transformă fiecare element în altceva” |
filter(fn) |
fiecare element | array nou, mai scurt sau egal | „păstrează doar elementele care...” |
reduce(fn, start) |
acumulator + element | o singură valoare (număr, obiect, array) | „combină tot într-un rezultat” |
find(fn) |
fiecare element | primul element găsit sau undefined |
„care e primul care...” |
findIndex(fn) |
fiecare element | indexul sau -1 |
„unde e...” |
some(fn) |
fiecare element | true dacă măcar unul trece |
„există vreunul care...” |
every(fn) |
fiecare element | true dacă toate trec |
„toate sunt...” |
includes(x) |
o valoare | true / false |
„conține valoarea...” |
forEach(fn) |
fiecare element | undefined |
doar efecte (log, trimitere) |
flatMap(fn) |
fiecare element | array nou, aplatizat un nivel | „fiecare element devine mai multe” |
const products = [
{ name: 'Laptop', price: 4000, inStock: true },
{ name: 'Mouse', price: 100, inStock: false },
{ name: 'Monitor', price: 1200, inStock: true },
]
products.map(p => p.name) // ['Laptop', 'Mouse', 'Monitor']
products.filter(p => p.inStock) // Laptop, Monitor
products.find(p => p.price < 500) // { name: 'Mouse', ... }
products.some(p => !p.inStock) // true
products.reduce((sum, p) => sum + p.price, 0) // 5300map vs forEach
map |
forEach |
|
|---|---|---|
| Returnează | array nou | nimic |
| Folosești pentru | a obține date transformate (inclusiv JSX în React) | a face ceva cu fiecare element |
arr.forEach(x => result.push(f(x))) e un map scris prost.
reduce — explicat pas cu pas
[10, 20, 30].reduce((acc, n) => acc + n, 0)
// pas 1: acc = 0, n = 10 → 10
// pas 2: acc = 10, n = 20 → 30
// pas 3: acc = 30, n = 30 → 60Folosește-l pentru sume, grupări, construirea unui obiect. Dacă devine greu de citit, un for...of e perfect acceptabil.
Chaining
Metodele care returnează array se pot înlănțui — citești transformarea de sus în jos:
const total = cart
.filter(item => item.inStock)
.map(item => item.price * item.qty)
.reduce((sum, x) => sum + x, 0)Sortare — capcanele
[10, 9, 100].sort() // [10, 100, 9] — sortează ca TEXT!
[10, 9, 100].toSorted((a, b) => a - b) // [9, 10, 100] ✓ nou, numeric
users.toSorted((a, b) => a.name.localeCompare(b.name, 'ro')) // alfabetic corect cu diacriticeSpread și destructuring
const [first, second, ...rest] = [1, 2, 3, 4] // first=1, second=2, rest=[3,4]
const merged = [...a, ...b] // combinare
const copy = [...arr] // copie (de suprafață)Pe scurt
- Array = listă ordonată, indexată de la 0.
maptransformă,filterselectează,reducecombină,findcaută,some/everyverifică.- În UI folosește metodele care returnează array nou;
sortcu comparator.