Tablice W większości języków programowania tablica reprezentuje układ elementów przypisanych do odpowiedniego adresu w pamięci komputera. W JavaScript tablice takie nie są.

W JavaScript tablica to prosty obiekt zachowujący się jak tablica poprzez wbudowane metody.

 

Tablicę w JavaScript są więc wolniejsze niż zwykłe tablice. Tablice w JavaScript nie są też używane przez nas prawidłowo. Istnieją w nich pewne pułapki. Musimy się ich wystrzegać. Jak się jednak czegoś wystrzec gdy się tego nie zna. Oto lista

Length – czyli długoś tablicy?

Właściwość length powinna określać ilość obiektów w naszej tablicy. Jednak tak nie jest. Właściwość ta określa ostatni index elementu tablicy plus jeden.

var myArray = [];
console.log(myArray.length); //  0
myArray[1000] = 'moto myszy';
console.log(myArray.length); // outputs 1001

Oznacza to, że jeśli przypiszę do indeksu 1000 jakąś wartość to właściwość length powie mi, że moja tablica przechowuje 1001 elementów co oczywiście jest nie prawdą ponieważ istnieje w niej tylko jeden element.

Dlatego programiście zalecają aby dodawać elementy tablicy przy użyciu Array.prototype.push tak aby nie pogubić się w stawianiu wartości poprzez indeks w tablicy JavaScript.

var numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]
numbers.push(5, 6, 7);
console.log(numbers); // [1, 2, 3, 4, 5, 6, 7]

Metoda Push za nas umieści element w odpowiedni miejscu.

Sortowanie

Aby posortować tablice korzystamy z metody Array.prototype.sort()  istnieją jednak pewne ukryte problemy związane z tą metodą.

Domyślnie sortowanie odbywa się w porządku alfabetycznym nawet jeśli w naszej tablicy są liczby całkowite. Tablica zmieni nasze cyfry na napisy a potem posortuje to wszystko w porządku alfabetycznym.

var myarray = [1001, 2, 56, 29, 501, 1];
myarray.sort();
console.log(myarray); // outputs: [1, 1001, 2, 29, 501, 56]

Poprawne sortowanie powinno zwrócić : 1, 2 , 29, 56 , 501, 1001

Jeżeli chcemy posortować naszą tablice inaczej musi stworzyć swoją własną funkcje do porównywania zmiennych. 

var numbers = [1004, 501, 56, 26, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

Tablica asocjacyjna nie jest tablicą w JavaScript

Tablica asocjacyjna czyli tablica która pozwala na umieszczanie w indeksach wartości tekstowych jak n.p w PHP nie istnieje w JavaScipt.

var myAssocArray = [];
myAssocArray["game"] = "mortal kombat";

Kod powyżej nie tworzy tablicy asocjacyjnej. Kod ten tworzy źle użyty obiekt ponieważ każdy obiekt w JavaScript jest w teorii tablicą właściwości i metod. Kod działa ponieważ w JavaScript tablice też są obiektami. Każdy obiekt w JavaScript może zostać użyty w taki sposób.

myAssocArray["game"] = "Mortal Kombat";
myAssocArray["year"] = "1992";

myAssocArray2.game = "Mortal Kombat";
myAssocArray2.year = "1992";

Oba wyrażenia określają dokładnie to samo. Dodają właściwości do obiektu. Jeśli więc szukasz słowników w JavaScript z parą klucz, wartość – tak naprawdę potrzebuje klasycznego obiektu.

Usuwanie elementów

Metoda delete może być użyta do usuwania jakichkolwiek właściwości z jakiekolwiek obiektu. Tablice są obiektami więc jeśli skorzystasz z tej funkcji w tablicy to usuniesz całkowicie właściwość a nie wartość z tego  indeksu.

var myArray = ['0', '1', '2', '3'];
delete myArray[1];
console.log(myArray[1]); 

Jeśli więc będziesz chciał się odwołać do tego indeksu następnym razem otrzymasz komunikat o  braku jego definicji Undefined.

Właściwa metoda do usuwania elementów w tablicy na podstawie jej indeksu nazywa się Array.prototype.splice.

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, 'drum'); // insert 'drum' at 2-index position
// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]

myFish.splice(2, 1); // remove 1 item at 2-index position (that is, "drum")
// myFish is ["angel", "clown", "mandarin", "sturgeon"]

Inna metoda  jak Array.prototype.pop pozwalają na usuwanie bądź dodawanie ostatniego elementu tablicy

var a = [1, 2, 3];
a.pop();

console.log(a); // [1, 2]

Array.prototype.shift pozwala na usunięcie elementów z początku tablicy

var a = [1, 2, 3];
var b = a.shift();

console.log(a); // [2, 3]
console.log(b); // 1

Sprawdzenie czy coś jest tablicą

Operator typeOf w JavaScript nie rozróżnia tablicy od jakiegokolwiek inne obiektu.

console.log(typeof []); // outputs: object
console.log(typeof {}); // outputs: object

Jak więc sprawdzić czy coś jest tablicą? Można sprawdzić konstruktor danego obiektu. Jeśli konstruktor ma wartość Array to jest to tablicą.

function is_this_array (value) {
    return value && typeof value === 'object' && value.constructor === Array;
}

console.log(is_this_array([])); // outputs: true
console.log(is_this_array({})); // outputs: false

Inny sposób polegałby na użyciu metody toString()

function is_this_array2 (value) {
    return Object.prototype.toString.apply(value) === '[object Array]';
}

console.log(is_this_array2 ([])); // outputs: true
console.log(is_this_array2 ({})); // outputs: false

Pętle for…in

Na koniec warto omówić kwestie już omówioną w poprzednim wpisie czyli kwestie na temat pętly for.

Pętla for przechodzi po właściwościach, metodach danego obiektu.  Nie masz także 100% gwarancji czy ta pętla przejdzie po elementach tego obiektu we właściwej kolejności. Równie dobrze można by powiedzieć, że jest ona losowa.

Czy coś jeszcze na temat tablic

Mam nadziej, że ten wpis wyjaśnił tobie pewne nieścisłość związane z tablicami w JavaScript.

Pułapki JavaScript tutaj się nie kończą.