Metody tablicowe w JavaScript

Tablice w języku JavaScript to struktury danych zawierające zbiór wielu wartości w jednej zmiennej. Tablice są skalowalne i mogą zawierać mieszankę różnych typów danych. Tablice zawierają metody, które są funkcjami wbudowanymi w JavaScript, każda metoda dokonuje zmiany lub obliczenia w tablicy i oszczędza nam pisania typowych funkcji od zera. Elementy tablicy są ponumerowane za pomocą indeksów, zaczynając od 0, pierwszy element tablicy ma indeks 0, drugi ma indeks 1 itd. a ostatni element ma wartość właściwości length tablicy pomniejszoną o 1.

Tworzenie tablicy:

W JavaScript tablicę tworzymy za pomocą nawiasów kwadratowych. Wartości umieszczamy wewnątrz nawiasów, oddzielając je przecinkami.

const arr = [1, 2, 3];
const arr2 = ['string', 'string2', 'string3'];
const arr3 = [1, 'string', true];

Właściwość length:

Tablica udostępnia właściwość length, która określa ilość jej elementów.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log9arr.lenght); //9

Właściwość length:

Do elementów tablicy odwołujemy się za pomocą nazwy tablicy i indeksu.

const arr = ['value1', 'value2', 'value3'];
console.log(arr[0]); // value1
console.log(arr[1]); // value2
console.log(arr[2]); // value3

Metody tablicowe:

at()

Przyjmuje wartość całkowitą i zwraca element pod tym indeksem, dopuszczając dodatnie i ujemne liczby całkowite. Ujemne liczby całkowite liczą wstecz od ostatniego elementu w tablicy.

const arr = ['value1', 'value2', 'value3'];
console.log(arr.at(0)); // value1
console.log(arr.at(-1)); // value3

push( )

Dodaje jeden lub więcej elementów na końcu tablicy.

const arr = ['value1', 'value2'];
arr.push('value3');
console.log(arr); // ['value1', 'value2', 'value3']

pop()

Usuwa ostatni element z końca tablicy i zwraca ten element.

const arr = ['value1', 'value2'];
const pop = arr.pop();
console.log(pop); // value2
console.log(arr); // ['value1']

shift( )

Usuwa pierwszy element z tablicy i zwraca ten element.

const arr = ['value1', 'value2'];
const shift = arr.shift();
console.log(shift); // value1
console.log(arr); // ['value2']

unshift( )

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

const arr = ['value1', 'value2'];
arr.unshift('value3');
console.log(arr); // ['value3', 'value1', 'value2']

reverse( )

Odwraca tablicę. Element o ostatnim indeksie będzie pierwszym, a element o indeksie 0 ostatnim.

const arr = [1, 2, 3, 4, 5];
arr.reverse()
console.log(arr); // [5,4,3,2,1]

indexOf( )

Zwraca indeks pierwszego wyszukiwanego elementu w tablicy lub -1, jeśli nie został znaleziony.

const arr = ['value1', 'value2', 'value3'];
console.log(arr.indexOf('value3')); // 2
console.log(arr.indexOf('value4')); // -1

findIndex( )

Zwraca indeks pierwszego elementu w tablicy, który pomyślnie spełnił warunki w funkcji testującej.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.findIndex(item => item > 5)); // 5
console.log(arr[5]); //6

find( )

Zwraca wartość pierwszego elementu w tablicy, który pomyślnie spełnił warunki w funkcji testującej.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.find(item => item > 5)); // 6

reduce( )

Wykonuje funkcję callback na każdym elemencie tablicy, w podanej kolejności, przekazując wartość zwracaną z obliczeń na poprzedzającym elemencie. 

Końcowym wynikiem jest pojedyncza wartość.

const arr = [10, 10, 10, 10, 10];
console.log(arr.reduce((acc, cur) => acc + cur)); // 50

slice( )

Zwraca nową tablicę z określonymi elementami. Pierwszy parametr wskazuje na początkowy indeks, a drugi na indeks końcowego elementu.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.slice(0, 5)); // [1, 2, 3, 4, 5]

splice()

Zmienia zawartość tablicy, usuwając lub zastępując istniejące elementy i/lub dodając nowe elementy. 

const arr = ['value1', 'value2', 'value3'];
arr.splice(0, 2);
console.log(arr); // ['value3']

map( )

Tworzy nową tablicę z wynikami wywołania podanej funkcji dla każdego elementu.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.map(item => item * 2)); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

filter( )

Tworzy nową tablicę zawierającą elementy, które spełniają warunek wewnątrz podanej funkcji.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.filter(item => item %2 === 0)); // [2, 4, 6, 8, 10]

sort( )

Metoda służy do sortowania elementów tablicy w porządku rosnącym lub malejącym.

const arr = ['c', 'b', 'e', 'a', 'd'];
console.log(arr.sort((a, b) => (a > b ? 1 : -1))); // ['a', 'b', 'c', 'd', 'e']
console.log(arr.sort((a, b) => (a > b ? -1 : 1))); // ['e', 'd', 'c', 'b', 'a']

every( )

Sprawdza każdy element w tablicy, który spełnia warunek, zwracając odpowiednio wartość true lub false.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const arr2 = [2, 4, 6, 8, 10];
console.log(arr.every(item => item % 2 === 0)); // false
console.log(arr2.every(item => item % 2 === 0)); // true

some( )

Sprawdza, czy co najmniej jeden element w tablicy spełnia warunek, zwracając odpowiednio wartość true lub false.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.some(item => item >= 10)); // true
console.log(arr.some(item => item > 10)); // false

includes( )

Sprawdza, czy tablica zawiera element, który spełnia warunek, zwracając odpowiednio wartość true lub false.

const arr = ['value1', 'value2', 'value3'];
console.log(arr.includes('value1')); // true
console.log(arr.includes('value4')); // false

concat( )

Służy do łączenia dwóch lub więcej tablic i zwraca nową tablicę.

const arr = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 10];
console.log(arr.concat(arr2)); // [1,2,3,4,5,6,7,8,9,10]

join( )

Zwraca nowy ciąg znaków, łącząc wszystkie elementy tablicy oddzielone określonym separatorem.

const arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.join(' - '); // a - b - c - d - e

fill( )

Wypełnia elementy w tabli.

const arr = new Array(5);
console.log(arr); // [ <5 empty items> ]
console.log(arr.fill(10)); // [10, 10, 10, 10, 10]

forEach( )

Wykonuje podaną funkcję callback dla każdego elementu w tablicy.

const arr = ['value1', 'value2', 'value3'];
arr.forEach(value => {
     console.log(value);
});
// 'value1'
// 'value2'
// 'value3'

flat()

Tworzy nową tablicę ze wszystkich zagnieżdżonych tablic.

const arr = ['value1', 'value2', ['value3', ['value4', 'value5']]];
console.log(arr.flat(1));; // ['value1', 'value2', 'value3', ['value4', 'value5']
console.log(arr.flat(2));; // ['value1', 'value2', 'value3', 'value4', 'value5']

flatMap()

Zwraca nową tablicę utworzoną przez zastosowanie danej funkcji callback dla każdego elementu tablicy, a następnie spłaszczenie wyniku o jeden poziom.

const arr = [
     [1, 2, 3]'
     [4, 5, 6],
     [ 7, 8, 9]
];
console.log(arr.flatMap(item => item)); // [1,2,3,4,5,6,7,8,9]

Czy szukasz wykonawcy projektów IT ?

Sprawdź case studies