A JavaScriptben az Array osztálynak sok hatékony beépített metódusa van a tömbök átalakítására.
Ezekkel a metódusokkal sokkal könnyebb az egyik tömböt egy másikká alakítani, mint egy egyszerű for ciklussal vagy közvetlenebb módosítással.
Néhány metódus tiszta, ami azt jelenti, hogy nem módosítják az eredeti tömböt.
Helyette egy újat adnak vissza.
Más metódusok viszont módosítják azt a tömböt, amelyre meghívják őket, és nem adják vissza a módosított tömböt.
A tömbök átalakítására leggyakrabban használt metódusok közül néhányat az alábbiakban mutatunk be.
Az elérhető metódusok teljes listája az MDN dokumentációban található.
map (tiszta)
Hozz létre egy új tömböt úgy, hogy minden elemet egy argumentumként átadott függvény alapján alakítasz át.
Ezeket a visszahívó függvényeket gyakran nyílfüggvényként írjuk.
let arr = [1, 2, 3, 4];
const newArr = arr.map((value) => value - 1);
console.log(newArr);
// => [0, 1, 2, 3]
console.log(arr);
// => [1, 2, 3, 4]
Érdemes megjegyezni, hogy az eredményül kapott tömb mindig ugyanolyan hosszú lesz, mint az eredeti.
filter (tiszta)
Új tömböt hoz létre a jelenlegi szűrésével, egy szűrőfüggvény segítségével (amely igazat ad vissza, ha az elemet meg kell tartani, és hamisat, ha el kell távolítani).
let arr = [1, 2, 3, 4];
arr.filter((value) => value % 2 === 0);
// => [2, 4]
reduce (tiszta)
A tömböt egyetlen értékké redukálja egy olyan függvény segítségével, amely paraméterként egy akkumulátort és a tömb aktuális elemét kapja.
Ez a függvény megmondja, hogyan kell az aktuális elemet az akkumulátorba beolvasztani, és visszaadja azt az akkumulátort, amelyet a következő iterációban használunk majd.
let arr = [1, 2, 3, 4];
// Get the sum of elements
arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// => 10
// Classify the numbers by whether they are odd or not
arr.reduce(
(accumulator, currentValue) => {
if (currentValue % 2 === 0) {
accumulator.even.push(currentValue);
} else {
accumulator.odd.push(currentValue);
}
return accumulator;
},
{ even: [], odd: [] },
);
// => { even: [2, 4], odd: [1, 3] }
reverse
Megfordítja egy tömb elemeit.
const arr = [1, 2, 3, 4];
arr.reverse();
// => [4, 3, 2, 1]
Ez a metódus módosítja azt a tömböt, amelyre meghívják.
slice (tiszta)
Egy kezdő- és egy záróindex megadásával résztömböt hoz létre a paraméterként átadott tömbből.
A záróindexen lévő elem nem lesz benne.
Ráadásul minden paraméter elhagyható:
a kezdőindex alapértelmezett értéke 0, a záróindexé pedig a tömb hossza.
const arr = [1, 2, 3, 4];
arr.slice(1, 2); // [2]
arr.slice(1); // [2, 3, 4]
// You can also use negative numbers, that represent the indexes
// starting from the end of the array
arr.slice(-2); // [3, 4]
splice
Egy tömb elemeit távolítja el, cseréli le és/vagy ad hozzá újakat.
A következő paramétereket kapja:
- annak az elemnek az indexe, ahol a tömb módosítását elkezdi
- a törölni kívánt elemek száma
- a tömbben beszúrni kívánt elemek (elhagyható)
A splice visszaadja az eltávolított elemeket.
const arr = ['1', '2', '5', '6'];
// Insert an element at index 2
arr.splice(2, 0, '3');
console.log(arr);
// => ['1', '2', '3', '5', '6']
// Remove 2 elements, starting at index 3 and insert 2 elements
const removed = arr.splice(3, 2, '4', '5');
console.log(removed);
// => ['5', '6']
console.log(arr);
// => ['1', '2', '3', '4', '5']
// Remove 1 element at index 1
arr.splice(1, 1);
console.log(arr);
// => ['1', '3', '4', '5']
sort
Alapértelmezés szerint a sort úgy rendezi egy tömb elemeit, hogy először stringgé alakítja őket, majd string-összehasonlítást alkalmaz (lásd az Összehasonlítás fogalmat).
A rendezés helyben történik, ami azt jelenti, hogy az eredeti tömb módosul.
A sort visszaadja ezt a módosított tömböt is, ami kényelmes, ha más metódusokat szeretnél hozzá láncolni.
const arr = ['c', 'a', 'z', 'b'];
const result = arr.sort();
console.log(result);
// => ['a', 'b', 'c', 'z']
console.log(arr);
// => ['a', 'b', 'c', 'z']
A rendezés viselkedésének testreszabásához argumentumként átadhatsz egy összehasonlító függvényt.
Magát az összehasonlító függvényt két argumentummal hívjuk meg, amelyek a tömb két eleme.
Ezután a következőket kell visszaadnia:
- egy negatív számot, ha az első argumentumot a második elé kell rendezni
- egy pozitív számot, ha az első argumentumot a második után kell rendezni
-
0-t, ha az elemek sorrendjének változatlannak kell maradnia
Íme egy példa arra, hogyan lehet egyéni összehasonlító függvénnyel objektumok tömbjét rendezni.
const arr = [
{ name: 'Lydia', age: 7 },
{ name: 'Anne', age: 34 },
{ name: 'Holger', age: 59 },
];
arr.sort((item1, item2) => {
if (item1.name < item2.name) {
return -1;
}
if (item1.name > item2.name) {
return 1;
}
return 0;
});
// => [ { name: 'Anne', age: 34 }, { name: 'Holger', age: 59 },
// { name: 'Lydia', age: 7 } ]
Tanulófeladat
