JS - TABLICE, TWORZENIE TABLIC I METODY TABLICOWE

Tablice w JavaScript to uporządkowane kolekcje danych, które przechowują wiele wartości w jednej zmiennej. Każda wartość, zwana elementem, ma przypisany unikalny numer (indeks), który służy do uzyskiwania do niej dostępu. Indeksy tablic zawsze zaczynają się od zera. Kluczowe cechy tablic w JavaScript

• Typ danych object: Mimo że tablice działają jak listy, w JavaScript są one specjalnym typem obiektu.
• Dynamiczny rozmiar: Tablice mogą dynamicznie rosnąć lub maleć w miarę dodawania lub usuwania elementów.
• Dowolne typy danych: Elementy tablicy nie muszą być tego samego typu; jedna tablica może zawierać liczby, ciągi znaków, obiekty, a nawet inne tablice.
• Dostęp przez indeks: Aby odwołać się do konkretnego elementu, używa się nawiasów kwadratowych ([]) i jego indeksu. Np. tablica[0] odwołuje się do pierwszego elementu. 

TWORZENIE TABLIC
Tablice można tworzyć na kilka sposobów, najpopularniejszym jest użycie
literału tablicy, czyli wypisanie elementów tablicy (elementy będą się wyświetlały razem ze swoimi indeksami).
Można zainicjować pustą tablicę.
W jednej tablicy możemy trzymać różne typy elementów.

let nazwaTablicy = [wartosc1, wartosc2, wartosc3];

// Przykład:
let kursy = ['JavaScript', 'C#', 'jQuery', 'TypeScript', 'SQL'];

Można również użyć konstruktora czyli = new Array()
Z kostruktora również możemy stworzyć pustą tablicę.
Ten sposób pozwala na podanie argumentów tablicy w nawiasie.

let nazwaTablicy = new Array(wartosc1, wartosc2, wartosc3);

Tworzenie tablicy o określonym rozmiarze, też z pomocą konstruktora. Jeśli w konstruktorze podaje się tylko jeden argument, to konstruktor zinterpretuje to jako stworzenie pustej tablicy o długości równej podanej liczbie.

Array.of() tworzy tablicę z podanych argumentów.

Array.from() pozwala na konwersję ze stringa. Rozbije input (stringa) na pojedyncze znaki.

JAK KOPIOWAĆ TABLICE?
Trzy kropki i odwołanie do oryginału [...tablica];

Operator spread (... ) w JavaScript służy do rozpraszania (rozwijania) elementów z obiektu iterowalnego (takiego jak tablica) na pojedyncze elementy w miejscach, gdzie oczekiwane są wartości. Jest on bardzo przydatny do tworzenia kopii tablic, łączenia ich lub przekazywania elementów tablicy jako osobnych argumentów do funkcji. Główne zastosowania 

• Kopiowanie tablic: Pozwala na stworzenie płytkiej kopii tablicy.
  Przykład

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
arr2[0] = 99;
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [99, 2, 3]

• Łączenie tablic: Można łatwo połączyć dwie lub więcej tablic w jedną
  Przykład

const arr1 = [1, 2, 3];
const newArray = [0, ...arr1, 4];
console.log(newArray); // [0, 1, 2, 3, 4]

• Przekazywanie argumentów do funkcji: Rozprasza elementy tablicy, dzięki czemu każdy element staje się osobnym argumentem wywołania funkcji.
  Przykład

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

• Modyfikacja i tworzenie nowych tablic: Pozwala na tworzenie nowych tablic z dodatkiem lub modyfikacją elementów istniejącej tablicy.
  Przykład

const arr1 = [1, 2];
const arr2 = [3, 4];
const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); // [1, 2, 3, 4]

TABLICA TABLIC: MACIEŻ

Tworzenie tablicy o określonej długości:

wypełnianie tablicy:

METODY TABLICOWE NA DODAWANIE I USUWANIE ELEMENTÓW

Dodawanie przez PUSH: dodaje nowe elementy na koniec tablicy i podaje nową długość tablicy.
Push potrafi przyjmować więcej niż jeden argument. Wszystkie zostaną dodane:

Usuwanie przez POP: Pop usuwa pstatni element i zmniejsza o 1 długość tablicy.
Jeśli tablica inicjalnie jest pusta, to POP zwraca undefined

Usuwanie przez SHIFT: usuwa pierwszy element tablicy. Indeksy wszystkich pozostałych elementów będą miały zmienione indeksy na o jeden mniejsze. Ta metoda jest wolniejsza bo wymaga więcej zmian na elementach.

Dodawanie przez UNSHIFT: dodaje element na początku tablicy. Podobnie jak w sposobie PUSH, można w ten sposób dodać więcej niż jeden element na raz. Analogicznie, to też jest metoda wolniejsza, ponieważ wymaga zmian we wszystkich elementach tablicy (indeksy).

REFERENCJE DO TABLICY:
Pamiętaj, że one nie tworzą nowej tablicy, tylko wskazują na tę samą tablicę w pamięci. NIE DODAJEMY ELEMENTÓW DO REFERENCJI! BO NIEINTENCJONALNIE NADPISZEMY ORYGINAŁ.

Jeśli potrzebujemy dwóch tablic o takiej samej zawartości ale niezależnych od siebie, to musimy je SKOPIOWAĆ.

walidacja czy na pewno pracujemy na tablicy:

METODY TABLICOWE:

FOR EACH - wykonuje funkcję dla każdego elementu tablicy. NIE ZWRACA WARTOŚCI! Służy tylko do wykonywania modyfikacji na zmiennych. Iterujemy się po elementach naszej tablic i sięgnąć do każdego elementu i wykonać na nim jakąś operację. Wykorzystuje się tutaj funkcję strałkową.

MAP - bierze tablicę i na każdym elemencie tej tablicy wykonuje TRANSFORMACJĘ, którą zadaliśmy

FILTER: Filtrowanie elementów:

Łączenie metod:

FIND: przeszukiwanie tablic. Zwraca pierwszy element, który spełnia zdefiniowany warunek. A jeśli warunek nie jest spełniony dla żadnego elementu tablicy to zwraca UNDEFINED:

Gdybyśmy chcieli pokazać wszystkie elmenty spełniające podany warunek to do tego powinniśmy użyć FILTER.

FINDINDEX: zwraca indeksy albo jeśli nic nie znaleziono to zwraca -1.
Jest to alternatywa dla pętli. Deklaratywnie mówimy czego szukamy i działa to jak pętla z break.

SOME: sprawdza czy jakikolwiek element spełnia warunek. Ta metoda sprawdza wartość boolean (true albo false)

EVERY: sprawdza czy wszystkie elementy spełniają podany warunek. Jeśli znajdzie element nie spełniający warunku to przerywa i zwraca FALSE.

Gdzie można używać?
Np. przy walidacjach formularza. Gdy wszystkie wypełnione to ok. Jeśli nie wszystkie wypełnione to false:

KOMBINACJA (CHAINOWANIE) METOD:
Poniżej filtrowanie z every, a na koniec z find.

Metoda INCLUDES: sprawdza obecność i zwraca True albo False. Pozwala na wykonanie szybkich testów:

INDEX OF:

KOLEJNOŚĆ WYKONYWANIA METOD: Najpierw filtruj, potem reszta. Filtrowanie pozwala na ograniczenie ilości elementów, na których trzeba będzie wykonać operację.

METODA REDUCE

Metoda SORT

SORTOWANIE Z METODĄ LOCAL COMPARE

Przy liczbach nie możemy się zdawać na domyślny sort!
Do sortowania liczb potrzebna jest jakaś zdefiniowana funkcja.

Co to jest i kiedy używamy BUBBLE SORT?

Domyślne sortowanie jest kiepskie, zarówno w przypadku stringów jak i liczb.

OBJECT ASIGN

Object.asign

Object.freeze

prevent extensions

PROTOTYP

Prototype chain - im dłuższy bym koszt jest większy i dlużej trwa znajdywanie właściwości.

Jak tworzyć konstruktory dla obiektów?

Funkcja konstruktorów to łatwy sposób na tworzenie dużej ilości obiektów, które będą korzystały z tych samych metod.

Jeśli funkcja jest wywoływana z New to JS tworzy nowy obiekt i ustawia prototyp, wiąże this z nowym obiektem i zwraca

Konstruktor powyżej został zdefiniowany RAZ, a potem już tylko przekazujemy do niego wartości.

Możemy dodawać metody do prototypów.

Napisć grę PONG!
Napisać grę MULTIPONT - co kilka odbuć nowa piłka
Podpowiedź do multiponga - kolejne piłki będizemy tworzyć jak poniżej:

DZIEDZICZENIE W KONSTRUKTORACH

Konstruktory pochodne dziedziczą z konstruktra głównego:

Wprowadźmy do konstruktora głównego metody:

Dodajmy do konstruktora pochodnego nową właściwość:

Ustawienie dziedziczenia prototypowego

konstruktor Dog nie ma metody eat, ale ze względu na to, że ustawiliśmy dziedziczenie, to wszystkie metody zdefiniowane w prototypie głównym, to obiekt Pies je odziedziczy. Poza tym będzie miał swoją indywidualną właściwość "breed", która została zdefiniowana literalnie w kostruktorze Dog.