Tablice
Tworzenie tablic
Tablica to uporządkowany zbiór danych. Tablicę można utworzyć korzystając z nawiasów kwadratowych (operator dostępu do pamięci):
// to make an empty array
let arr = [];
// an array of strings
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
// an array of numbers
let lottoNums = [3, 41, 17, 20, 33];
// a mixed array
let user = [‘john’, 42, true, null];
Pierwszy przykład tworzy pustą tablicę o nazwie arr
. W drugim przykładzie tworzymy tablicę o nazwie colors
i umieszczamy w niej 5 elementów będących łańcuchami znaków. Kolejny przykład to deklaracja tablicy z pięcioma elementami typu liczbowego. Ostatni przykład to tablica składająca się z elementów różnego typu. W JavaScript możemy tworzyć tablice przechowujące elementy różnego typu, a elementem tablicy może być nawet definicja funkcji:
const mixedArray = [
1,
true,
function () {
console.log(‘Crazy array’);
},
];
mixedArray[2](); // -> Crazy array
Tablice możemy tworzyć używając również konstruktora:
// to make an empty array
let users = new Array();
// a mixed array
let collections = new Array(12, true, null, NaN, ‘admin’);
const emptyItems = new Array(10);
console.log(emptyItems); // -> [ <10 empty items> ]
Metoda ta nie jest jednak zalecana gdyż wydłuża kod, może jednak być przydatna w kilku sytuacjach.
W JavaScript tablice są obiektami i operator typeof
zwraca jako wynik: object
:
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
console.log(typeof colors); // ‘object’
Aby stwierdzić czy dana zmienna jest tablicą, należy użyć metody Array.isArray()
:
console.log(Array.isArray(colors)); // -> true
if (Array.isArray(colors)) {
// do something
}
Indeksy
Każdy element tablicy posiada tak zwany indeks. Indeks tablicy to liczba całkowita. Pierwszy element tablicy posiada indeks o wartości: 0, drugi o wartości 1 i tak dalej. Ostatni element tablicy to wartość ak zwanej długości tablicy minus 1 (z uwagi na fakt, że pierwszy element ma indeks 0).
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
colors[0]; // -> ‘red’
colors[1]; // -> ‘orange’
colors[4]; // -> ‘violet’
colors[5]; // -> ‘undefined’
colors[colors.length – 1]; // -> ‘violet
Powyższy przykład demonstruje odwoływanie się do elementów tablicy poprzez ich indeks. Jeżeli odwołujemy się do nie istniejącego elementu, zwrócony zostanie: undefined
. Jeżeli indeks ostatniego elementu nie jest znany to jest to zawsze wartość długości tablicy minus 1.
Modyfikowanie elementów tablicy
Elementy tablicy możemy modyfikować czyli zmieniać ich wartość. W tym celu odwołujemy się do danej tablicy poprzez podanie jej nazwy oraz wykorzystując nawiasy kwadratowe wskazujemy element, który zostanie zmodyfikowany:
// an array of strings
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
colors[0] = ‘white’;
colors[2] = ‘gray’;
console.log(colors); // -> [ ‘white’, ‘orange’, ‘gray’, ‘blue’, ‘violet’ ]
Typ wartości elementu tablicy, również może ulec zmianie, np. z łańcucha znaków na wartość logiczną:
colors[1] = true;
console.log(colors); // -> [ ‘white’, true, ‘gray’, ‘blue’, ‘violet’ ]
Dodawanie elementów do tablicy
Możemy dodawać kolejne elementy do tablicy. Aby dodać do tablicy element na jej końcu, możemy użyć metody push()
:
// an array of strings
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
colors.push(‘white’);
console.log(colors); // -> [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’, ‘white’]
colors.push(‘gray’, ‘magenta’);
console.log(colors); // -> [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’, ‘white’, ‘gray’, ‘magenta’]
Jak widać możemy jednocześnie dodać więcej niż jeden element.
Możemy również dodać element na początku tablicy. W tym celu używamy metody unshift()
:
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
colors.unshift(‘white’, ‘gray’);
console.log(‘colors’, colors); // -> [‘white’, ‘gray’, ‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’]
Podobnie jak w przypadku metody push()
możemy dodać więcej niż jeden element.
Metody push()
i unshift()
jako wynik swojego działania zwracają nową długość tablicy:
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
let length = colors.push(‘white’);
console.log(length); // -> 6;
length = colors.unshift(‘magenta’, ‘gray’);
console.log(length); // -> 8;
Usuwanie elementów z tablicy: pop()
, shift()
Elementy tablicy możemy usuwać zarówno z jej końca jak i początku. Metoda pop()
usuwa ostatni element tablicy i zwraca jego wartość:
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
const result = colors.pop();
console.log(result); // -> ‘violet’
console.log(colors); // [‘red’, ‘orange’, ‘black’, ‘blue’]
Podobnie działa metoda shift()
, z tą różnicą, że usuwany jest pierwszy element:
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
const result = colors.shift();
console.log(result); // -> ‘red’
console.log(colors); // [‘orange’, ‘black’, ‘blue’, ‘violet’]
Łączenie tablic
Dowolną ilość tablic możemy połączyć ze sobą metodą concat()
:
let fruits = [‘apple’, ‘orange’, ‘banana’];
let vegetables = [‘carrot’, ‘cabbage’, ‘parsley’];
let meats = [‘steak’, ‘chicken breast’];
let food = fruits.concat(vegetables, meats); // -> [ ‘apple’, ‘orange’, ‘banana’, ‘carrot’, ‘cabbage’, ‘parsley’, ‘steak’, ‘chicken breast’ ]
console.log(food);
Wyszukiwanie elementu w tablicy
Metoda includes()
umożliwia sprawdzenie czy dana wartość występuje w tablicy:
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
let result = colors.includes(‘orange’);
console.log(result); // -> true
Metoda zwraca wartość logiczną true
lub false
w zależności od tego czy dana wartość znajduje się w tablicy czy też nie.
! Przeglądarka Internet Explorer nie obsługuje metody includes()
Innym sposobem przeszukania tablicy jest użycie metody indexOf
lub lastIndexOf
. Metody te zwracają indeks elementu, który odpowiada wyszukiwanej wartości:
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
let result = colors.indexOf(‘black’);
console.log(result); // -> 2
Ponieważ wyszukiwany element może znajdować się pod indeksem o wartości 0
dlatego w przypadku nie odnalezienia elementu zwracana jest wartość -1
:
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
let result = colors.indexOf(‘red’);
console.log(result); // -> 0
Należy zwrócić na to szczególna uwagę w przypadku gdy zwróconą wartość wykorzystujemy do sprawdzenia warunku:
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
if (colors.indexOf(‘yellow’) > ‑1) {
// if true do something
}
Możemy również zastosować operator bitowy ~
(tylda):
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
if (~colors.indexOf(‘yellow’)) {
// if true do something
}
Obie metody umożliwiają określenie indeksu, od którego ma rozpocząć się przeszukiwanie, poprzez podanie jako drugiego argumentu wartości indeksu początkowego:
const arr = [2, 5, 9, 2];
let index = arr.indexOf(2, 3);
console.log(index); // -> 3
Różnica pomiędzy metodami indexOf()
i lastIndexOf()
polega na tym, że metoda lastIndexOf()
zwraca indeks ostatniego odnalezionego elementu:
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’, ‘red’];
let result = colors.indexOf(‘red’);
let result2 = colors.lastIndexOf(‘red’);
console.log(result, result2); // 0 5
Odwracanie kolejności elementów tablicy
Metoda reverse()
umożliwia odwrócenie kolejności tablicy:
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
colors.reverse(); // -> [ ‘violet’, ‘blue’, ‘black’, ‘orange’, ‘red’ ]
console.log(colors); // -> [ ‘violet’, ‘blue’, ‘black’, ‘orange’, ‘red’ ]
! Metoda reverse()
mutuje oryginalną tablicę.
Łączenie elementów tablicy
Metoda join()
łączy elementy tablicy w łańcuch znaków. Każdy łączony element może zostać rozdzielony, podanym jako argument, łańcuchem znaków. Domyślnie elementy rozdzielone są przecinkiem ‚
:
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
const list = colors.join();
console.log(list); // -> ‘red,orange,black,blue,violet’
Metodę join()
możemy np. użyć do wygenerowania listy HTML
:
let colors = [‘red’, ‘orange’, ‘black’, ‘blue’, ‘violet’];
let ul = colors.map(el => ‘<li>${el}</li>‘).join(‘\n’);
Zmienna ul
będzie łańcuchem znaków:
<li>red</li>
<li>orange</li>
<li>black</li>
<li>blue</li>
<li>violet</li>
Zwracanie fragmentu tablicy
Metoda slice()
umożliwia zwrócenie fragmentu tablicy. Pierwszy argument wskazuje indeks początkowy, od którego mają zostać pobrane elementy. Drugi parametr wskazuje indeks końcowy, do którego mają zostać pobrane elementy:
let animals = [
‘shark’,
‘salmon’,
‘whale’,
‘lion’,
‘bear’,
‘lizard’,
‘tortoise’,
];
let swimmers = animals.slice(0, 3);
console.log(swimmers); // -> [ ‘shark’, ‘salmon’, ‘whale’ ]
let mammals = animals.slice(2, 5);
console.log(mammals); // -> [ ‘whale’, ‘lion’, ‘bear’ ]
let reptiles = animals.slice(5);
console.log(reptiles); // -> [ ‘lizard’ ]
Pominięcie drugiego atrybutu określającego indeks elementu końcowego spowoduje zwrócenie tablicy zawierającej elementy od indeksu początkowego do końca tablicy.
Podanie jako argument wartości ujemnej powoduje, że wartość indeksów obliczana jest od prawej strony:
let animals = [‘shark’, ‘salmon’, ‘whale’, ‘lion’, ‘bear’, ‘lizard’];
let lastThree = animals.slice(-3);
console.log(lastThree); // -> [ ‘lion’, ‘bear’, ‘lizard’ ]
let example = animals.slice(-3, ‑1);
console.log(lastThree); // -> [ ‘lion’, ‘bear’, ‘lizard’ ]
let example = animals.slice(-3, ‑1);
console.log(example); // -> [ ‘lion’, ‘bear’]
Metoda slice()
nie modyfikuje oryginalnej tablicy. Metodą slice()
możemy utworzyć kopię oryginalnej tablicy:
let copy = animals.slice();
console.log(copy); // -> [ ‘shark’, ‘salmon’, ‘whale’, ‘lion’, ‘bear’, ‘lizard’ ]
Usuwanie i dodawanie elementów
Metoda splice()
umożliwia usuwanie, zamienianie i dodawanie elementów:
let months = [‘Jan’, ‘March’, ‘April’, ‘June’];
months.splice(1, 0, ‘Feb’);
console.log(months); // -> [ ‘Jan’, ‘Feb’, ‘March’, ‘April’, ‘June’ ]
months.splice(4, 1, ‘May’);
console.log(months); // -> [ ‘Jan’, ‘Feb’, ‘March’, ‘April’, ‘May’ ]
Metoda pobiera trzy argumenty:
- indeks początkowy,
- ile elementów usunąć od indeksu początkowego (argument opcjonalny),
- elementy które należy wstawić (argument opcjonalny).
// splice (startIndex, deleteCount, itemsToInsert);
// INSERTING
let cars = [‘audi’, ‘ford’, ‘fiat’, ‘renault’, ‘seat’];
// at index 3, delete 0 items, insert ‘ferrari’
cars.splice(3, 0, ‘ferrari’);
console.log(cars);
// -> [‘audi’, ‘ford’, ‘fiat’, ‘ferrari’, ‘renault’, ‘seat’]
// at index 4, delete 0, insert multiple elements
cars.splice(4, 0, ‘porsche’, ‘peugeot’);
// -> [‘audi’, ‘ford’, ‘fiat’, ‘ferrari’, ‘porsche’, ‘peugeot’, ‘renault’, ‘seat’]
// DELETING
// at index 1 delete 2 items
cars.splice(1, 2);
console.log(cars); // -> [‘audi’, ‘ferrari’, ‘porsche’, ‘peugeot’, ‘renault’, ‘seat’]
// REPLACING
// at index 3, delete 2 items and replace them with
cars.splice(3, 2, ‘PEUGEOT’, ‘RENAULT’);
console.log(cars); // -> [ ‘audi’, ‘ferrari’, ‘porsche’, ‘PEUGEOT’, ‘RENAULT’, ‘seat’ ]