Metody tablic

Tablice w JavaScript mają wiele pomocnych funkcji, ale dzisiaj skupimy się tylko na tych najważniejszych. Pozwoli to na lepsze zrozumienie kluczowych metod, które są niezbędne do efektywnego zarządzania danymi w codziennej pracy programisty.

forEach()

• Argumenty: funkcja callback (element, index, array)
• Zwraca: undefined
• Czy modyfikuje oryginalna tablicę: Nie

Przechodzi przez każdy element tablicy, wykonując na nim daną funkcję.

let letters = ['a', 'b', 'c'];

letters.forEach((letter, index, array) => {
  console.log(`Element: ${letter}, Indeks: ${index}, Cała tablica: ${array}`);
});

//możemy pominąć 2 ostatnie argumenty
letters.forEach(letter => console.log(letter));

map()

Tworzy nową tablicę z wyników wywołania funkcji na każdym elemencie tablicy. Nie modyfikuje tablicy po której iteruje.

• Argumenty: funkcja callback (element, index, array)
• Zwraca: Nową tablicę.
• Czy modyfikuje oryginalna tablicę: Nie

let squares = [1, 2, 3].map(element => element * element);
// squares: [1, 4, 9]

filter()

Tworzy nową tablicę ze wszystkimi elementami, które przechodzą test określony w funkcji filtrującej.

• Argumenty: funkcja callback (element, index, array)
• Zwraca: Nową tablicę.
• Czy modyfikuje oryginalna tablicę: Nie

let evenNumbers = [1, 2, 3, 4, 5].filter(element => element % 2 === 0);
// evenNumbers: [2, 4]

find()

• Argumenty: (element, index, array) => { /*...*/ }.
• Zwraca: Element lub undefined, jeśli nie znaleziono.
• Czy modyfikuje oryginalna tablicę: Nie

Zwraca wartość pierwszego elementu w tablicy, który spełnia warunek określony w funkcji.

let numbers = [1, 2, 3, 4];
let firstEven = numbers.find(n => n % 2 === 0);
// firstEven: 2

findIndex()

• Argumenty: (element, index, array) => { /*...*/ }.
• Zwraca: Indeks elementu lub -1, jeśli nie znaleziono.
• Czy modyfikuje oryginalna tablicę: Nie

Zwraca indeks pierwszego elementu w tablicy, który spełnia warunek określony w funkcji.

let numbers = [1, 2, 3, 4];
let index = numbers.findIndex(n => n % 2 === 0);
// index: 1

every()

• Argumenty: (element, index, array) => { /*...*/ }.
• Zwraca: true lub false.
• Czy modyfikuje oryginalna tablicę: Nie

Sprawdza, czy wszystkie elementy w tablicy spełniają warunek określony w funkcji.

let numbers = [2, 4, 6];
let allEven = numbers.every(n => n % 2 === 0);
// allEven: true

some()

• Argumenty: (element, index, array) => { /*...*/ }.
• Zwraca: true lub false.
• Czy modyfikuje oryginalna tablicę: Nie

Sprawdza, czy przynajmniej jeden element w tablicy spełnia warunek określony w funkcji.

let numbers = [1, 3, 5, 8, 10];
let hasEven = numbers.some((number, index, array) => {
  console.log(`Przetwarzany element: ${number}, na pozycji: ${index}, w tablicy: ${array}`);
  return number % 2 === 0;
});

reduce()

Przetwarza tablicę od lewej do prawej, „redukując” ją do jednej wartości, która jest wynikiem funkcji redukującej.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, currentValue, currentIndex, array) => {
  console.log(`Akumulator: ${accumulator}, Aktualna wartość: ${currentValue}, Indeks: ${currentIndex}, Tablica: ${array}`);
  return accumulator + currentValue;
}, 0);

Wynik powyższego kodu to:

Akumulator: 0, Aktualna wartość: 1, Indeks: 0, Tablica: 1,2,3,4,5
Akumulator: 1, Aktualna wartość: 2, Indeks: 1, Tablica: 1,2,3,4,5
Akumulator: 3, Aktualna wartość: 3, Indeks: 2, Tablica: 1,2,3,4,5
Akumulator: 6, Aktualna wartość: 4, Indeks: 3, Tablica: 1,2,3,4,5
Akumulator: 10, Aktualna wartość: 5, Indeks: 4, Tablica: 1,2,3,4,5

flat()

• Argumenty: Głębokość zagnieżdżenia (depth), domyślnie 1.
• Zwraca: nową tablicę
• Czy modyfikuje oryginalna tablicę: Nie

Spłaszcza zagnieżdżone tablice do określonego poziomu głębokości.

let nestedArray = [1, [2, [3, 4]]];
let flatArray = nestedArray.flat();
//wynik: [1, 2, [3, 4]]

let flatArray = nestedArray.flat(2);
//wynik: [1, 2, 3, 4]

concat()

• Argumenty: Tablice lub wartości do dołączenia.
• Zwraca: nową tablicę
• Czy modyfikuje oryginalna tablicę: Nie

Łączy dwie lub więcej tablic w jedną.

let first = [1, 2];
let second = [3, 4];
let combined = first.concat(second);
// combined: [1, 2, 3, 4]

push()

• Argumenty: Tablice lub wartości do dołączenia.
• Zwraca: Nową długość tablicy.
• Czy modyfikuje oryginalna tablicę: Tak

Dodaje jeden lub więcej elementów na koniec tablicy.

let numbers = [1, 2, 3];
let newLength = numbers.push(4);
// numbers: [1, 2, 3, 4], newLength: 4

pop()

• Argumenty: brak
• Zwraca: Usunięty element.
• Czy modyfikuje oryginalna tablicę: Tak

Usuwa ostatni element z tablicy i zwraca go.

let numbers = [1, 2, 3];
let last = numbers.pop();
// numbers: [1, 2], last: 3

shift()

• Argumenty: brak
• Zwraca: Usunięty element.
• Czy modyfikuje oryginalna tablicę: Tak

Usuwa pierwszy element z tablicy i zwraca go.

let numbers = [1, 2, 3];
let first = numbers.shift();
// numbers: [2, 3], first: 1

unshift()

• Argumenty: Elementy do dodania.
• Zwraca: Nową długość tablicy.
• Czy modyfikuje oryginalna tablicę: Tak

Dodaje jeden lub więcej elementów na początek tablicy.

let numbers = [2, 3];
let newLength = numbers.unshift(1);
// numbers: [1, 2, 3], newLength: 3

slice()

• Argumenty: Indeks początkowy (włącznie), indeks końcowy (wyłącznie)
• Zwraca: Nową tablicę.
• Czy modyfikuje oryginalna tablicę: Nie

Zwraca nową tablicę zawierającą wycinek oryginalnej tablicy.

let numbers = [1, 2, 3, 4, 5];
let part = numbers.slice(1, 3);
// part: [2, 3]

Argument drugi jest opcjonalny, domyślnie jest nim indeks ostatniego elementu.

splice()

• Argumenty: Indeks początkowy, liczba usuwanych elementów, elementy do dodania.
• Zwraca: Nową tablicę.
• Czy modyfikuje oryginalna tablicę: Tak

Usuwa lub dodaje elementy do tablicy, potencjalnie zastępując istniejące elementy.

let numbers = [1, 2, 3, 4];
let removed = numbers.splice(1, 2, 'a', 'b');
// numbers: [1, 'a', 'b', 4], removed: [2, 3]

let numbers = [1, 2, 3, 4];
let removed = numbers.splice(1, 0, 'a', 'b');
// numbers: [1, 'a', 'b', 2, 3, 4], removed: []

let numbers = [1, 2, 3, 4];
let removed = numbers.splice(1);
// numbers: [1], removed: [2, 3, 4]

indexOf()

• Argumenty: Element do znalezienia.
• Zwraca: Indeks lub -1.
• Czy modyfikuje oryginalna tablicę: Tak

Zwraca pierwszy indeks, na którym dany element może być znaleziony w tablicy, lub -1, jeśli nie występuje.

let items = ['apple', 'banana', 'orange'];
let index = items.indexOf('banana');
// index: 1

Metoda wyszukując elementy korzysta z porównania ścisłego ===

lastIndexOf()

Działa tak samo jak indexOf(), z tą różnicą że zaczyna szukać od końca tablicy

includes()

Metoda sprawdza czy tablica zawiera określony element.

• Argumenty: Element do sprawdzenia.
• Zwraca: true lub false.
• Czy modyfikuje oryginalna tablicę: Tak

let numbers = [1, 2, 3];
let hasTwo = numbers.includes(2);
// hasTwo: true

sort()

Sortuje elementy tablicy i zwraca tablicę.

• Argumenty: Funkcja porównująca
• Zwraca: Zmodyfikowaną tablicę.
• Czy modyfikuje oryginalna tablicę: Tak

let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
// numbers: [1, 2, 3, 4, 5]

Bez podawania funkcji porównującej, metoda sort sortuje w kolejności alfabetycznej.

Dla tablicy liczb, wynik domyślnego sortowania może być zaskakujący:

let numbers = [10, 1, 20, 2];
numbers.sort();
console.log(numbers);// [1, 10, 2, 20]

Funkcja porównująca

Funkcja porównująca pozwala zdefiniować, w jaki sposób elementy tablicy są porównywane i sortowane, co jest szczególnie użyteczne dla liczb i bardziej skomplikowanych danych. Funkcja ta przyjmuje dwa argumenty (nazywane zwykle a i b), które reprezentują elementy tablicy do porównania. Funkcja powinna zwrócić:

• Liczbę mniejszą od zera, jeśli a powinno być przed b,
• Zero, jeśli kolejność a i b jest równoważna,
• Liczbę większą od zera, jeśli b powinno być przed a.

let numbers = [10, 1, 20, 2];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 10, 20]

W tym przypadku a - b zwraca wartość mniejszą od zera, gdy a jest mniejsze od b, co powoduje, że a jest umieszczane przed b. Jest to poprawny sposób sortowania liczb.