Tablice JavaScript

Tablice JavaScript są używane do przechowywania wielu wartości w pojedynczej zmiennej.

Przykład

var cars = ["Saab", "Volvo", "BMW"];

Spróbuj sam

Co to jest tablica?

Tablica to specjalny zmiennik, który może przechowywać więcej niż jedną wartość.

Jeśli masz listę projektów (np. lista marek samochodów), przechowywanie marek samochodów w pojedynczej zmiennej powinno wyglądać tak:

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

Jeśli chcesz przejść przez wszystkie samochody i znaleźć określoną wartość? Co jeśli nie ma trzech marek samochodów, ale 300?

Rozwiązaniem jest tablica!

Tablice mogą przechowywać wiele wartości pod jednym nazwiskiem i można do nich odnosić się za pomocą indeksów, aby uzyskać dostęp do tych wartości.

Tworzenie tablic

Użycie tekstu tablicy jest najprostszym sposobem tworzenia tablic w JavaScript.

Gramatyka:

var array-name = [item1, item2, ...];

Przykład

var cars = ["Saab", "Volvo", "BMW"];

Spróbuj sam

Spacje i wiersze przerwy są nieistotne. Deklaracja może rozciągać się na wiele wierszy:

Przykład

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

Spróbuj sam

Nie pisz przecinka po ostatnim elemencie (np. "BMW",).

Może występować problem zgodności między przeglądarkami.

używając słowa kluczowego JavaScript new

Poniższy przykład również utworzy tablicę i przypisze jej wartości:

Przykład

var cars = new Array("Saab", "Volvo", "BMW");

Spróbuj sam

Te dwa przykłady mają taki sam efekt. Nie ma potrzeby używania new Array().

Dla uproszczenia, czytelności i szybkości wykonania, użyj pierwszego sposobu (metoda tekstowa tablicy).

odnosić się do elementów tablicy

Przez odwołanie się doNumer indeksu (indeks)aby odwołać się do elementu tablicy.

To zdanie dostępu do wartości pierwszego elementu w cars:

var name = cars[0];

To zdanie zmienia pierwszy element w cars:

cars[0] = "Opel";

Przykład

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

Spróbuj sam

[0] jest pierwszym elementem tablicy. [1] jest drugim. Indeksy tablicy zaczynają się od 0.

Zmiana elementu tablicy

To zdanie zmienia wartość pierwszego elementu w cars:

cars[0] = "Opel";

Przykład

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

Spróbuj sam

dostęp do pełnej tablicy

Przez JavaScript, można uzyskać dostęp do pełnej tablicy, odwołując się do nazwy tablicy:

Przykład

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Spróbuj sam

tablica jest obiektem

tablica jest specjalnym typem obiektu. W JavaScript używa się tablic: typeof operator zwróci "object".

ale najlepiej jest opisywać JavaScript tablice jako tablice.

tablice używająliczbaby uzyskać dostęp do jego "elementów". W tym przykładzie,person[0] zwróć Bill:

tablica:

var person = ["Bill", "Gates", 62];

Spróbuj sam

obiekty używająnazwaaby uzyskać dostęp do jego "członków". W tym przykładzie,person.firstName zwróć Bill:

Obiekt:

var person = {firstName:"Bill", lastName:"Gates", age:19};

Spróbuj sam

elementy tablicy mogą być obiektami

Zmienne JavaScript mogą być obiektami. Tablice są specjalnym typem obiektu.

Dlatego możesz przechowywać różne typy zmiennych w tej samej tablicy.

Możesz przechowywać obiekty w tablicy. Możesz przechowywać funkcje w tablicy. Możesz nawet przechowywać tablice w tablicy:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

właściwości i metody tablic

Prawdziwa siła JavaScript tablic ukryta jest w ich właściwościach i metodach:

Przykład

var x = cars.length;   // właściwość length zwraca liczbę elementów
var y = cars.sort();   // metoda sort() sortuje tablicę

nauczymy się metod tablic w rozdziale następnym.

właściwość length

length właściwość zwraca długość tablicy (liczbę elementów tablicy).

Przykład

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // długość fruits wynosi 4

Spróbuj sam

length właściwość zawsze jest większa niż najwyższy indeks tablicy (indeks).

dostęp do pierwszego elementu tablicy

Przykład

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

Spróbuj sam

dostęp do ostatniego elementu tablicy

Przykład

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Spróbuj sam

przechodzenie przez elementy tablicy

Najbezpieczniejszym sposobem przechodzenia przez tablicę jest użycie "for"Petla":

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

Możesz również użyć Array.foreach() Funkcja:

Przykład

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Spróbuj sam

dodawania elementów tablicy

Najlepszym sposobem dodania elementu do tablicy jest użycie push() Metoda:

Przykład

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // Dodaje nowy element (Lemon) do fruits

Spróbuj sam

Można również użyć length Atrybuty do dodania nowego elementu do tablicy:

Przykład

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // Dodaje nowy element (Lemon) do fruits

Spróbuj sam

Ostrzeżenie!

Dodanie elementu o najwyższym indeksie może tworzyć w tablicy "doliny":

Przykład

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // Dodaje nowy element (Lemon) do fruits

Spróbuj sam

Tablice związane

Wiele elementów programowania obsługuje tablice z nazwanymi indeksami.

Tablice z nazwanymi indeksami nazywane są tablicami związonymi (lub haszami).

JavaScript Nie obsługuje siętablic z nazwanymi indeksami.

W JavaScript, tablice mogą być używane tylko za pomocąindeksy numeryczne.

Przykład

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length zwraca 3
var y = person[0];              // person[0] zwraca "Bill"

Spróbuj sam

Ostrzeżenie!

Jeśli używasz nazwanych indeksów, JavaScript przedefiniuje tablicę jako standardowy obiekt.

Po tym, wszystkie metody i atrybuty tablic będą generować niepoprawne wyniki.

Przykład:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length zwróci 0
var y = person[0];              // person[0] zwróci undefined

Spróbuj sam

Różnica między tablicami a obiektami

W JavaScript,Tabliceużywaćindeksy numeryczne.

W JavaScript,obiektużywaćIndeksy nazwane.

Tablice są specjalnym typem obiektu, który ma numeryczne indeksy.

Kiedy używać tablic, a kiedy obiektów?

  • JavaScript nie obsługuje tablic związkowych
  • Jeśli chcesz, aby nazwy elementów byłyłańcuch (tekst)powinno się używaćobiekt.
  • Jeśli chcesz, aby nazwy elementów byłyliczbpowinno się używaćTablice.

Unikaj new Array()

Nie ma potrzeby używania wbudowanego konstruktora tablic w JavaScript new Array().

Użyj [] Zamiast tego!

Poniżej znajdują się dwa różne zdania tworzące nową pustą tablicę o nazwie points:

var points = new Array();         // Minus
var points = [];                  // Plus

Poniżej znajdują się dwa różne zdania tworzące nową tablicę zawierającą sześć liczb:

var points = new Array(40, 100, 1, 5, 25, 10); // Minus
var points = [40, 100, 1, 5, 25, 10];          // Plus

Spróbuj sam

new Kluczowe słowa mogą zcomplikować kod. Mogą również powodować pewne nieprzewidywalne wyniki:

var points = new Array(40, 100);  // Tworzy tablicę zawierającą dwa elementy (40 i 100)

Co się stanie, jeśli usunę jeden z elementów?

var points = new Array(40);       // Tworzy tablicę zawierającą 40 elementów niezdefiniowanych!!!

Spróbuj sam

Jak rozpoznać tablicę

Często pojawiającym się pytaniem jest: Jak mogę dowiedzieć się, czy zmienna jest tablicą?

Problemem jest operator JavaScript typeof Zwraca "object：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // Zwraca object

Spróbuj sam

Operator typeof zwraca "object", ponieważ tablice JavaScript są obiektami.

Rozwiązanie 1:

Aby rozwiązać ten problem, ECMAScript 5 zdefiniował nową metodę Array.isArray():

Array.isArray(fruits);     // zwraca true

Spróbuj sam

Problem z tym rozwiązaniem tkwi w ECMAScript 5 Nie obsługuje starych przeglądarek.

Rozwiązanie 2:

Stwórz własne isArray() Funkcja rozwiązuje ten problem:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

Spróbuj sam

Jeśli argument jest tablicą, powyższa funkcja zawsze zwraca true.

Lub bardziej precyzyjnie: jeśli obiekt prototypu zawiera słowo "Array", zwraca true.

Rozwiązanie 3:

Jeśli obiekt został utworzony przez danego konstruktora: instanceof Operator zwraca true:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // zwraca true

Spróbuj sam