Tablice w JavaScript

Data: 2021-10-24 | Autor: Admin | Kategoria: JavaScript

Tablica w JavaScript pozwala nam przechowywać uporządkowaną listę innych wartości, w której mamy pierwszy, drugi, trzeci element i tak dalej, w przeciwieństwie do obiektów, w których to przechowujemy kolekcję kluczy oraz ich wartości. Tak na marginesie warto również wiedzieć, że tablice to także obiekty, które reprezentują uporządkowaną według indeksu kolekcję danych.

Tablice w JS podstawowe informacje

Kilka podstawowych informacji z którymi powinieneś się zaznajomić, jeżeli zaczynasz przygodę z tablicami.

Tworzenie nowej tablicy (deklaracja tablicy)

By utworzyć tablicę, najczęściej używamy nawiasów kwadratowych []

const emptyArray = []; // przykład pustej tablicy
const numbers = [1, 2, 3, 4]; // tablica cyfr
const strings = ['aaa', 'bbb', 'ccc']; // tablica z ciągami znaków
const objects = [{ 'name': 'John' }, { 'name': 'Jane' }]; // tablica obiektów

const one = 'one';
const two = 2;
const mixedArray = [one, two]; // używając zmiennych jako wartości

Możemy również użyć konstruktora Array do utworzenia tablicy, mimo to odradza się używanie tej metody ze względu na dłuższy zapis oraz na fakt, że jeżeli przekażemy jeden argument w postaci liczby od 0 do 2^31 to JavaScript utworzy dla nas pustą tablicę o długości przekazanego parametru.

W ES6 mamy dostęp do metody of, która jest w stanie dla nas utworzyć tablicę z jednym argumentem. Przykłady poniżej:

const usinngConstructor = new Array('aaa', 'bbb', 'ccc'); // ['aaa', 'bbb', 'ccc']
const oneIntegerArgument = new Array(3); // [empty × 3] a długość tej tablicy wynosi 3
const oneIntegerArgumentOf = Array.of(3); // [3] długość tablicy 1

Uzyskiwanie dostępu do elementów tablicy

Dostęp do elementów tablicy uzyskujemy za pomocą wspomnianego wcześniej indeksu, posługujemy się nazwą tablicy, a w nawiasach kwadratowych umieszczamy indeks elementu, którego wartość nas interesuje.

const strings = ['aaa', 'bbb', 'ccc'];
console.log(strings[0]) // 'aaa' - indeks === 0
console.log(strings[1]) // 'bbb' - indeks === 1
console.log(strings[2]) // 'ccc' - indeks === 2

Ilość elementów w tablicy, długość tablicy, czyli wykorzystanie właściwości length

Jak sprawdzić ile elementów znajduje się w tablicy? Wystarczy użyć właściwości, którą posiada każda tablica, a mianowicie ‘length’ okreslająca jej długość.

const empty = [];
const emptyWithLenght = new Array(5);
const strings = ['aaa', 'bbb', 'ccc'];

console.log(empty.length); // 0
console.log(emptyWithLenght.length); // 5
console.log(strings.length); // 3

Dzięki właściwości length możemy dostać się do elementów znajdujących się na jej końcu. length - 1 to indeks ostatniego elementu w naszej tablicy

const strings = ['aaa', 'bbb', 'ccc'];
console.log(strings[length - 1]); // ccc zwraca nam ostatni element tablicy

Ciekawostką może być możliwość nadpisania właściwości length.

Jeśli zwiększymy długość tablicy, zostaną dodane puste elementy, jeżeli natomiast zmniejszymy ją, to nasza tablica zostanie obcięta, a sam proces jest nieodwracalny.

const ar = [1, 2, 3, 4];
ar.length = 10;
console.log(ar); // [1, 2, 3, 4, empty × 6]
ar.length = 2;
console.log(ar); // [1, 2]

Tablice dwuwymiarowe, trójwymiarowe i wielowymiarowe

Tablice mogą przechowywać tablice, w takich przypadkach mówimy, że mają wymiary. Często stosowane są w grach, gdzie indeksy reprezentują konkretne grafiki/elementy. Można zerknąć na Tiled program do tworzenia map, który możemy wykorzystać w grach opartych o JavaScript.

Tablica dwuwymiarowa

Elementami tablicy dwuwymiarowej są tablice. Poniżej przykład utworzenia za pomocą funkcji takiej tablicy:

const twoDArray = [];
const numberOfRows = 4;

// utworzenie tablicy dwuwymiarowej
for (let i = 0; i < numberOfRows; i++) {
    twoDArray[i] = [];
}
console.log(twoDArray) // [[], [], [], []]

Uzupełnienie tablicy dwuwymiarowej wartościami:

const twoDArray = [];
const numberOfRows = 3;
const numberOfColumns = 2;

for (let i = 0; i < numberOfRows; i++) {
    twoDArray[i] = []; // tutaj torzymy naszą tablicę, kod z poprzedniego przykładu

    // poniżej uzupełniamy naszą tablicę indeksami kolumn i wierszy
    for (let j = 0; j < numberOfColumns; j++) {
        twoDArray[i][j] = `${i}, ${j}`;
    }
}
console.log(twoDArray)

// [
//    ["0, 0", "0, 1"]
//    ["1, 0", "1, 1"]
//    ["2, 0", "2, 1"]
// ]

Tablica trójwymiarowa

W tablicy trójwymiarowej tworzymy trzy poziomy indeksów

var threeDArray = [
  [
    ['imię', 'nazwisko'] , ['kraj', 'miasto']
  ],
  [
    ['nazwa', 'skrót'], ['klimat', 'teren']
  ]
];

console.log(threeDArray[0][0][1]) // 'nazwisko'

Tablice wielowymiarowe

Przeważnie korzystamy z tablic dwu lub trzy wymiarowych, praca z większą ilością wymiarów może być problematyczna.

Pętla po tablicy

Istnieje kilka metod do poruszania się po elementach tablicy, tak by móc wykonać na wszystkich lub kilku elementach interesujące nas operacje.

• Jedną z najstarszych jest zastosowanie pętli for.

const arrOfStrings = ['John', 'Mark', 'Kate'];

for (let i = 0; i < arrOfStrings.length; i++) {
  // 'i' zwiększa się o jeden przy każdej iteracji umożliwając nam dos†ęp do kolejnych elementów
  console.log( arrOfStrings[i] ); // 'John', 'Mark', 'Kate'
}

• Mamy również do dyspozycji pętle for .. of, w której nie musimy się bawić już w używanie indeksów. W tym przypadku nie mamy dostępu do indeksu, co przeważnie jest wystarczające.

const names = ['John', 'Mark', 'Kate'];

for (let name of names) { // iterujemy po każdym elemencie
  console.log( name );
}

• Jest również pętla for .. in, której moglibyśmy użyć gdyż tablice to także objekty, ale nie powinniśmy jej używać do tego celu, gdyż:
  • iteruje ona nie tylko po indeksach, co może czasami stanowić problem, gdy natrafimy na element, który przypomina tablice, ale ma jeszcze jakieś metody i właściwości.
  • jest nawet do 100 razy wolniejsza od klasycznej pętli for

const names = ['John', 'Mark', 'Kate'];

for (let name in names) {
  console.log( names[name] ); // 'John', 'Mark', 'Kate'
}

• Dostęp do każdego elementu tablicy możemy również uzyskać za pomocą dodatkowych metod, takich jak forEach, zostaną one omówione w poście opisującym wszystkie metody tablicowe w JavaScript.

W jaki sposób zatrzymać wykonywanie się skryptu w pętli, jak przerwać pętle, jak zatrzymać wcześniej pętle?

const names = ['John', 'Mark', 'Kate', 'Bill', 'Sam'];

for (let name of names) {
  if (name === 'Kate') {
    break;
  }
  console.log( name );
  // zobaczymy tylko te imiona 'John', 'Mark',
  //  gdyż pętla zakończy dzialanie jak napotka imię Kate
}

const names = ['John', 'Mark', 'Kate', 'Bill', 'Sam'];

for (let name of names) {
  if (name === 'Kate') {
    continue;
  }
  console.log( name );
  // zobaczymy tylko te imiona 'John', 'Mark', 'Bill', 'Sam',
  // gdyż pętla pominienie iteracje dal imienia Kate
}

Tablice obiektów

Najczęściej określamy jak ma wyglądać obiekt, a następnie uzupełniamy tablicę obiektami za pomocą pętli lub metod do tego przeznaczonych.

const arrayOfObjects = [
    {id: 1, name: 'Ala'},
    {id: 2, name: 'Ola'},
    {id: 3, name: 'Ela'},
    {id: 4, name: 'Max'},
    {id: 5, name: 'Rafał'},
];

• ← React formularze - TypeScript i zdarzenie onSubmit
• React hooks czyli haki w React.js → →