3 rzeczy, których nie wiesz o tablicach JavaScript

Tablice są szeroko stosowaną funkcją języków programowania; oni są specjalne zmienne które mogą być używane do przechowywania wielu wartości jednocześnie. Jednak jeśli chodzi o JavaScript, tak łatwo, jak to się uczyć, jest zawsze więcej do odkrycia.

W tym poście przyjrzymy się trzem mniej znanym, ale ważnym funkcjom tablic JavaScript, których wcześniej nie znałeś.

1. Dodaj Własne właściwości do tablic

Jeśli przeszukałbyś Internet w poszukiwaniu dokładnej definicji tablic JavaScript, przekonasz się, że prawie każde źródło bez błędów wyświetli tablicę, jak to jest naprawdę jest, obiekt.

W rzeczywistości prawie wszystko, co mamy do czynienia w JavaScript będzie okazuje się być obiektem. W JavaScript występują dwa rodzaje typów danych, prymitywy i przedmioty, ale prymitywy są zawsze zawinięte w przedmioty.

Tablica, funkcja, data itp. Są predefiniowane obiekty JavaScript które mają wbudowane metody, właściwości i własną znormalizowaną składnię.

Tablice JavaScript mogą mieć trzy różne typy właściwości:

1. Indeksy tablicy są również właściwościami
2. Wbudowane właściwości
3. Własne właściwości możesz dodać sam

Pierwsze dwa są bardziej znane, możesz ich używać każdego dnia, ale zobaczmy je szybko, zanim przejdziemy do tego, jak możesz dodać własną niestandardową właściwość do tablicy.

Indeksy jako właściwości

Tablice JavaScript używają składnia nawiasu kwadratowego, Jak na przykład var ary = ["orange", "apple", "lychee"];.

Wskaźniki elementów tablicy są w zasadzie nieruchomości gdzie nazwy nieruchomości są zawsze nieujemne liczby całkowite.

The para elementów indeksu tablicy jest podobny do para klucz-wartość obiektu.

Indeksy są unikalną cechą obiektu Array, w przeciwieństwie do innych wbudowanych właściwości ustawiona za pomocą samej składni nawiasów, Jak na przykład ary [3] = „brzoskwinia”;.

Wbudowane właściwości

Macierze też wbudowane właściwości, Jak na przykład array.length. The długość właściwość niesie ze sobą wartość całkowitą oznacza długość tablicy.

Ogólnie rzecz biorąc, wbudowane właściwości można często znaleźć we wstępnie zdefiniowanych obiektach JavaScript, takich jak tablice. Wraz z wbudowanymi metodami pomagają dostosuj ogólne obiekty, aby obiekty były dostosowane do różnych potrzeb.

Wbudowane właściwości można uzyskać za pomocą albo object.key albo obiekt ["klucz"] składnia. Więc możesz także pisać ary ["długość"] aby uzyskać dostęp do długości tablicy.

Utwórz niestandardowe właściwości obiektu Array

Porozmawiajmy teraz dodawanie własnych właściwości do tablic. Tablice są predefiniowanymi obiektami, które przechowują różne typy wartości przy różnych indeksach.

Zazwyczaj nie ma potrzeby dodawania niestandardowych właściwości do tablicy; jest to jeden z powodów, dla których początkujący nie są zwykle uczeni o tej funkcji. W rzeczywistości, jeśli chcesz traktować tablicę jak zwykły obiekt, dodając do niej pary klucz-wartość, równie dobrze możesz używaj normalnego obiektu do swoich celów. Ale to nie znaczy, że nie ma specjalne przypadki gdzie można wykorzystać fakt, że tablica jest obiektem, dodając do niej jedną lub więcej niestandardowych właściwości.

Na przykład można dodać niestandardową właściwość do tablicy, która identyfikuje „rodzaj” lub „klasę” jego elementów, jak widać to w poniższym przykładzie.

 var ary = ["orange", "apple", "lychee"]; ary.itemClass = "owoce"; console.log (ary + "to" + ary.itemClass); // „pomarańcza, jabłko, liczi to owoce” 

Zauważ, że niestandardowa właściwość dodana do tablicy to wyliczalny, co oznacza, że ​​zostanie odebrany przez pętle, takie jak dla w komunikat.

2. Przeprowadź pętlę przez elementy macierzy

Prawdopodobnie mówisz „już wiem”, co najprawdopodobniej jest prawdą, wiesz już, jak przejść przez elementy tablicy. Ale prawdą jest również, że powiedzenie „pętla przez elementy tablicy” jest nieco abstrakcyjne, ponieważ to, przez co faktycznie przechodzimy, to indeksy tablicy.

Ponieważ indeksy tablicowe składają się tylko z nieujemne liczby całkowite, iterujemy wartość całkowitą, zazwyczaj zaczynając od zera i kończąc na pełnej długości tablicy, a następnie używamy tej iterowanej wartości, aby uzyskać dostęp do elementu tablicy przy danym indeksie.

Jednak od ECMAScript6 istnieje sposób bezpośrednio zapętlaj wartości tablicy bez zawracania sobie głowy indeksami, a można to zrobić za pomocą za… z pętla.

W tablicy, za… z pętla przejdzie przez elementy tablicy w kolejności indeksów, innymi słowy zajmie się iteracją indeksów i uzyskaniem istniejąca wartość tablicy przy danym indeksie. Ta pętla jest idealna, jeśli chcesz przejść przez wszystkie elementy tablicy i pracować z nimi.

 var ary = ["orange", "apple", "lychee"]; for (let item of ary) console.log (item);  // „pomarańczowy”, „jabłko”, „liczi” 

Dla porównania ze zwykłym dla pętla, otrzymujemy indeksy zamiast wartości jako wyjście.

 var ary = ["orange", "apple", "lychee"]; for (var item = 0; item < ary.length; item++) console.log(item);  // 0, 1, 2

3. Liczba elementów nie jest jego długością

Zazwyczaj, gdy mówimy o długość tablicy, myślimy, że jest to albo liczba wartości, którą przechowuje tablica, albo długość, którą podaliśmy tablicy ręcznie. Jednak w rzeczywistości długość tablicy zależy od największy istniejący indeks wewnątrz tego.

Długość to a bardzo elastyczna nieruchomość. Niezależnie od tego, czy wcześniej ustaliłeś długość tablicy, czy nie, dodajesz wartości do tablicy, jej długość stale wzrasta.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6

W powyższym przykładzie widać, że podałem tablicy tylko jedną wartość w indeksie 5, a długość wynosi 6. Teraz, jeśli uważasz, że dodając wartość w indeksie 5, tablica automatycznie utworzy indeksy od 0 do 4 , następnie twoje założenie jest nieprawidłowe. Naprawdę są brak istniejących indeksów od 0 do 4 w tej tablicy. Możesz to sprawdzić za pomocą w operator.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 console.log (0 inary); // fałszywe

Tablica ary nazywamy to tablica „rzadka”, tablica, w której indeksy nie są tworzone w sposób ciągły, i mieć luki. Przeciwieństwem „rzadkiej” tablicy jest tablica „gęsta” gdzie indeksy występują stale w tablicy, a liczba elementów jest taka sama jak długość.

The długość właściwość jest również w stanie obcięcie tablicy, upewnienie się, że najwyższy indeks obecny w tablicy jest zawsze mniej niż sam, tak jak długość jest domyślnie zawsze większy od najwyższego indeksu.

W poniższym przykładzie możesz zobaczyć, jak tracimy element o indeksie 5, zmniejszając długość z ary szyk.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 ary.length = 2; console.log (ary.length); // 2 console.log (ary [5]); // niezdefiniowany

Dalsze czytanie

• 10 terminów JavaScript, które powinieneś już znać
• 4 nie tak powszechne, ale pomocne instrukcje JavaScript, które powinieneś znać
• Optymalizacja kodu za pomocą JS Hint - narzędzia do tworzenia linków JavaScript