JavaScript - Array Reference

JavaScript Array Reference

Obiekty Array to tablice (struktury danych pozwalające na przechowywanie uporządkowanego zbioru elementów).
Tablice są indeksowane numerycznie, pierwsza komórka ma indeks 0, druga ma indeks 1, trzecia ma indeks 2.

przykład:
var owoce = ["banan", "jabłko", "gruszka", "wiśnia", "czereśnia"];

var warzywa = Array("pomidor", "papryka", "marchew", "pietruszka");

Właściwości Array

właściwość	opis
`constructor`	Zwraca funkcję, która utworzyła prototyp obiektu Array.
`length`	Pokazuje liczbę elementów w tablicy.
`prototype`	Umożliwia dodawanie właściwości i metod do obiektu Array.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

właściwość: constructor
składia: obiekt.constructor
opis: Zwraca funkcję, która utworzyła prototyp obiektu Array.


<script type="text/javascript">

var owoce = ["banan", "jabłko", "gruszka", "wiśnia", "czereśnia"];

document.write(owoce.constructor);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

właściwość: length
składia: obiekt.length
opis: Zwraca ilość elementów w tablicy.


<script type="text/javascript">

var owoce = ["banan", "jabłko", "gruszka", "wiśnia", "czereśnia"];

document.write("ilość elementów w tablicy: " + owoce.length);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

właściwość: prototype
składia: obiekt.prototype
opis: Umożliwia dodawanie właściwości i metod do obiektu Array.


<script type="text/javascript">

var owoce = ["banan", "jabłko", "gruszka", "wiśnia", "czereśnia"];

document.write(owoce.prototype);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

Metody Array

metoda	opis
`concat()`	Łaczenie dwóch lub więcej tablic.
`filter()`	Tworzy nową tablice z każdego elementu który spełnia warunek.
`find()`	Zwraca wartość pierwszego elementu tablicy który spełnia warunek.
`findIndex()`	Zwraca indeks pierwszego elementu tablicy który spełnia warunek.
`includes()`	Metoda include() Sprawdza, czy tablica zawiera określony element.
`indexOf()`	Metoda indexOf() przeszukuje tablicę w poszukiwaniu określonego elementu i zwraca jego pozycję.
`lastIndexOf()`	Metoda lastIndexOf() zwraca ostatni indeks (pozycję) określonej wartości.
`join()`	Łączy wszystkie elementy tablicy w łańcuch.
`map()`	Tworzy nową tablicę z wynikiem wywołania funkcji dla każdego elementu tablicy.
`pop()`	Pobiera z tablicy ostatni element i jednocześnie usuwa go.
`push()`	Dodaje nowe elementy na końcu tablicy i zwraca nową długość.
`reverse()`	Odwraca kolejność komórek tablicy.
`shift()`	Pobiera i usuwa pierwszy element tablicy.
`unshift()`	Dodaje nowe elementy na początku tablicy i zwraca nową długość.
`slice()`	Zwraca nową tablicę zawierającą elementy od indeksu start do indeksu end.
`some()`	Sprawdza, czy któryś z elementów tablicy spełnia podany warunek.
`sort()`	Sortuje elementy tablicy (alfabetycznie i numerycznie).
`splice()`	Dodaje/usuwa elementy z tablicy.
`toString()`	Zwraca ciąg znaków oddzielonych od siebie przecinkami.
`valueOf()`	Zwraca pierwotną wartość tablicy.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: concat()
składia: tablica1.concat(tablica2)
opis: Łaczenie dwóch lub więcej tablic.


<script type="text/javascript">

var owoce = ["śliwki", "wiśnie", "czereśnie"];

var warzywa = ["pomidory", "ogórki", "papryka"];

var owoceIWarzywa = owoce.concat(warzywa);

document.write(owoce + "<br />");

document.write(warzywa + "<br />");

document.write(owoceIWarzywa);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: filter()
składia:
opis: Tworzy nową tablice z każdego elementu który spełnia warunek.


<script type="text/javascript">

var wiek = [22, 33, 11, 44];

function sprawdzWiek(lata) {

	    return lata >= 18;

}

var wszyscy = wiek;

var tylko_dorosli = wiek.filter(sprawdzWiek);

document.write(wszyscy + "<br />" + tylko_dorosli);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: find()
składia:
opis: Zwraca wartość pierwszego elementu tablicy który spełnia warunek.


<script type="text/javascript">

var wiek = [22, 33, 11, 44];

function sprawdzWiek(lata) {

      return lata >= 30;

}

var wszyscy = wiek;

var tylko_wybrany_wiek = wiek.find(sprawdzWiek);

document.write(wszyscy + "<br />" + tylko_wybrany_wiek);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: findIndex()
składia:
opis: Zwraca indeks pierwszego elementu tablicy który spełnia warunek.


<script type="text/javascript">

var wiek = [22, 33, 11, 44];

function sprawdzWiek(lata) {

      return lata >= 30;

}

var wszyscy = wiek;

var tylko_wybrany_wiek = wiek.findIndex(sprawdzWiek);

document.write(wszyscy + "<br />" + tylko_wybrany_wiek);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: includes()
składia:
opis: Metoda include() Sprawdza, czy tablica zawiera określony element.
Jeśli tablica zawiera określony element, metoda include() zwraca wartość true.
Jeśli tablica nie zawiera określonego element, metoda include() zwraca wartość false.


<script type="text/javascript">

var owoce = ["jabłka", "gruszki", "maliny"];

var wybrane_owoce = owoce.includes("maliny");

var wybrane_owoce02 = owoce.includes("pomarańcze");

document.write(owoce + "<br />");

document.write(wybrane_owoce + "<br />");

document.write(wybrane_owoce02);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: indexOf()
składia:
opis: Metoda indexOf() przeszukuje tablicę w poszukiwaniu określonego elementu i zwraca jego pozycję.
          Wyszukiwanie rozpocznie się od określonej pozycji (od 0, jeśli nie określono pozycji początkowej) i zakończy wyszukiwanie na końcu tablicy.
          indexOf() zwraca -1, jeśli element nie został znaleziony.
          Jeśli element występuje więcej niż raz, metoda indexOf zwraca pozycję pierwszego wystąpienia.


<script type="text/javascript">

var owoce = ["jabłka", "gruszki", "maliny"];

var wybrane_owoce = owoce.indexOf("maliny");

var wybrane_owoce02 = owoce.indexOf("pomarańcze");

document.write(owoce + "<br />");

document.write(wybrane_owoce + "<br />");

document.write(wybrane_owoce02);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: lastIndexOf()
składia:
opis: Metoda lastIndexOf() zwraca ostatni indeks (pozycję) określonej wartości.
lastIndexOf() zwraca -1, jeśli element nie został znaleziony.
Jeśli szukana wartość występuje więcej niż raz, metoda zwraca pozycję ostatniego wystąpienia.


<script type="text/javascript">

var owoce = ["jabłka", "gruszki", "maliny"];

var wybrane_owoce = owoce.lastIndexOf("maliny");

var wybrane_owoce02 = owoce.lastIndexOf("pomarańcze");

document.write(owoce + "<br />");

document.write(wybrane_owoce + "<br />");

document.write(wybrane_owoce02);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: join()
składia: tablica.join(separator)
opis: Zwraca zawartość wszystkich komórek tablicy w postaci ciągu znaków oddzielonych od siebie znakiem separatora.
Domyślnym separatorem jest (,) - przecinek.


<script type="text/javascript">

var owoce = ["jabłka", "gruszki", "maliny"];

var owoce_separator = owoce.join();

var owoce_separator02 = owoce.join(" i ");

document.write(owoce + "<br />");

document.write(owoce_separator + "<br />");

document.write(owoce_separator02);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: map()
składia:
opis: Tworzy nową tablicę z wynikiem wywołania funkcji dla każdego elementu tablicy.
Metoda map() wywołuje podaną funkcję raz dla każdego elementu w tablicy, w podanej kolejności.


<script type="text/javascript">

var liczby = [4, 9, 16, 25];

var pierwiastek = liczby.map(Math.sqrt);

document.write(liczby + "<br />");

document.write(pierwiastek + "<br />");




wynik skryptu







var liczby02 = [8, 27, 64, 125];

var pierwiastek_szescienny = liczby02.map(Math.cbrt);

document.write(liczby02 + "<br />");

document.write(pierwiastek_szescienny + "<br />");

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: pop()
składia: tablica.pop()
opis: Pobiera z tablicy ostatni element i jednocześnie usuwa go.


<script type="text/javascript">

var owoce = ["jabłka", "gruszki", "maliny"];

owoce.pop();

document.write(owoce);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: push()
składia: tablica.push(element)
opis: Dodaje nowe elementy na końcu tablicy i zwraca nową długość.


<script type="text/javascript">

var owoce = ["jabłka", "gruszki", "maliny"];

owoce.push("wiśnie");

document.write(owoce);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: reverse()
składia: tablica.reverse()
opis: Odwraca kolejność komórek tablicy.


<script type="text/javascript">

var owoce = ["jabłka", "gruszki", "maliny"];

owoce.reverse();

document.write(owoce);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: shift()
składia: tablica.shift()
opis: Pobiera i usuwa pierwszy element tablicy.


<script type="text/javascript">

var owoce = ["jabłka", "gruszki", "maliny"];

owoce.shift();

document.write(owoce);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: unshift()
składia: tablica.unshift(element)
opis: Dodaje nowe elementy na początku tablicy i zwraca nową długość.


<script type="text/javascript">

var owoce = ["jabłka", "gruszki", "maliny"];

owoce.unshift("pomarańcze", "mandarynki", "grejpfruty");

document.write(owoce);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: slice()
składia: tablica.slice(start, end)
opis: Zwraca nową tablicę zawierającą elementy od indeksu start do indeksu end.


<script type="text/javascript">

var owoce = ["jabłka", "gruszki", "maliny", "pomarańcze", "mandarynki", "grejpfruty"];

var cytrusy = owoce.slice(3, 5);

document.write(owoce + "<br />" + cytrusy);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: some()
składia:
opis: Sprawdza czy element tablicy spełnia test / warunek.
Jeżeli warunek jest spełniony zwracana jest wartość true.
Jeżeli warunek jest nie spełniony zwracana jest wartość false.


<script type="text/javascript">

var wiek = [22, 33, 11, 44];

function sprawdzWiek(lata) {

        return lata >= 18;

}

document.write(wiek.some(sprawdzWiek));

</script>

wynik skryptu


<script type="text/javascript">

var wiek = [22, 33, 11, 44];

function sprawdzWiek(lata) {

        return lata >= 88;

}

document.write(wiek.some(sprawdzWiek));

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: sort()
składia: tablica.sort()
składia: tablica.sort([nazwa funkcji])
opis: Sortuje elementy tablicy (alfabetycznie i numerycznie).


<script type="text/javascript">

var owoce = ["jabłka", "gruszki", "maliny", "pomarańcze", "mandarynki", "grejpfruty"];

var wiek = [22, 33, 11, 44];



document.write(owoce.sort() + "<br />");

document.write(wiek.sort());

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: splice()
składia: tablica.splice(indeks, ile, [wartość1, wartość2, ... , wartośćn])
opis: Dodaje/usuwa elementy z tablicy.


<script type="text/javascript">

var owoce = ["jabłka", "gruszki", "maliny"];

owoce.splice(2, 0, "Kiwi", "Lemon");

document.write(owoce);

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: toString()
składia: tablica.toString()
opis: Zwraca ciąg znaków oddzielonych od siebie przecinkami.
Ta metoda jest identyczna z wywołaniem tablica.join(",").


<script type="text/javascript">

var owoce = ["jabłka", "gruszki", "maliny"];

var wiek = [22, 33, 11, 44];

document.write(owoce.toString() + "<br />");

document.write(wiek.toString());

</script>

wynik skryptu

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

metoda: valueOf()
składia: tablica.valueOf()
opis: Zwraca pierwotną wartość tablicy


<p id="wynik"></p>



<script type="text/javascript">

var konsole = ["PSX", "PS2", "PS3", "PS4", "PS5"];

const wszystkieKonsole = konsole.valueOf();



document.getElementById("wynik").innerHTML = wszystkieKonsole;

</script>

wynik skryptu

utworzenie i wywołanie tablicy


<script type="text/javascript">

var kolory = Array("żółty", "pomarańczowy", "czerwony");

document.write("kolory[0] " + kolory[0] + "<br />");

document.write("kolory[1] " + kolory[1] + "<br />");

document.write("kolory[2] " + kolory[2] + "<br />");

</script>

wynik skryptu


<script type="text/javascript">

var colours = ["yellow", "orange", "red"];

document.write("colours[0] " + colours[0] + "<br />");

document.write("colours[1] " + colours[1] + "<br />");

document.write("colours[2] " + colours[2] + "<br />");

</script>

wynik skryptu

odczyt zawartości tablicy w pętli for
W przypadku pętli for musimy znać rozmiar tablicy kolory.length.


<script type="text/javascript">

var kolory = Array("żółty", "pomarańczowy", "czerwony");

for (var i = 0; i < kolory.length; i++) {

	     document.write("kolory[" + i + "] = " + kolory[i] + "<br />");

}

</script>

wynik skryptu


<script type="text/javascript">

var colours = ["yellow", "orange", "red"];

for (var i = 0; i < kolory.length; i++) {

	     document.write("colours[" + i + "] = " + colours[i] + "<br />");

}

</script>

wynik skryptu

odczyt zawartości tablicy w pętli for...in
W przypadku pętli for...in nie musimy znać rozmiaru tablicy.


<script type="text/javascript">

var kolory = Array("żółty", "pomarańczowy", "czerwony");

for (var indeks in kolory) {

	     document.write("kolory[" + indeks + "} = " + kolory[indeks] + "<br />");

}

</script>

wynik skryptu


<script type="text/javascript">

var colours = ["yellow", "orange", "red"];

for (var indeks in colours) {

	     document.write("colours[" + indeks + "} = " + colours[indeks] + "<br />");

}

</script>

wynik skryptu

Zapis wartości, zamiana wartości oraz usunięcie wartości w tablicy


<script type="text/javascript">

var kolory = Array();

kolory[0] = "gelb";

kolory[1] = "orange";

kolory[2] = "rot";


document.write("Pierwotna zawartość tablicy: <br />");

for (var indeks in kolory){

        document.write("kolory[" + indeks + "] = " + kolory[indeks] + "<br />");

}



kolory[0] = "blau";

kolory[1] = "hellblau";

kolory[2] = "dunkelblau";


document.write("
Zawartość tablicy po zmianach:<br />");

for (var indeks in kolory){

        document.write("kolory[" + indeks + "] = " + kolory[indeks] + "<br />");

}



kolory[0] = null;

kolory[1] = null;

kolory[2] = null;


document.write("
Zawartość tablicy po zmianach:<br />");

for (var indeks in kolory){

        document.write("kolory[" + indeks + "] = " + kolory[indeks] + "<br />");

}



kolory[0] = "";

kolory[1] = "";

kolory[2] = "";


document.write("
Zawartość tablicy po zmianach:<br />");

for (var indeks in kolory){

        document.write("kolory[" + indeks + "] = " + kolory[indeks] + "<br />");

}

</script>

wynik skryptu