Skip to content

4. Tablice

Image

4.1. skrypt [tab-01]

Poniższy skrypt ilustruje niektóre cechy tablic w JavaScript. Przypominają one tablice PHP, jednak z jedną istotną różnicą: są one obsługiwane za pomocą wskaźników i traktowane jako obiekty.


'„use strict”;

// tablica jest obiektem, którym operuje się poprzez jej adres
const tab1 = [1, 2, 3];
// kopiowanie adresów
const tab2 = tab1;
// tab1 i tab2 wskazują na tę samą tablicę
console.log("tab1===tab2 :", tab1 === tab2);
// tablicę można modyfikować, korzystając zarówno z tab1, jak i tab2
tab2[1] = 10;
console.log("tab1=", tab1);
console.log("tab2=", tab2);

Wykonanie


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-01.js"
tab1===tab2 : true
tab1= [ 1, 10, 3 ]
tab2= [ 1, 10, 3 ]

Komentarze

  • wiersz 2 wyników pokazuje, że [tab1] i [tab2] to dwie identyczne jednostki, a właściwie dwa identyczne wskaźniki;
  • wiersze 4 i 5 wyników pokazują, że te dwa wskaźniki wskazują na tę samą tablicę;

4.2. skrypt [tab-02]

Ten skrypt pokazuje, że tablica w JavaScript różni się od tablic w językach kompilowanych.


'use strict';

// tablica
const tab = [];
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// inicjalizacja elementu
tab[3] = 100;
tab[1] = "huit";
// tablica
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// toString
console.log("tab.toString=[", tab.toString(), "]");
console.log("-------------------------------");
// klucze tablicy to jej indeksy
for (let key of tab.keys()) {
  console.log("clé=[", key, "], valeur=[", tab[key], "]");
}
console.log("-------------------------------");
// wartości tablicy
for (let value of tab.values()) {
  console.log("valeur=[", value, "]");
}
  • wiersz 4: pusta tablica;
  • wiersz 8: tablica nie ma stałego rozmiaru. Jest to po prostu ciąg elementów indeksowanych numerami. Można zainicjować element nr 3, nawet jeśli elementy [0, 1, 2] nie zostały jeszcze zdefiniowane;
  • wiersze 16–24: tablica w JavaScript zachowuje się analogicznie do tablicy PHP;

Wykonanie


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-02.js"
tab= [] , longueur=[ 0 ]
-------------------------------
tab= [ <1 empty item>, 'huit', <1 empty item>, 100 ] , longueur=[ 4 ]
-------------------------------
tab.toString=[ ,huit,,100 ]
-------------------------------
clé=[ 0 ], valeur=[ undefined ]
clé=[ 1 ], valeur=[ huit ]
clé=[ 2 ], valeur=[ undefined ]
clé=[ 3 ], valeur=[ 100 ]
-------------------------------
valeur=[ undefined ]
valeur=[ huit ]
valeur=[ undefined ]
valeur=[ 100 ]

4.3. skrypt [tab-03]

Ten skrypt pokazuje różne metody obiektu [tableau].


'use strict';
// tablica może zawierać różne typy danych
const tab = [1, 2, "un", "deux", true, [10, 20], { prop1: 10, prop2: "abc" }];
// console.log potrafi wyświetlić zawartość tablicy
show(1);
console.log("tab=", tab);
show(2);
// przeglądanie tablicy za pomocą foreach
tab.forEach(element => {
  console.log("élément=", element, typeof (element));
});
show("2b");
// inny sposób na osiągnięcie tego samego celu
tab.forEach(function (element) {
  console.log("élément=", element, typeof (element));
});
show(3);
// przeglądanie tablicy za pomocą pętli „for”
for (let i = 0; i < tab.length; i++) {
  console.log("i=", i, "tab[i]=", tab[i]);
}
show(4);
// modyfikacja tab[i]
tab[5] = [];
// wyświetlanie
console.log("tab=", tab);
show(5);
// usuwamy ostatni element
let element = tab.pop(tab);
console.log("élément=", element, "tab=", tab);
show(6);
// dodajemy element na końcu tablicy
tab.push('xyz');
console.log("tab=", tab);
show(7);
// dodaj element na początku tablicy
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// usuwamy pierwszy element tablicy
element = tab.shift();
console.log("élément=", element, "tab=", tab);
show(9);
// usuwa się element nr 2 z tablicy
element = tab.splice(2, 1);
console.log("élément=", element, "tab=", tab);
show(10);
// usuwamy z tablicy dwa elementy, zaczynając od elementu nr 1
element = tab.splice(1, 2);
console.log("élément=", element, "tab=", tab);

// funkcja
function show(param) {
  console.log("[", param, ":::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ]");
}

Komentarze

  • Różnica między tablicami obiektu PHP a tablicami w JavaScript jest zilustrowana w wierszach 3 i 24:
    • w wierszu 3 zmienna [tab] jest zadeklarowana jako stała;
    • w wierszu 24 modyfikowany jest element tab[5];

W wierszu 3 to wskaźnik wskazujący na tablicę jest zadeklarowany jako stały, a nie sama tablica. Ta ostatnia może być modyfikowana.

  • wiersze 14–16: tablica [tab] jest przeglądana za pomocą metody [forEach] z tablicy [tab]. Metoda ta przyjmuje jako parametr definicję funkcji, którą można by nazwać funkcją literałową. Ta funkcja parametrowa przyjmuje jeden parametr: bieżący element tablicy [tab]. Funkcja jest wywoływana dla każdego elementu tablicy. Taki sposób zapisu jest powszechny w JavaScript;
  • wiersze 9–10: używa się innej składni do zdefiniowania funkcji parametrycznej. Zamiast zapisu:
    • function(p1, p2, …, pn){….}

pisze się:

  • (ciąg dalszy)
    • (p1, p2, …, pn) => {…}. Nazywa się to notacją „strzałkową” lub „arrow”;
  • reszta kodu jest wyjaśniona w komentarzach;

W tym skrypcie należy zwrócić uwagę, że:

  • tablica jest obiektem, do którego odwołuje się wskaźnik;
  • że obiekt ten posiada metody [forEach, pop, push, shift, unshift];

4.4. skrypt [tab-04]

Ten skrypt przedstawia inne metody obiektów tablicowych.


'use strict';

// metoda obsługi tablic

// tablica
const tab = [];
for (let i = 0; i < 10; i++) {
  tab[i] = i * 10;
}
// wyświetlanie
console.log("tab=", tab);
// mapa
const tab2 = tab.map(element => {
  return { prop1: element, prop2: element * element }
});
// wyświetlanie
console.log("tab=", tab);
console.log("tab2=", tab2);
// reduce bez wartości początkowej
const somme = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log("somme tab=", somme);
// reduce z wartością początkową
const somme2 = tab.reduce((accumulator, currentValue) => accumulator + currentValue, 10);
console.log("somme2 tab=", somme2);
// filtrowanie
const tab4 = tab.filter((element) => {
  if (element > 50) {
    return element;
  }
});
console.log("tab4=", tab4);
// znajdź
const element1 = tab.find((element) => (element > 20));
console.log("élément1=", element1);
// findIndex
const index1 = tab.findIndex((element) => (element === 20));
console.log("index1 20=", index1);
// indexOf
const index2 = tab.indexOf(30);
console.log("index2 30=", index2);
const index3 = tab.indexOf(31);
console.log("index3 31=", index3);
// lastIndexOf
const index4 = [4, 5, 4, 2].lastIndexOf(4);
console.log("index4 4=", index4);
// sortowanie
const tab5 = [4, 5, 4, 2].sort();
console.log("tab5=", tab5);
// sortowanie odwrotne
const tab6 = [4, 5, 4, 2].sort((e1, e2) => {
  if (e1 > e2) {
    return -1;
  }
  else if (e1 === e2) {
    return 0;
  } else {
    return +1;
  }
});
console.log("tab6=", tab6);

Komentarze

  • wiersze 13–15: metoda [map] przyjmuje jako parametr funkcję transformacji. Jest ona wywoływana wielokrotnie dla każdego elementu tablicy. Jej zadaniem jest przekształcenie tego elementu w coś innego, w tym przypadku w obiekt o właściwościach [prop1, prop2]. Metoda [map] zwraca nową tablicę. Poprzednia pozostaje niezmieniona: 

tab= [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
tab2= [ { prop1: 0, prop2: 0 },
{ prop1: 10, prop2: 100 },
{ prop1: 20, prop2: 400 },
{ prop1: 30, prop2: 900 },
{ prop1: 40, prop2: 1600 },
{ prop1: 50, prop2: 2500 },
{ prop1: 60, prop2: 3600 },
{ prop1: 70, prop2: 4900 },
{ prop1: 80, prop2: 6400 },
{ prop1: 90, prop2: 8100 } ]
  • wiersz 20: metoda [reduce] przyjmuje jako parametr funkcję o dwóch parametrach, wywoływaną wielokrotnie dla każdego elementu tablicy. Funkcja ta przyjmuje dwa parametry:
    • [currentValue] to bieżący element tablicy;
    • [accumulator] to ostatni wynik uzyskany przez funkcję. Jeśli dla tego akumulatora nie przewidziano żadnej wartości początkowej, wówczas będzie to 0;
    • przy pierwszym wywołaniu funkcji akumulacyjnej zwraca ona [0+tab[0]]. To właśnie ta wartość jest przypisywana do akumulatora;
    • przy drugim wywołaniu zwraca akumulator+tab[1], czyli tab[0]+tab[1];
    • za trzecim razem zwraca akumulator+tab[2], czyli tab[0]+tab[1]+tab[2];
    • itd. Ostatecznie akumulator będzie reprezentował sumę wszystkich elementów tablicy [tab];
  • wiersz 26: metoda [filter] przyjmuje jako parametr funkcję filtrującą. Jest ona wywoływana wielokrotnie dla każdego elementu tablicy i otrzymuje ten element jako parametr. Musi ona zwracać:
    • [true], jeśli element ma zostać zachowany;
    • [false] w przeciwnym razie;
  • wiersz 33: metoda [find] przyjmuje jako parametr funkcję wyszukiwania. Jest ona wywoływana wielokrotnie dla każdego elementu tablicy i otrzymuje ten element jako parametr. Musi zwracać [true], jeśli otrzymany element spełnia kryterium wyszukiwania. Wówczas proces się zatrzymuje. Metoda [find] zwraca zatem 0 lub 1 element;
  • wiersz 36: metoda [findIndex] działa tak samo jak metoda [find], ale zamiast zwracać znaleziony element, zwraca jego indeks w tablicy;
  • wiersze 39, 41: metoda [indexOf(valeur)] wyszukuje element [valeur] w tablicy i zwraca jego indeks lub -1, jeśli nie zostanie znaleziony;
  • wiersz 44: metoda [lastIndexOf(valeur)] działa tak samo jak metoda [indexOf(valeur)], ale rozpoczyna wyszukiwanie od końca tablicy;
  • wiersz 47: metoda [sort] bez parametrów zwraca tablicę posortowaną w porządku naturalnym (liczby, ciągi znaków);
  • wiersz 50: gdy naturalna kolejność nie jest odpowiednia, należy przekazać metodzie [sort] funkcję z dwoma parametrami (e1, e2), która zwraca:
    • +1, jeśli e1 ma być umieszczone po e2;
    • -1, jeśli e1 ma być umieszczone przed e2;
    • 0, jeśli oba elementy powinny mieć tę samą pozycję w kolejności;

Funkcja przekazana jako parametr do metody [sort] jest przez nią wielokrotnie wywoływana w celu porównania dwóch elementów tablicy;

https://stahe.github.io
Ten kurs-samouczek, napisany przez Serge'a Tahé, jest udostępniany publicznie na warunkach licencji Creative Commons Uznanie autorstwa – Zakaz wykorzystania komercyjnego – Na tych samych warunkach 3.0 bez zmian.