Tablice w JavaScript

Tablice w JavaScript służą do przechowywania wielu wartości pod postacią jednej zmiennej.

const pojazdy = ['BMW', 'Renault', 'Fiat']

Tworzenie i inicjalizacja tablicy:

const a = []
const a = [1, 2, 3]
const a = Array.of('A', 'B', 'C') 
// tworzy tablicę z 3 elementami A, B i C
const a = Array(6).fill('D')
// tworzy tablicę z 6 elementami o wartości D

Nie zaleca się używania operatora new do tworzenia tablic.

const a = [1, 2, 3] // Dobrze
const a = new Array(1, 2, 3) // Źle

Operator new można pominąć:

const a = Array('Jan')

Dlaczego nie używać operatora new? Łatwo o pomyłkę gdy mieszamy kod według nowego i poprzedniego standardu. Spójrz na kod:

const a = Array(10)
const a = [10]

Czy wydaje Ci się, że obie deklaracje są takie same? Otóż nie.

const a = Array(10) // tworzy tablicę 10 elementową
const a = [10] // tworzy jednoelementową tablicę z wartością 10

Znajdowanie elementu w tablicy

a.find(callback, thisValue)

Find zwraca pierwszy znaleziony element, który spełnia warunek (funkcja callback zwraca true) albo undefined jeśli elementu nie odnaleziono.

Parametry funkcji testującej callback:
item
obowiązkowo. Aktualnie iterowany element

index
opcjonalnie. Indeks aktualnie przetwarzanego elementu

array
opcjonalnie. Tablica, na której wywołano funkcję find

thisValue
opcjonalnie. Obiekt, który będzie znajdował się pod operatorem this w funkcji callback

Bardzo często funkcja ta używana jest w skróconej postaci:

let book = a.find(item => item.id === my_id)

Powyższy kod zwróci pierwszy element (tutaj obiekt) z tablicy dla którego spełniony jest warunek item.id === my_id

Mapowanie tablicy

Funkcja map pozwala nam na wykonanie na każdym z elementów tablicy jakiejś operacji. Zwracana jest zmieniona tablica. Tablica źródłowa nie ulega zmianie.

Składnia funkcji:

nowaTablica = tablica.map(function callback(item, index, array))

Parametry funkcji testującej callback:
item
obowiązkowo. Aktualnie iterowany element

index
opcjonalnie. Indeks aktualnie przetwarzanego elementu

array
opcjonalnie. Tablica, na której wywołano funkcję map

thisValue
opcjonalnie. Obiekt, który będzie znajdował się pod operatorem this w funkcji callback

// Mnożenie przez 2 każdego z elementów tablicy 
const a = [1, 2, 3]
const b = a.map(item => item * 2)
// [2, 4, 6]

const a = ['Ford', 'Fiat', 'Renault']
const b = a.map((item, idx) => {
    return `<option key=${idx}>${item}</option>`
})
// [<option key=1>Ford</option>, <option key=2>Fiat</option>, 
//   <option key=3>Renault</option>]

const s = b.join(' ') // łączymy elementy tablicy spacją
// "<option key=0>Ford</option> <option key=1>Fiat</option> <option // key=2>Renault</option>"

Dodawanie elementu do tablicy

Na koniec tablicy:

const a = [1, 2, 3]
a.push(4)
// [0, 1, 2, 3, 4]

Na początek tablicy:

a.unshift(0) // dopisuje 0 na początku tablicy
// [0, 1, 2, 3, 4]
a.unshift(-3, -2, -1)
// [-3, -2, -1, 0, 1, 2, 3, 4]

Usuwanie elementów z tablicy:

Ostatni element w tablicy:

const a = [1, 2, 3]
a.pop()
// [1, 2]

Pierwszy element w tablicy:

const a = [1, 2, 3]
a.shift()
// [2, 3]

Z dowolnej pozycji tablicy:

const a = [1, 2, 3]
a.splice(0, 1) // 0 - pozycja gdzie dodać element, 
// 1 - ile elementów
// [2, 3]

Łączenie tablic

const a = [1, 2, 3]
const b = [4, 5]
a.concat(b)
// [1, 2, 3, 4, 5]

const a = ['Jacek', 'Tomek', 'Marcin']
const b = a.concat('Agata', 'Basia')
// ['Jacek', 'Tomek', 'Marcin', 'Agata', 'Basia']

Przekształcenie tablicy na łańcuch tekstowy (string)

const a = [1, 2, 3]
a.toString()
// 1,2,3

Do przekształcenia tablicy na tekst można też użyć funkcji join. Pozwala ona na określenie separatora elementów.

const a = [1, 2, 3]
a.join(' * ')
// 1 * 2 * 3
a.join('; ')
// 1; 2; 3

Sortowanie tablicy

Funkcja sort porządkuje tablicę alfabetycznie: 0-9 A-Z a-z

const a = [1, 2, 3, 10, 11]
a.sort()
// 1, 10, 11, 2, 3
const a = [1, 'a', 'Z', 3, 2, 11]
a.sort()
// 1, 11, 2, 3, Z, a

Pomocne może być użycie funkcji:

const a = [1, 10, 2, 11]
a.sort((a, b) => a - b)
// 1, 2, 10, 11