Strony internetoweSklepy internetoweAktualizacja stron

Tablice

Tablice są uporządkowanymi zbiorami zawierającymi jakieś dane.

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()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()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’ ]

Kontakt

Napisz do nas

Biuro czynne jest od poniedziałku do piątku w godzinach od 9.00 do 16.00.

Wygląda ok!
Proszę wprowadzić poprawny adres e-mail.
Wygląda ok!
Proszę wprowadzić poprawny numer telefonu.
Wygląda ok!
Proszę wprowadzić treść wiadomości.

* te pola są wymagane.

Adres

  • ABM Studio Norbert Morajda
  • ul. Kopernika 22,
  • 33-170 Tuchów

Dane do przelewów

  • ABM Studio Norbert Morajda
  • PL 8732577306
  • Santander Bank Polska
  • 10 1910 1048 2125 0787 8127 0001