Macierze JavaScript są używane do przechowywania wielu wartości w jednej zmiennej.
Wyświetlanie tablic
W tym tutorialu użyjemy skryptu do wyświetlania tablic wewnątrz <p> elementu o id="demo" :
Przykład
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
Pierwszy wiersz (w skrypcie) tworzy tablicę o nazwie samochody.
Druga linia "znajdzie" element o id="demo" i "displays" tablicy w "innerHTML" z niego .;
Spróbuj sam
Tworzenie tablicy i przypisywać wartości do niego:
Spacje i znaki końca linii nie są ważne. Oświadczenie może obejmować wiele linii:
Nigdy nie umieszczać przecinka po ostatnim elemencie (jak "BMW" ,).
Efekt jest niespójne różnych przeglądarkach.
Czym jest tablica?
Tablica jest specjalną zmienną, która może posiadać więcej niż jedną wartość w danej chwili.
Jeśli masz listę elementów (wykaz nazw samochodów, na przykład), przechowywanie samochodów w pojedynczych zmiennych może wyglądać następująco:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
Jednak to, co jeśli chcesz pętli samochodów i znaleźć konkretny jeden? A co, jeśli nie mieli 3 samochody, ale 300?
Rozwiązaniem jest tablicą!
Tablica może przechowywać wiele wartości pod jedną nazwą, można uzyskać dostęp do wartości, odwołując się do numeru indeksu.
Tworzenie tablicy
Korzystanie z tablicą dosłowne jest najprostszym sposobem utworzenia tablicy JavaScript.
Składnia:
var array-name = [ item1 , item2 , ...];
Przykład:
var cars = ["Saab", "Volvo", "BMW"];Korzystając z nowej JavaScript kluczowe
Poniższy przykład tworzy tablicę i przypisuje wartości do niego:
Te dwa przykłady wyżej robią dokładnie to samo. Nie ma potrzeby stosowania new Array() .
Dla uproszczenia, czytelność i szybkość wykonania, użyj pierwsza (tablica metody dosłowne).
Dostęp do elementów tablicy
Odwołać się do elementu tablicy przez odniesienie donumeru indeksu.
To stwierdzenie ma dostęp wartość pierwszego elementu w samochodach:
var
name = cars[0];
To stwierdzenie modyfikuje pierwszy element w samochodach:
cars[0] = "Opel";
[0] jest pierwszym elementem macierzy. [1] jest drugim. Array indeksy zaczynają się od 0.
Można mieć różne przedmioty w jednej macierzy
Zmienne JavaScript mogą być obiektami. Tablice są specjalne rodzaje obiektów.
W związku z tym, można mieć zmienne różnych typów w tej samej tablicy.
Można mieć obiekty w tablicy. Można mieć funkcje w tablicy. Można mieć tablice w tablicy:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Tablice są obiekty
Tablice są specjalnym typem obiektów. typeof Operator w JavaScripcie zwraca "object" na tablicach.
Ale tablice JavaScript są najlepiej opisać jako tablice.
Tablice używać numbers , aby uzyskać dostęp do jego "elements" . W tym przykładzie, person[0] zwraca John :
Przedmioty używać nazw, aby uzyskać dostęp do jego "członków". W tym przykładzie person.firstName zwraca John :
Właściwości i metody Array
Prawdziwa siła tablice JavaScript są wbudowanej tablicy właściwości i metod:
Przykłady
var x = cars.length;
// The length property returns the number of elements in cars
var y = cars.sort();
// The sort() method sort cars in alphabetical order
Metody tablicowe są ujęte w następnym rozdziale.
Długość nieruchomości
length własnością tablicy zwraca długość tablicy (liczba elementów tablicy).
Przykład
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is 4
Spróbuj sam " Właściwość długość jest zawsze o jeden więcej niż najwyższy indeks tablicy.
Dodawanie elementów macierzy
Najprostszym sposobem, aby dodać nowy element do tablicy jest przy użyciu metody dostarczania:
Przykład
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits Spróbuj sam " Nowy element może być również dodana do matrycy przy użyciu length właściwość:
Przykład
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits Spróbuj sam " OSTRZEŻENIE !
Dodawanie elementów o wysokich indeksach mogą tworzyć niezdefiniowanych "holes" w tablicy:
Przykład
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon"; // adds a new element (Lemon) to fruits Spróbuj sam " Zapętlenie Elements Array
Najlepszym sposobem na pętli tablicy, jest za pomocą "for" pętli:
Przykład
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
Spróbuj sam " asocjacyjnych
Wiele języków programowania obsługują macierze z wymienionych indeksów.
Tablice z wymienionych indeksów nazywane są tablice asocjacyjne (lub skrótów).
JavaScript nie obsługuje macierze z wymienionych indeksów.
W JavaScript, tablice zawsze używać indeksów policzone.
Przykład
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;
// person.length will return 3
var y = person[0];
// person[0] will return "John" Spróbuj sam " OSTRZEŻENIE !!
Jeśli używasz nazwie indeks, JavaScript będzie przedefiniować tablicę do standardowego obiektu.
Po tym, wszystkie metody i właściwości tablicy będzie produkować nieprawidłowych wyników.
Przykład:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will
return 0
var y = person[0];
// person[0] will return undefined Spróbuj sam " Różnica między tablice i obiekty
W JavaScript, tablice używać indeksów policzone.
W JavaScript, obiekty używać nazwanych indeksów.
Tablice są specjalnym rodzajem obiektów, z indeksami policzone.
Kiedy używać tablic. Kiedy używać obiektów.
- JavaScript nie obsługuje tablic asocjacyjnych.
- Należy używać obiektów gdy chcesz nazw elementów za sznurki (tekst).
- Należy użyć tablic kiedy chcesz nazw elementów, aby być liczbami.
Unikać new Array()
Nie ma potrzeby korzystania z wbudowanego konstruktora Array JavaScript w new Array() .
Użyj [] zamiast.
Te dwa różne oświadczenia zarówno utworzyć nową pustą tablicą nazwanych punktów:
var points = new Array();
// Bad
var points = [];
// Good
Te dwa różne oświadczenia obu utworzyć nową tablicę zawierającą 6 liczb:
var points = new Array(40, 100, 1, 5, 25, 10) // Bad
var points = [40, 100, 1, 5, 25, 10];
// Good
Spróbuj sam " new kluczowe komplikuje tylko kod. Może to także powodować pewne nieoczekiwane wyniki:
var points = new Array(40, 100); // Creates an array with two elements (40 and 100)Co zrobić, jeśli mogę usunąć jeden z elementów?
var points = new Array(40); // Creates an array with 40 undefined elements !!!!! Spróbuj sam " Jak rozpoznać tablicę
Częstym pytaniem jest: Jak mogę sprawdzić, czy zmienna jest tablicą?
Problem polega na tym, że operator JavaScript typeof zwraca "obiekt":
var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits; // returns object Spróbuj sam " Powraca typeof operator obiektu, ponieważ tablica JavaScript jest obiektem.
Roztwór 1:
Aby rozwiązać ten problem ECMAScript 5 określa nową metodę Array.isArray() :
Array.isArray(fruits); // returns true Spróbuj sam " Problem z tym rozwiązaniem jest to, że ECMAScript 5 nie jest obsługiwany w starszych przeglądarkach.
Roztwór 2:
Aby rozwiązać ten problem, można utworzyć własne isArray() funkcję:
function isArray(x) {
return
x.constructor.toString().indexOf("Array") > -1;
} Spróbuj sam " Funkcja wyżej zawsze zwraca true, jeśli argument jest tablicą.
Albo dokładniej: zwraca true jeśli prototyp obiektu zawiera słowo "Array".
Rozwiązanie 3:
instanceof operator zwraca true, jeśli obiekt jest tworzony przez danego konstruktora:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array // returns true Spróbuj sam " Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »