JavaScript: 10 funkcji przydatnych do pracy z tablicami

Poniżej znajdziesz listę funkcji, które przydają się podczas pracy z tablicami:

1. Find

Funkcja ta służy znalezienia pierwszego wystąpienia elementu spełniającego warunek wyszukiwania, w danym zbiorze.

Przykład:

const data = [
 { id: 1, title: 'Article 1' },
 { id: 2, title: 'Article 2' },
 { id: 3, title: 'Article 3' }
];
	
const itemFound = data.find(item => item.id === 2);
console.log(itemFound); // { id: 2, title: 'Article 2' }

Jeśli element nie zostanie znaleziony to funkcja find zwróci: undefined.

Jako pierwszy parametr przyjmuje: funkcję, która będzie wywoływana przy każdej iteracji do momentu znalezienia elementu lub dojścia do końca tablicy. Przyjmuje ona trzy parametry:

item - To aktualnie przetwarzany parametr.

index - To indeks aktualnie przetwarzanego elementu tablicy.

array - To tablica, na której została wywołana funkcja find.

W zależności od potrzeb można wywołać find także w taki sposób:

data.find(item => item.id === 2);

data.find((item, index) => {
  console.log('index: ', index);
  return item.id === 2
});

data.find((item, index, array) => {
  console.log('array: ', array);
  return item.id === 2
});

2. Filter

Funkcja jest przydatna kiedy chcemy przefiltrować dane na podstawie określonego warunku. Zwraca ona nową tablicę ze wszystkimi elementami, które spełniły warunek.

Przykład:

const data = [1, 'Hello World', {}, 7, 10];

const isNumber = (item) => !isNaN(item);
const onlyNumbers = data.filter(isNumber);
console.log(onlyNumbers); // [1, 7, 10]

Funkcja filter zwróci pustą tablicę, jeśli dla żadnego elementu filtrowanie tablicy nie zostanie spełniony warunek.

Funkcja filtrująca, którą przekazujemy jako pierwszy parametr do filter także przyjmuje trzy parametry identycznie, jak w przypadku funkcji find.

3. Map

Ta funkcja także tworzy nową tablicę. Służy ona do mapowania każdego elementu iterowanej tablicy i zmiany na format, jaki nas interesuje.

Przykład:

const data = [1, 2, 3];
const mapToObject = (item) => {
  return { value: item };
};
const result = data.map(mapToObject);

console.log(result); // [ { value: 1 }, { value: 2 }, { value: 3 } ]

4. Reduce

Ta funkcja także iteruje po każdym elemencie danego zbioru. Inną ciekawą jej cechą jest to, że w funkcji iteracyjnej przekazuje skumulowaną wartość z poprzednich iteracji oraz aktualnie iterowaną wartość.

Lepiej zobrazuje to poniższy przykład:

const numbers = [1, 2, 3, 4];

const total = (totalValue, currentValue) => totalValue + currentValue;
const result = numbers.reduce(total);
console.log(result); // 10

reduce jako pierwszy parametr przyjmuje funkcję zwaną reducer. Przyjmuje ona cztery parametry:

previousValue - Wartość poprzedniego wywołania funkcji iterującej.

currentValue - Wartość aktualnie iterowanego elementu.

currentIndex - Indeks aktualnie iterowanego elementu.

array - Iterowana tablica

Dodatkowo reduce przyjmuje drugi parametr: initialValue jest to wartość początkowa, która zostanie przekazana do funkcji iteracyjnej (reducer) przy pierwszym wywołaniu.

Przykład:

const numbers = [1, 2, 3, 4];

const total = (totalValue, currentValue) => totalValue + currentValue;
const result = numbers.reduce(total, 10);
console.log(result); // 20

5. Slice

Służy ona do pobrania fragmentu tablicy. Tworzy płytką kopię, w formie nowej tablicy.

Przykład:

const data = ['Barcelona', 'Juventus', 'Liverpool', 'Bayern Monachium'];

console.log(data.slice(1)); // [ "Juventus", "Liverpool", "Bayern Monachium" ]

console.log(data.slice(0, 2)); // [ "Barcelona", "Juventus" ]

console.log(data.slice(-1)); // [ "Bayern Monachium" ]

console.log(data.slice(1, -1)); // [ "Juventus", "Liverpool" ]

console.log(data.slice()); // [ "Barcelona", "Juventus", "Liverpool", "Bayern Monachium" ]

Przyjmuje dwa opcjonalne parametry:

start - Jest to indeks elementu (liczony od zera, jako pierwszy element), od którego miejsca ma pobrać dane. Można przekazać także wartość ujemną, oznacza ona miejsce elementu liczone od końca. Jeśli podany indeks wychodzi poza zakres tablicy, to zostanie zwrócona jako wynik pusta tablica.

end - Tutaj także przekazujemy indeks elementu. Za pomocą tego parametru określamy miejsce, do którego mają być pobierane dane. Może przyjąć wartość ujemną i działa podobnie jak, dla pierwszego parametru

6. Some

Funkcja służy do przeiterowania po elementach tablicy i sprawdzeniu, czy przynajmniej jeden element spełnia warunek określony w funkcji iterującej. Jako wartość zwraca true jeśli warunek został spełniony, w przeciwnym przypadku false

Przykład

const data = [1, 2, 3, 4, 5, 6, 7];

console.log(data.some(item => item > 3)); // true

console.log(data.some(item => item > 7)); // false

7. Unshift

Modyfikuje tablicę, dodając do niej jeden lub więcej elementów na jej początek. Jako wartość zwraca długość tablicy po tej operacji:

const data = [1, 2, 3];

data.unshift(4);
console.log(data);

data.unshift(5, 6, 7);
console.log(data);

8. Shift

Modyfikuje tablicę, usuwając pierwszy element. Dodatkowo jako wynik zwraca usunięty element, jeśli tablica jest pusta zwróci undefined:

const data = [1, 2, 3];

const removedElement = data.shift();
console.log('removedElement: ', removedElement); // 1
console.log('data: ', data); // [ 2, 3 ]

9. Pop

Modyfikuje tablicę, usuwając jej ostatni element. Dodatkowo jako wynik zwraca usunięty element, jeśli tablica jest pusta zwróci undefined:

const data = [1, 2, 3];

const removedElement = data.pop();
console.log('removedElement: ', removedElement); // 3
console.log('data: ', data); // [ 1, 2 ]

10. Includes

Informuje czy tablica zawiera określoną wartość:

const data = [1, 2, 3];

console.log(data.includes(3)); // true
console.log(data.includes(7)); // false

const colors = ['red', 'green', 'blue'];

console.log(colors.includes('green')); // true
console.log(colors.includes('black')); // false
console.log(colors.includes('Red')); // false

Przyjmuje dwa parametry:

searchElement - Wartość, jaką chcemy sprawdzić. Uwaga jeśli operujesz na stringach, weź pod uwagę, że wielkość liter ma znaczenie.

fromIndex - Indeks, od którego ma się zacząć przeszukanie. Domyślnie przeszukanie zaczyna się od pierwszego parametru: 0.