Tömbök átalakítása ebben a kurzusban:

A(z) Tömbök átalakítása fogalomról

A JavaScriptben az Array osztálynak számos hatékony beépített metódusa van a tömbök átalakítására. Ezekkel a metódusokkal sokkal könnyebb egy tömböt egy másikká alakítani, mint amilyen egy egyszerű for ciklussal vagy közvetlenebb manipulációval lenne.

Néhány metódus tiszta, ami azt jelenti, hogy nem módosítja az eredeti tömböt. Helyette egy újat ad vissza. Más metódusok viszont módosítják azt a tömböt, amelyen meghívják őket, és nem adják vissza a módosított tömböt.

Az alábbiakban a tömbök átalakítására leggyakrabban használt metódusok közül mutatunk be néhányat. Az elérhető metódusok teljes listája az MDN dokumentációban található.

map (tiszta)

Új tömböt hozz létre úgy, hogy minden elemet egy argumentumként átadott függvény szerint alakítasz át. Ezeket a callback-függvényeket gyakran nyílfüggvényként írják.

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 így kapott tömb mindig ugyanolyan hosszú lesz, mint az eredeti.

filter (tiszta)

Létrehoz egy tömböt 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)

Egyetlen értékké redukálja a tömböt egy olyan függvénnyel, 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 beolvasztani az akkumulátorba, és visszaadja azt az akkumulátort, amelyet a következő iterációban használunk.

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, amelyen meghívják.

slice (tiszta)

Egy kezdő- és egy záróindex megadásával résztömböt hoz létre abból a tömbből, amelyen meghívják.

A záróindexen lévő elem nem kerül bele. Ráadásul minden paraméter opcionális: a kezdőindex alapé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

Eltávolítja vagy lecseréli, illetve hozzáad új elemeket egy tömbhöz. A következő paramétereket várja:

• annak az elemnek az indexe, ahol a tömb módosítását elkezded
• a törölni kívánt elemek száma
• a tömbbe beszúrandó elemek (opcionális)

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: Összehasonlítás). A rendezés helyben történik, ami azt jelenti, hogy az eredeti tömb módosul. A sort vissza is adja ezt a módosított tömböt, ami kényelmes, ha további metódusokat szeretnél láncolni hozzá.

const arr = ['c', 'a', 'z', 'b'];
const result = arr.sort();
console.log(result);
// => ['a', 'b', 'c', 'z']
console.log(arr);
// => ['a', 'b', 'c', 'z']

const arr = [3, 1, 2, 10];
arr.sort();
// => [1, 10, 2, 3]
// Because the string '10' comes before '2' in dictionary order.

A rendezési viselkedés testreszabásához argumentumként átadhatsz egy összehasonlító függvényt. Ezt az összehasonlító függvényt két argumentummal hívják meg, amelyek a tömb két eleme. Ezután a következőket kell visszaadnia:

• negatív számot, ha az első argumentumot a második elé kell rendezni
• pozitív számot, ha az első argumentumot a második mögé kell rendezni
• 0-t, ha az elemek sorrendjének változatlannak kell maradnia

Ezzel a számok rendezésének problémája megoldható a megfelelő összehasonlító függvény átadásával.

const arr = [3, 1, 2, 10];
arr.sort((a, b) => a - b);
// => [1, 2, 3, 10]
// "a - b" is negative when b is greater than a, positive when
// a is greater than b and 0 when they are equal.

Íme egy példa arra, hogyan lehet egy egyéni összehasonlító függvénnyel objektumokból álló tömbö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 } ]

2019 óta a nyelv specifikációja előírja, hogy a rendezésnek stabilnak kell lennie, de a teljesítményre (idő- és térbeli komplexitásra) nincs garancia.