Tablice JavaScript
Tablica to specjalna zmienna, która może zawierać więcej niż jedną wartość:
const cars = ["Saab", "Volvo", "BMW"];
Dlaczego warto korzystać z tablicy?
Jeśli masz listę elementów (na przykład listę nazw samochodów), przechowywanie samochodów w pojedynczych zmiennych może wyglądać tak:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
Co jednak, jeśli chcesz przejechać się przez samochody i znaleźć konkretny? A co by było, gdybyś nie miał 3 samochodów, ale 300?
Rozwiązaniem jest tablica!
Tablica może zawierać wiele wartości pod jedną nazwą, a dostęp do wartości można uzyskać, odwołując się do numeru indeksu.
Tworzenie tablicy
Użycie literału tablicowego to najprostszy sposób na utworzenie tablicy JavaScript.
Składnia:
const array_name = [item1, item2, ...];
Powszechną praktyką jest deklarowanie tablic za pomocą słowa kluczowego const .
Dowiedz się więcej o const z tablicami w rozdziale: JS Array Const .
Przykład
const cars = ["Saab", "Volvo", "BMW"];
Spacje i łamanie wierszy nie są ważne. Deklaracja może obejmować wiele wierszy:
Przykład
const cars = [
"Saab",
"Volvo",
"BMW"
];
Możesz również utworzyć tablicę, a następnie podać elementy:
Przykład
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
Korzystanie ze słowa kluczowego JavaScript nowy
Poniższy przykład tworzy również tablicę i przypisuje jej wartości:
Przykład
const cars = new Array("Saab", "Volvo", "BMW");
Dwa powyższe przykłady robią dokładnie to samo.
Nie ma potrzeby używania new Array().
Dla uproszczenia, czytelności i szybkości wykonywania użyj metody literału tablicowego.
Dostęp do elementów tablicy
Dostęp do elementu tablicy można uzyskać, odwołując się do numeru indeksu :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Uwaga: indeksy tablicy zaczynają się od 0.
[0] to pierwszy element. [1] to drugi element.
Zmiana elementu tablicy
To stwierdzenie zmienia wartość pierwszego elementu w cars:
cars[0] = "Opel";
Przykład
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
Uzyskaj dostęp do pełnej tablicy
W języku JavaScript dostęp do pełnej tablicy można uzyskać, odwołując się do nazwy tablicy:
Przykład
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Tablice są obiektami
Tablice to specjalny typ obiektów. Operator typeofw JavaScript zwraca „object” dla tablic.
Ale tablice JavaScript najlepiej opisać jako tablice.
Tablice używają liczb, aby uzyskać dostęp do swoich „elementów”. W tym przykładzie person[0]
zwraca John:
Szyk:
const person = ["John", "Doe", 46];
Obiekty używają nazw , aby uzyskać dostęp do swoich „członków”. W tym przykładzie
person.firstName
zwraca John:
Obiekt:
const person = {firstName:"John", lastName:"Doe", age:46};
Elementy tablicy mogą być obiektami
Zmienne JavaScript mogą być obiektami. Tablice to specjalne rodzaje obiektów.
Z tego powodu w tej samej tablicy można mieć zmienne różnych typów.
Możesz mieć obiekty w tablicy. Możesz mieć funkcje w tablicy. Możesz mieć tablice w tablicy:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Właściwości i metody tablicy
Prawdziwą siłą tablic JavaScript są wbudowane właściwości i metody tablic:
cars.length // Returns the number of elements
cars.sort() // Sorts the array
Metody tablicowe omówiono w następnych rozdziałach.
Długość Nieruchomość
Właściwość lengthtablicy zwraca długość tablicy (liczbę elementów tablicy).
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
Właściwość lengthjest zawsze o jeden więcej niż najwyższy indeks tablicy.
Dostęp do pierwszego elementu tablicy
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
Dostęp do ostatniego elementu tablicy
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
Zapętlanie elementów tablicy
Jednym ze sposobów na przejście przez tablicę jest użycie forpętli:
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text
+= "</ul>";
Możesz również skorzystać z Array.forEach()funkcji:
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
Dodawanie elementów tablicy
Najłatwiejszym sposobem dodania nowego elementu do tablicy jest użycie push()metody:
Przykład
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruits
Nowy element można również dodać do tablicy za pomocą lengthwłaściwości:
Przykład
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
OSTRZEŻENIE !
Dodanie elementów o wysokich indeksach może stworzyć niezdefiniowane „dziury” w tablicy:
Przykład
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Creates undefined "holes" in fruits
Tablice asocjacyjne
Wiele języków programowania obsługuje tablice z nazwanymi indeksami.
Tablice z nazwanymi indeksami nazywane są tablicami asocjacyjnymi (lub skrótami).
JavaScript nie obsługuje tablic z nazwanymi indeksami.
W JavaScript tablice zawsze używają indeksów numerowanych .
Przykład
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John"
OSTRZEŻENIE !!
Jeśli używasz nazwanych indeksów, JavaScript przedefiniuje tablicę do obiektu.
Następnie niektóre metody i właściwości tablicowe będą generować nieprawidłowe wyniki .
Przykład:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return undefined
Różnica między tablicami a obiektami
W JavaScript tablice używają indeksów numerowanych .
W JavaScript obiekty używają nazwanych indeksów .
Tablice to specjalny rodzaj obiektów z ponumerowanymi indeksami.
Kiedy używać tablic. Kiedy używać obiektów.
- JavaScript nie obsługuje tablic asocjacyjnych.
- Należy używać obiektów , gdy chcesz, aby nazwy elementów były ciągami (tekst) .
- Powinieneś używać tablic , jeśli chcesz, aby nazwy elementów były liczbami .
JavaScript nowa tablica()
JavaScript ma wbudowany konstruktor tablicy new Array().
Ale możesz bezpiecznie używać []zamiast tego.
Te dwie różne instrukcje tworzą nową pustą tablicę o nazwie points:
const points = new Array();
const points = [];
Te dwie różne instrukcje tworzą nową tablicę zawierającą 6 liczb:
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
Słowo newkluczowe może dawać nieoczekiwane wyniki:
// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);
Powszechny błąd
const points = [40];
to nie to samo co:
const points = new Array(40);
// Create an array with one element:
const points = [40];
// Create an array with 40 undefined elements:
const points = new Array(40);
Jak rozpoznać tablicę
Częstym pytaniem jest: Skąd mam wiedzieć, czy zmienna jest tablicą?
The problem is that the JavaScript operator typeof returns
"object":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
The typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():
Array.isArray(fruits);
Solution 2:
The instanceof operator returns true if an object is created
by a given constructor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.