Pułapki w JavaScript : Tablice i komnaty dziwności

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.

Tablice w JavaScript są 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ś ustrzec, 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 indeks 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 nie jest prawdą ponieważ istnieje w niej tylko jeden element.

Dlatego programiści 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ślne 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ą tablicę inaczej musi stworzyć swoją własną funkcję 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 np. 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ą kluczy, 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, jeśli więc 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 pozwala 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 innego 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ć kwestię już omówioną w poprzednim wpisie, czyli kwestie na temat pętli 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ł Ci pewne nieścisłości związane z tablicami w JavaScript.

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