Tablice

Tablica to uporządkowany zbiór wartości. Wartości w tablicy nazywane są elementami, a każdy element charakteryzuje się numeryczną pozycją w tablicy, co nazywa się indeksem. Tablice w JavaScript nie mają typu: elementy tablicy mogą być dowolnego typu, a różne elementy tej samej tablicy mogą mieć różne typy. Elementy tablicy mogą być nawet obiektami lub innymi tablicami, co pozwala na tworzenie złożone struktury dane, takie jak tablice obiektów i tablice tablic.

Indeksy tablic JavaScript są liczone od zera i wykorzystują 32-bitowe liczby całkowite - pierwszy element tablicy ma indeks 0. Tablice w JavaScript są dynamiczne: mogą rosnąć i zmniejszać się w zależności od potrzeb; nie ma potrzeby deklarowania stałych rozmiarów tablic podczas ich tworzenia ani ponownego przydzielania pamięci, gdy zmieniają się ich rozmiary.

Tablice w JavaScript są wyspecjalizowaną formą obiektów, a indeksy tablic oznaczają niewiele więcej niż tylko nazwy właściwości, które przypadkowo są liczbami całkowitymi.

Tworzenie tablic

Najłatwiejszym sposobem utworzenia tablicy jest użycie literału, który jest prostą listą elementów tablicy oddzielonych przecinkami, ujętych w nawiasy kwadratowe. Wartości w literale tablicowym nie muszą być stałymi – mogą to być dowolne wyrażenia, w tym literały obiektowe:

zmienna pusta = ; // Pusta tablica var number = ; // Tablica z pięcioma elementami numerycznymi var misc = [ 1.1, true, "a", ]; // 3 elementy różne rodzaje+ końcowy przecinek var base = 1024; tabela zmienna = ; // Tablica ze zmiennymi var arrObj = [, ]; // Wewnątrz 2 tablice zawierające obiekty

Składnia literału tablicy pozwala na opcjonalny końcowy przecinek, tj. literał [,] dopasowuje tablicę zawierającą dwa elementy, a nie trzy.

Innym sposobem utworzenia tablicy jest wywołanie konstruktora Array(). Konstruktor można wywołać na trzy różne sposoby:

Konstruktor wywołania bez argumentów:

Var arr = nowa tablica();

W takim przypadku utworzona zostanie pusta tablica odpowiadająca literałowi.

Wywołaj konstruktor z pojedynczym argumentem liczbowym określającym długość tablicy:

Var arr = nowa tablica (10);

W tym przypadku utworzona zostanie pusta tablica o podanej długości. Tej formy wywołania konstruktora Array() można użyć do wstępnego przydzielenia pamięci dla tablicy, jeśli liczba jej elementów jest znana z góry. Należy pamiętać, że nie przechowuje to żadnych wartości w tablicy.

Jawnie określ w wywołaniu konstruktora wartości pierwszych dwóch lub więcej elementów tablicy lub jednego elementu nienumerycznego:

Var arr = nowa tablica(5, 4, 3, 2, 1, „test”);

W tym przypadku argumenty konstruktora stają się wartościami elementów nowej tablicy. Używanie literałów tablicowych jest prawie zawsze łatwiejsze niż użycie konstruktora Array() w ten sposób.

Odczyt i zapis elementów tablicy

Dostęp do elementów tablicy można uzyskać za pomocą metody . Po lewej stronie nawiasów musi znajdować się odwołanie do tablicy. Wewnątrz nawiasów musi znajdować się dowolne wyrażenie zwracające nieujemną wartość całkowitą. Ta składnia jest odpowiednia zarówno do odczytu, jak i zapisu wartości elementu tablicy. Dlatego wszystkie poniższe instrukcje JavaScript są prawidłowe:

// Utwórz tablicę z jednym elementem var arr = ["świat"]; // Przeczytaj element 0 var wartość = arr; // Zapisz wartość w elemencie 1 arr = 3,14; // Zapisz wartość do elementu 2 i = 2; tablica[i] = 3; // Zapisz wartość w elemencie 3 arr = "cześć"; // Przeczytaj elementy 0 i 2, zapisz wartość w elemencie 3 arr] = arr;

Przypomnę, że tablice są wyspecjalizowanym rodzajem obiektów. Nawiasy kwadratowe używane do uzyskiwania dostępu do elementów tablicy działają dokładnie tak samo, jak nawiasy kwadratowe używane do uzyskiwania dostępu do właściwości obiektu. Interpreter JavaScript konwertuje indeksy liczbowe w nawiasach na ciągi znaków - indeks 1 staje się ciągiem „1” - a następnie używa ciągów jako nazw właściwości.

Nie ma nic specjalnego w konwertowaniu indeksów numerycznych na ciągi znaków: to samo można zrobić ze zwykłymi obiektami:

var obj = (); // Utwórz prosty obiekt obj = "one"; // Indeksuj go liczbami całkowitymi

Cechą tablic jest to, że w przypadku używania nazw właściwości, które są nieujemnymi liczbami całkowitymi, tablice automatycznie określają wartość właściwości długości. Na przykład tablica arr została utworzona powyżej z jednym elementem. Następnie przypisał wartości swoim elementom o indeksach 1, 2 i 3. W wyniku tych operacji wartość właściwości długości tablicy zmieniła się na 4.

Należy wyraźnie rozróżnić indeksy tablic od nazw właściwości obiektów. Wszystkie indeksy są nazwami właściwości, ale indeksami są tylko właściwości, których nazwy są reprezentowane przez liczby całkowite. Wszystkie tablice są obiektami i można do nich dodawać właściwości o dowolnych nazwach. Jeśli jednak dotkniesz właściwości będących indeksami tablicy, tablice zareagują, aktualizując wartość właściwości długości, stosownie do potrzeb.

Należy pamiętać, że jako indeksów tablicy można używać liczb ujemnych i niecałkowitych. W tym przypadku liczby są konwertowane na ciągi znaków, które służą jako nazwy właściwości.

Dodawanie i usuwanie elementów szyku

Widzieliśmy już, że najłatwiejszym sposobem dodania elementów do tablicy jest przypisanie wartości nowym indeksom. Możesz także użyć metody push(), aby dodać jeden lub więcej elementów na końcu tablicy:

Var arr = ; // Utwórz pustą tablicę arr.push("zero"); // Dodaj wartość do końca arr.push("jeden",2); // Dodaj jeszcze dwie wartości

Możesz także dodać element na końcu tablicy, przypisując wartość do elementu arr. Możesz użyć metody unshift(), aby wstawić element na początku tablicy, co spowoduje przesunięcie istniejących elementów tablicy na wyższe pozycje indeksu.

Elementy tablicy można usuwać za pomocą operatora usuwania, podobnie jak zwykłe właściwości obiektu:

Var arr = ; usuń tablicę; 2 w arr; // false, indeks tablicy 2 nie jest zdefiniowany arr.length; // 3: Operator usuwania nie zmienia właściwości długości tablicy

Usunięcie elementu jest podobne (choć nieco inne) do przypisania elementu niezdefiniowanego do tego elementu. Należy zauważyć, że zastosowanie operatora usuwania do elementu tablicy nie zmienia wartości właściwości długości ani nie przesuwa elementów o wyższych indeksach w dół, aby wypełnić pustkę pozostawioną przez usuwany element.

Możliwe jest również usunięcie elementów na końcu tablicy poprzez proste przypisanie nowej wartości do właściwości długości. Tablice posiadają metodę pop() (przeciwieństwo push()), która zmniejsza długość tablicy o 1 i zwraca wartość usuniętego elementu. Istnieje również metoda shift() (przeciwieństwo unshift()), która usuwa element z początku tablicy. W przeciwieństwie do operatora usuwania, metoda shift() przesuwa wszystkie elementy w dół do pozycji poniżej ich bieżących indeksów.

Na koniec istnieje uniwersalna metoda splice(), która umożliwia wstawianie, usuwanie i zastępowanie elementów tablicy. Zmienia wartość właściwości długości i w razie potrzeby przesuwa elementy tablicy o niższych lub wyższych indeksach. Wszystkie te metody omówimy nieco później.

Tablice wielowymiarowe

JavaScript nie obsługuje „prawdziwych” tablic wielowymiarowych, ale fajnie jest je symulować za pomocą tablic tablic. Aby uzyskać dostęp do elementu danych w tablicy tablic, wystarczy dwukrotnie użyć operatora.

Załóżmy na przykład, że macierz zmiennych jest tablicą tablic liczb. Każdy element macierzy[x] jest tablicą liczb. Aby uzyskać dostęp do określonej liczby w tablicy, możesz użyć wyrażenia matrix[x][y]. Poniżej znajduje się konkretny przykład użycia tablicy dwuwymiarowej jako tabliczki mnożenia:

// Utwórz tablicę wielowymiarową var table = new Array(10); // Tabela zawiera 10 wierszy for(var i = 0; i

Metody klas tablicowych

Standard ECMAScript 3 definiuje szereg wygodnych funkcji do pracy z tablicami w ramach Array.prototype , które są dostępne jako metody dowolnej tablicy. Metody te zostaną zaprezentowane w kolejnych podrozdziałach.

metoda Join().

Metoda Array.join() konwertuje wszystkie elementy tablicy na ciągi znaków, łączy je i zwraca wynikowy ciąg. Jako opcjonalny argument metody możesz przekazać ciąg znaków, który będzie używany do oddzielania elementów w ciągu wynikowym. Jeśli nie określono ciągu rozdzielającego, używany jest przecinek. Na przykład następujący fragment skutkuje ciągiem „1,2,3”:

Var arr = ; arr.join(); // "1,2,3" arr.join("-"); // „1-2-3”

metoda odwrotna().

Metoda Array.reverse() odwraca kolejność elementów w tablicy i zwraca tablicę o zmienionej kolejności. Permutacja jest wykonywana bezpośrednio na oryginalnej tablicy, tj. ta metoda nie tworzy nowej tablicy ze zmienioną kolejnością elementów, ale zmienia ich kolejność w już istniejącej tablicy. Na przykład poniższy fragment, w którym zastosowano metody Reverse() i Join(), daje w wyniku ciąg „3,2,1”:

Var arr = ; arr.reverse().join(); // "3,2,1"

metoda sortowania().

Metoda Array.sort() sortuje elementy oryginalnej tablicy i zwraca posortowaną tablicę. Jeżeli metoda sort() zostanie wywołana bez argumentów, sortowanie zostanie wykonane w kolejności alfabetycznej (w razie potrzeby elementy są tymczasowo konwertowane na ciągi znaków w celu porównania). Niezdefiniowane elementy są przenoszone na koniec tablicy.

Aby posortować w innej kolejności niż alfabetyczna, możesz przekazać funkcję porównawczą jako argument do metody sort(). Ta funkcja określa, który z jej dwóch argumentów powinien znajdować się jako pierwszy na posortowanej liście. Jeśli pierwszy argument musi wystąpić przed drugim, funkcja porównawcza musi zwrócić liczbę ujemną. Jeżeli pierwszy argument ma następować po drugim w posortowanej tablicy, wówczas funkcja musi zwrócić liczbę większą od zera. A jeśli dwie wartości są równoważne (tzn. ich kolejność nie ma znaczenia), funkcja porównawcza powinna zwrócić 0:

Var arr = ; arr.sort(); // Kolejność alfabetyczna: 1111, 222, 33, 4 arr.sort(function(a,b) ( // Kolejność liczbowa: 4, 33, 222, 1111 return a-b; // Zwraca wartość 0 // w zależności od kolejności sortowania a oraz b)); // Sortuj wstecz, od największego do najmniejszego arr.sort(function(a,b) (return b-a));

Zwróć uwagę, jak wygodne jest użycie nienazwanej funkcji w tym fragmencie. Funkcja porównania jest używana tylko tutaj, więc nie ma potrzeby nadawania jej nazwy.

metoda concate().

Metoda Array.concat() tworzy i zwraca nową tablicę zawierającą elementy oryginalnej tablicy, na której została wywołana metoda concat() oraz wartości ewentualnych argumentów przekazanych do metody concat(). Jeśli którykolwiek z tych argumentów sam jest tablicą, jego elementy są dodawane do zwróconej tablicy. Należy jednak zauważyć, że nie ma mowy o transformacji rekurencyjnej tablicy tablic w tablicę jednowymiarową. Metoda concat() nie modyfikuje oryginalnej tablicy. Poniżej kilka przykładów:

Var arr = ; arr.concat(4, 5); // Zwróć arr.concat(); // Zwraca arr.concat(,) // Zwraca arr.concat(4, ]) // Zwraca ]

metoda plasterka().

Metoda Array.slice() zwraca wycinek lub podtablicę określonej tablicy. Dwa argumenty metody definiują początek i koniec zwracanego fragmentu. Zwrócona tablica zawiera element, którego numer jest określony w pierwszym argumencie, oraz wszystkie kolejne elementy aż do (ale nie włączając) elementu, którego numer jest określony w drugim argumencie.

Jeśli podano tylko jeden argument, zwrócona tablica zawiera wszystkie elementy od pozycji początkowej do końca tablicy. Jeśli którykolwiek z argumentów jest ujemny, określa numer elementu względem końca tablicy. Zatem argument -1 odpowiada ostatniemu elementowi tablicy, a argument -3 odpowiada trzeciemu elementowi tablicy od końca. Oto kilka przykładów:

Var arr = ; arr plasterek (0,3); // Zwraca arr.slice(3); // Zwraca tablicę.slice(1,-1); // Zwraca arr.slice(-3,-2); // Powrót

metoda splice().

Metoda Array.splice() to metoda ogólna, która wstawia lub usuwa elementy tablicy. W przeciwieństwie do metod plasterek() i concat() metoda splice() modyfikuje oryginalną tablicę, na której została wywołana. Należy zauważyć, że metody splice() i plasterek() mają bardzo podobne nazwy, ale wykonują zupełnie inne operacje.

Metoda splice() może usuwać elementy z tablicy, wstawiać nowe elementy lub wykonywać obie te czynności jednocześnie. Elementy tablicy są przesuwane w razie potrzeby, aby utworzyć ciągłą sekwencję po wstawieniu lub usunięciu.

Pierwszy argument metody splice() określa pozycję w tablicy, z której zostanie wykonane wstawienie i/lub usunięcie. Drugi argument określa liczbę elementów, które należy usunąć (wyciąć) z tablicy. Jeśli drugi argument zostanie pominięty, wszystkie elementy tablicy od określonej tablicy do końca tablicy zostaną usunięte. Metoda splice() zwraca tablicę usuniętych elementów lub (jeśli nie usunięto żadnych elementów) pustą tablicę.

Pierwsze dwa argumenty metody splice() określają elementy tablicy, które mają zostać usunięte. Po tych argumentach może następować dowolna liczba opcjonalnych argumentów, które określają elementy, które mają zostać wstawione do tablicy, zaczynając od pozycji określonej w pierwszym argumencie.

Var arr = ; arr.splice(4); // Zwraca, arr = arr.splice(1,2); // Zwraca, arr = arr.splice(1,1); // Zwroty ; tablica = tablica = ; arr.splice(2,0,"a","b"); // Zwroty ; arr=

metody push() i pop().

Metody push() i pop() umożliwiają traktowanie tablic jak stosów. Metoda push() dodaje jeden lub więcej nowych elementów na końcu tablicy i zwraca jej nową długość. Metoda pop() wykonuje operację odwrotną - usuwa ostatni element tablicy, zmniejsza długość tablicy i zwraca usuniętą wartość. Należy zauważyć, że obie te metody modyfikują oryginalną tablicę, a nie tworzą jej zmodyfikowaną kopię.

metody unshift() i shift().

Metody unshift() i shift() zachowują się podobnie jak push() i pop(), z tą różnicą, że wstawiają i usuwają elementy na początku tablicy, a nie na końcu. Metoda unshift() przesuwa istniejące elementy w kierunku wyższych indeksów, aby zwolnić miejsce, dodaje element lub elementy na początek tablicy i zwraca nową długość tablicy. Metoda shift() usuwa i zwraca pierwszy element tablicy, przesuwając wszystkie kolejne elementy o jedną pozycję w dół, aby wypełnić miejsce wolne na początku tablicy.

Pozdrawiam wszystkich zainteresowanych taką tematyką jak tablice wielowymiarowe JavaScript i sortowanie. W aktualnej publikacji postaram się szczegółowo omówić ten temat.

Dlatego po przeczytaniu artykułu dowiesz się, dlaczego tablice wielowymiarowe są wykorzystywane w aplikacjach internetowych, w jaki sposób są tworzone oraz jak można nimi zarządzać i sortować. Zacznijmy się uczyć!

Jak powstają tablice wielowymiarowe i do czego służą?

Na początek warto przypomnieć sobie, jak tworzona jest zwykła tablica jednowymiarowa.

tablica =

Pamiętaj teraz, że tablica wielowymiarowa jest tablicą tablic. Zgadzam się, brzmi to jak tautologia. Przeczytaj jednak definicję jeszcze raz. Rzeczywiście, tablica wielowymiarowa składa się z pewnej liczby zagnieżdżonych obiektów.

Rozważmy następującą sytuację. Na początku danej gry użytkownik wprowadza swoje imię i nazwisko, a po jej zakończeniu na ekranie wyświetla się tabela rankingowa z nazwiskami graczy i ich rekordami.

Oczywiste jest, że takie informacje są przechowywane w bazie danych. Ale kiedy wyciągniemy go z bazy danych, otrzymamy tablicę wielowymiarową. W końcu każda podtablica przechowuje login gracza i liczbę zdobytych punktów.

Wszystko będzie wyglądać tak:

var wyniki = [ [„Markus”, 333], [„Natasza”, 211], [„Aleks”, 124] ];

Jak widać, informacje mogą być przechowywane heterogenicznie. Mogą to być ciągi znaków, liczby, a nawet . Jest to możliwe, ponieważ tablice in nie mają typu.

W tym przypadku dostęp do elementów następuje poprzez podwójny operator.

Aby skonsolidować materiał, przeanalizuj mały program.

Wartość wyników =

var wyniki = [ [„Markus”, 333], [„Natasza”, 211], [„Aleks”, 124] ]; document.getElementById("demo").innerHTML = wyniki;

Tablice są dość wygodnym sposobem przechowywania uporządkowanych złożonych danych podczas przetwarzania. Ponadto praca z nimi jest bardzo wygodna, a jednocześnie prędkość ich przetwarzania jest dość wysoka.

Sposoby sortowania danych

W przypadku tablic JavaScript ma wbudowaną metodę o nazwie sort() . To narzędzie bardzo elastyczny. A teraz wyjaśnię dlaczego.

Jeśli użyjesz metody bez parametrów, wówczas automatycznie posortuje ona podtablice według pierwszego elementu w kolejności alfabetycznej. Tak więc, wywołując wyniki. sort() analizowany obiekt będzie wyglądał następująco:

Aleksiej, 124

Markusa, 333

Natasza, 211

A jeśli zamienisz elementy w każdej zagnieżdżonej tablicy, otrzymasz:

124, Aleksiej

211, Natasza

333, Marek

W tym przypadku dla porównania wszystkie elementy są tymczasowo konwertowane na ciągi znaków.

Jeśli, aby rozwiązać niektóre Szczególnym zadaniem potrzebujesz funkcji sortującej elementy w niestandardowy sposób, możesz napisać to sam i przekazać jako parametr do sort() . Jednocześnie należy to wziąć pod uwagę funkcja niestandardowa powinien zwrócić:

• liczba dodatnia (zwykle wybierz 1), jeśli przy porównywaniu pierwszy określony element następuje po drugim;
• liczba ujemna (zwykle -1), jeśli drugi wybrany element powinien następować po pierwszym;
• null, jeśli dwie testowane wartości są równe.

Jako przykład posortujmy tablicę wyników początkowych według wyniku. Wyniki zostaną posortowane od największego do najmniejszego. Można to zrobić na dwa sposoby.

W pierwszej opcji zmieniłem logikę sortowania, tj. w sytuacji, gdy konieczne jest zwrócenie liczby dodatniej, zwracam ujemną i odwrotnie.

Tabela rekordów:

var wyniki = [ [„Markus”, 333], [„Natasza”, 211], [„Aleks”, 124] ]; wyniki.sort(Sortowanie rekordów); funkcja RecordSort(a, b) ( if (a > b) zwraca -1; w przeciwnym razie if (a< b) return 1; else return 0; } for(var i=0; i b) return 1; else if (a < b) return -1; else return 0; }

funkcja RecordSort(a, b) ( if (a > b) zwróć 1; w przeciwnym razie if (a< b) return -1; else return 0; }

A potem dodaj powyższą metodę.

Wniosek wyciąga się w podobny sposób.

Chciałbym zwrócić Waszą uwagę na jedno ważny punkt. Podczas korzystania z tych funkcji wszystkie zmiany zachodzą w tablicy, do której je zastosujesz. Jeśli więc chcesz zachować oryginalną formę danych, utwórz kopię, a następnie edytuj ją.

Cóż, mówiłem o tablicach wielowymiarowych i ich sortowaniu. Jeśli spodobał Ci się artykuł, zasubskrybuj bloga i przeczytaj inne, równie ciekawe publikacje. Będę wdzięczny za reposty. Do zobaczenia wkrótce!

PA pa!

Z poważaniem, Roman Chueshov

W tym artykule przyjrzymy się standardowym tablicom JavaScript z indeksami numerycznymi. Tablice deklaruje się za pomocą nawiasów kwadratowych:

var owoce = ["Jabłko", "Pomarańcza", "Osioł"]

Aby wyodrębnić element, umieść jego indeks w nawiasach kwadratowych. Pierwszy indeks 0:

var owoce = ["Jabłko", "Pomarańcza", "Osioł"] alert(owoce) alert(owoce) alert(owoce)

Możemy również uzyskać długość tablicy JavaScript:

var owoce = ["Jabłko", "Pomarańcza", "Osioł"] alert(długość owoców)

Ups! Stworzyliśmy tablicę z dwoma owocami i osłem. Teraz musimy usunąć osła.

metody pop i push

Metoda pop w JavaScript usuwa element tablicy i zwraca go.

Poniższy przykład pokazuje, jak „Donkey” jest pobierany z tablicy:

var owoce = ["Apple", "Orange", "Osioł"] alert("Usuwam "+fruits.pop()) // Teraz mamy tylko ["Apple", "Orange"] alert("Teraz rozmiar tablicy: "+fruits.length) // usunięto osła

Zauważ, że pop modyfikuje samą tablicę.

Odpowiednikiem Popu jest metoda Push, która dodaje element do tablicy. Na przykład zapomnieliśmy dodać brzoskwinię:

var owoce = ["Jabłko", "Pomarańcza"] owoce.push("Brzoskwinia"); // teraz mamy ["Jabłko", "Pomarańcza", "Brzoskwinia"] alert("Ostatnia pozycja:"+owoce)

Utwórz tablicę stylów z elementami „Jazz”, „Blues”;

Dodaj wartość „Rock'n'Roll”;

Zastąp drugą wartość od końca wartością „Klasyczny”. Powinieneś otrzymać tablicę: „Jazz”, „Classic”, „Rock'n'Roll”. Kod powinien działać dla dowolnej długości tablicy;

Wyodrębnij ostatnią wartość z tablicy i wyświetl ją za pomocą alertu.

Rozwiązanie

// 1 var style = ["Jazz", "Bluez"] // 2 style.push("Rock"n"Roll") // lub: style = "Rock"n"Roll" // 3 style = "Klasyczny " // 4 alert(styles.pop())

metody przesunięcia/przywrócenia przesunięcia

Metody shift/unshift działają na końcu tablicy, ale możesz także użyć shift, aby przesunąć elementy w górę (pierwsza wartość tablicy jest usuwana wraz z przesunięciem elementu). Metoda unshift pozwala JavaScriptowi dodać element do tablicy od końca:

var owoce = ["Jabłko", "Pomarańcza"] var jabłko = owoce.shift() // teraz mamy tylko ["Pomarańcza"] owoce.unshift("Cytryna") // teraz mamy ["Cytryna", " Pomarańczowy"] alert(długość owoców) // 2

Zarówno shift, jak i unshift mogą działać na wielu elementach jednocześnie:

var owoce = ["Jabłko"] owoce.push("Pomarańcza", "Brzoskwinia") Fruit.unshift("Ananas","Cytryna") // tablica wygląda teraz tak: ["Ananas", "Cytryna", " Jabłko”, „Pomarańcza”, „Brzoskwinia”]

Zadanie do samorealizacji

Napisz kod ostrzegający o losowej wartości z tablicy arr :

var arr = ["Śliwka", "Pomarańcza", "Osioł", "Marchewka", "JavaScript"]

Uwaga: Kod umożliwiający uzyskanie losowej liczby od wartości minimalnej do maksymalnej (włącznie) jest następujący:

var rand = min + Math.floor(Math.random()*(max+1-min))

Rozwiązanie

Musimy wyodrębnić Liczba losowa od 0 do arr.length-1 (włącznie):

var arr = ["Śliwka","Pomarańcza","Osioł","Marchew","JavaScript"] var Rand = Math.floor(Math.random()*arr.length) alert(arr)

Iteracja po tablicy

W JavaScript iteracja po tablicy odbywa się za pomocą pętli for:

var owoce = ["Ananas", "Cytryna", "Jabłko", "Pomarańcza", "Brzoskwinia"] for(var i=0; i=0 sprawdzaj szybciej niż i. Co w JavaScript przyspiesza przeszukiwanie tablic.

Użycie długości do przycięcia tablicy

Używając właściwości długości, możesz przyciąć tablicę w następujący sposób:

Ty ustawiasz długość, a przeglądarka przycina tablicę.

Tablica jest obiektem, co implikuje

W rzeczywistości w JavaScript tablica jest dopełnionym obiektem instalacja automatyczna długość i metody specjalne.

Różni się to od koncepcji stosowanej w innych językach, gdzie tablice stanowią ciągły segment pamięci. Różni się to także od połączonej listy opartej na kolejce lub stosie.

Nienumeryczne klucze tablicy

Klucze są liczbami, ale mogą mieć dowolne nazwy:

arr = arr = 5 arr.prop = 10 // nie rób tego

W JavaScript tablice są tabelami skrótów, co ma zalety w zakresie wydajności, ale także pewne wady.

Na przykład push/pop działa tylko na najbardziej zewnętrznych elementach tablicy, więc są one niewiarygodnie szybkie.

push działa tylko z końcem:

var arr = ["Mój", "tablica"] arr.push("coś") alert(arr) // string "tablica"

Metody shift/unshift są powolne, ponieważ wymagają przenumerowania całej tablicy. Metoda łączenia może również powodować zmianę numeracji:

Zatem shift/unshift są wolniejsze niż push/pop. Im większa tablica, tym dłużej JavaScript zajmuje jej sortowanie.

Zadanie do samorealizacji

Jaki będzie wynik? Dlaczego?

arr = ["a", "b"] arr.push(funkcja() ( alert(to) )) arr() // ?

Rozwiązanie

Ponieważ tablice są obiektami, arr .. w rzeczywistości jest wywołaniem metody obiektu takiego jak obj metoda:

arr() // to samo co arr() // składniowo błędne, ale koncepcyjnie to samo: arr.2() // przepisane w tym samym stylu co obj.method() this = arr w tym przypadku jest przekazywane do funkcji, więc drukowana jest zawartość arr. arr = ["a", "b"] arr.push(function() ( alert(this) )) arr() // "a","b",funkcja

Tablice rzadkie, opis długości

Właściwość długości pozwala uzyskać nie rozmiar tablicy w JavaScript, ale ostatni indeks+ 1 . To ważne, jeśli rozmawiamy o rzadkich tablicach z „przerwami” w indeksach.

W poniższym przykładzie dodamy dwa elementy do pustych owoców, ale wartość długości pozostanie 100:

var Fruits = // pusta tablica Fruits = "Peach" Fruits = "Apple" alert(fruits.length) // 100 (ale w tablicy znajdują się tylko 2 elementy)

Jeśli spróbujesz wyprowadzić rzadką tablicę, przeglądarka zwróci wartości brakujących indeksów jako puste elementy:

var Fruits = // pusta tablica Fruits = "Peach" Fruits = "Apple" alert(fruits) // ,Peach,Apple (lub coś w tym rodzaju)

Ale tablica jest obiektem z dwoma kluczami. Brakujące wartości nie zajmują miejsca.

Tablice rzadkie zachowują się dziwnie, gdy stosowane są do nich metody tablicowe. Nie mają pojęcia, że ​​brakuje indeksów:

var Fruits = Fruits = "Peach" Fruits = "Apple" alert(fruits.pop()) // pop "Apple" (w indeksie 9) alert(fruits.pop()) // pop not dany element(w indeksie 8)

Staraj się unikać rzadkich tablic. W każdym razie ich metody nie będą działać normalnie. Zamiast tego użyj Object .

Usuwanie z tablicy

Ponieważ wiemy, że tablice są obiektami, możemy więc użyć metody usuwania, aby usunąć wartość:

var arr = ["Idź", "do", "dom"] usuń arr // teraz arr = ["Idź", niezdefiniowany, "dom"] alert(arr) // nie ustawiono

Widać, że wartość została usunięta, ale nie w taki sposób, w jaki byśmy chcieli, ponieważ tablica zawiera nieustawiony element.

Operator usuwania usuwa parę klucz-wartość i to wszystko. Naturalnie, ponieważ tablica jest tylko skrótem, pozycja usuniętego elementu staje się niezdefiniowana.

Najczęściej musimy usunąć element bez pozostawiania „dziur” pomiędzy indeksami. Jest jeszcze jedna metoda, która nam w tym pomoże.

metoda splotu

Metoda splice może usuwać elementy i zastępować je w wielowymiarowych tablicach JavaScript. Jego składnia jest następująca:

arr.splice(indeks, usuńCount[, elem1, ..., elemN])

Usuwa element DeleteCount, zaczynając od indeksu, a następnie wstawia w jego miejsce elem1, ..., elemN.

Spójrzmy na kilka przykładów:

var arr = ["Idź", "do", "home"] arr.splice(1, 1) // usuń 1 element zaczynając od indeksu 1 alert(arr.join(",")) // ["Idź " , „dom”] (usunięto 1 element)

Możesz więc użyć splotu, aby usunąć jeden element z tablicy. Numery elementów tablicy są przesuwane, aby wypełnić lukę:

var arr = ["Idź", "do", "dom"] arr.splice(0, 1) // usuń 1 element zaczynając od indeksu 0 alert(arr) // "do" stało się pierwszym elementem

Poniższy przykład pokazuje, jak zastąpić elementy:

Metoda splice zwraca tablicę usuniętych elementów:

var arr = ["Idź", "do", "dom", "teraz"]; // usuń pierwsze 2 elementy var usunięte = arr.splice(0, 2) alert(usunięte) // "Idź", "do" =0; i--) ( if (c[i] == cls) c.splice(i,1) ) elem.className = c.join(" ") ) var obj = ( nazwa klasy: "otwórz menu" ) usuńKlasę(obj , „otwórz”) usuńKlasę(obj, „blabla”) alert(obj.className) // menu

W powyższym przykładzie zmienna c jest ustawiona na początku pętli, a i na ostatni indeks.

Sama pętla wykonywana jest w odwrotnym kierunku i kończy się warunkiem i>=0 . Dzieje się tak, ponieważ i>=0 jest sprawdzane szybciej niż i. Co przyspiesza wyszukiwanie właściwości w c .

metoda plasterków

Możesz wyodrębnić część tablicy za pomocą metody plasterek(begin[, end]): var arr = ["Dlaczego", "naucz się", "JavaScript"]; var arr2 = arr.slice(0,2) // pobiera 2 elementy, zaczynając od 0 alert(arr2.join(", ")) // "Dlaczego, ucz się"

Należy pamiętać, że ta metoda nie zmienia liczby elementów tablicy w JavaScript, ale kopiuje jej część.

Możesz pominąć drugi argument, aby wszystkie elementy zaczynały się od określonego indeksu:

var arr = ["Dlaczego", "naucz się", "JavaScript"]; var arr2 = arr.slice(1) // akceptuje wszystkie elementy począwszy od 1 alert(arr2.join(", ")) // "naucz się, JavaScript"

Metoda obsługuje indeksy ujemne, podobnie jak String#slice .

metoda odwrotna

Inną przydatną metodą jest metoda odwrotna. Załóżmy, że chcę pobrać ostatnią część domeny, np. „com” z „moja.witryna.com”. Oto jak to zrobić:

var domena = "moja.witryna.com" var last = domena.split(".").reverse() alert(last)

Należy zauważyć, że tablice JavaScript obsługują złożoną składnię (reverse()) służącą do wywoływania metody, a następnie wyodrębniania elementu z wynikowej tablicy.

Możesz tworzyć dłuższe wywołania, takie jak Reverse() 0] arr.sort() alert(arr) // 1, 15, 2

Uruchom powyższy kod. Otrzymasz zamówienie 1, 15, 2. Dzieje się tak, ponieważ metoda konwertuje wszystko na ciąg znaków i domyślnie stosuje porządek leksykograficzny.

• I. Iteracja po tablicach rzeczywistych
• forEach i metody pokrewne
• dla pętli
• Właściwe użycie pętli for...in
• pętla for...of (niejawne użycie iteratora)
• Jawne użycie iteratora
• Korzystanie z metod iteracji tablicy rzeczywistej
• Konwertuj na rzeczywistą tablicę
• Uwaga dotycząca obiektów wykonawczych

I. Iteracja po tablicach rzeczywistych Obecnie istnieją trzy sposoby iteracji po elementach prawdziwej tablicy:

metoda Array.prototype.forEach ;

klasyczna pętla for;

„Dobrze uformowana” pętla for...in.

Ponadto wkrótce, wraz z pojawieniem się nowego standardu ECMAScript 6 (ES 6), spodziewane są jeszcze dwie metody:

for...of pętla (niejawne użycie iteratora);

jawne użycie iteratora.

1. Metoda forEach i metody z nią związane Jeżeli Twój projekt ma obsługiwać funkcje standardu ECMAScript 5 (ES5), możesz skorzystać z jednej z jego innowacji – metody forEach.

Przykład użycia:
var a = ["a", "b", "c"]; a.forEach(funkcja(wpis) ( konsola.log(wpis); ));
Ogólnie rzecz biorąc, użycie forEach wymaga włączenia biblioteki emulacyjnej es5-shim dla przeglądarek, które nie obsługują natywnie tej metody. Należą do nich IE 8 i nowsze wersje wczesne wersje które są w użyciu do dziś.

Zaletą forEach jest to, że nie ma potrzeby deklarowania zmiennych lokalnych do przechowywania indeksu i wartości bieżącego elementu tablicy, ponieważ są one automatycznie przekazywane do funkcji wywołania zwrotnego jako argumenty.

Jeśli martwisz się możliwym kosztem wywołania zwrotnego dla każdego elementu, nie martw się i przeczytaj to.

ForEach został zaprojektowany do iteracji po wszystkich elementach tablicy, ale oprócz tego ES5 udostępnia kilka bardziej przydatnych metod iteracji po wszystkich lub niektórych elementach, a także robienia czegoś z nimi:

• Every - zwraca wartość true, jeśli dla każdego elementu tablicy wywołanie zwrotne zwraca wartość, która ma wartość true.
• Some - zwraca wartość true, jeśli dla co najmniej jednego elementu tablicy wywołanie zwrotne zwraca wartość, która ma wartość true.
• filter - tworzy nową tablicę zawierającą te elementy oryginalnej tablicy, dla których wywołanie zwrotne zwraca wartość true.
• map - tworzy nową tablicę składającą się z wartości zwróconych przez wywołanie zwrotne.
• redukuj - Redukuje tablicę do pojedynczej wartości, stosując wywołanie zwrotne do każdego elementu tablicy po kolei, zaczynając od pierwszego (może być przydatne do obliczania sumy elementów tablicy i innych funkcji podsumowujących).
• redukcjaRight — działa podobnie jak redukcja, ale iteruje po elementach w odwrotnej kolejności.

2. Pętla for Stary, dobry na skały:

Var a = ["a", "b", "c"]; indeks var; dla (indeks = 0; indeks< a.length; ++index) { console.log(a); }
Jeśli długość tablicy nie zmienia się w całej pętli, a sama pętla należy do fragmentu kodu o krytycznym znaczeniu dla wydajności (co jest mało prawdopodobne), wówczas możesz użyć „bardziej optymalnej” wersji for, która przechowuje długość szyk:

Var a = ["a", "b", "c"]; var indeks, len; for (indeks = 0, dł. = a.długość; indeks< len; ++index) { console.log(a); }
Teoretycznie ten kod powinien działać nieco szybciej niż poprzedni.

Jeśli kolejność iteracji nie jest istotna, możesz pójść jeszcze dalej w zakresie optymalizacji i pozbyć się zmiennej przechowującej długość tablicy, zmieniając kolejność iteracji na odwrotną:

Var a = ["a", "b", "c"]; indeks var; for (index = a.length - 1; indeks >= 0; --index) ( console.log(a); )
Jednak we współczesnych silnikach JavaScript takie gry z optymalizacją zwykle nic nie znaczą.

3. Właściwe użycie pętli for...in Jeśli zalecane jest użycie pętli for...in, należy pamiętać, że iteracja po tablicach nie jest jej przeznaczeniem. Wbrew powszechnemu błędnemu mniemaniu, pętla for...in nie wykonuje iteracji po indeksach tablicy, ale po przeliczalnych właściwościach obiektu.

Jednak w niektórych przypadkach, takich jak iteracja po rzadkich tablicach, for...in może być przydatne, o ile zachowasz środki ostrożności, jak pokazano w poniższym przykładzie:

// a - rzadka tablica var a = ; a = „a”; a = „b”; a = „c”; for (klucz var w a) ( if (a.hasOwnProperty(klucz) && /^0$|^\d*$/.test(klucz) && klucz