Metody tablic JavaScript
Konwersja tablic na ciągi
Metoda JavaScript toString()konwertuje tablicę na ciąg (oddzielonych przecinkami) wartości tablicowych.
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Wynik:
Metoda join()łączy również wszystkie elementy tablicy w ciąg.
Zachowuje się podobnie toString(), ale dodatkowo można określić separator:
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
Wynik:
Popping i pchanie
Podczas pracy z tablicami łatwo jest usuwać elementy i dodawać nowe.
Oto czym jest popping i pushing:
Wysuwanie elementów z tablicy lub wpychanie elementów do tablicy.
Tablica JavaScript pop()
Metoda pop()usuwa ostatni element z tablicy:
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
Metoda pop()zwraca wartość, która „wyskoczyła”:
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();
Tablica JavaScript push()
Metoda push()dodaje nowy element do tablicy (na końcu):
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
Metoda push()zwraca nową długość tablicy:
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");
Przesuwanie elementów
Przesunięcie jest równoznaczne z poppingiem, ale działa na pierwszym elemencie zamiast na ostatnim.
Przesunięcie tablicy JavaScript()
Metoda shift()usuwa pierwszy element tablicy i „przesuwa” wszystkie inne elementy do niższego indeksu.
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
Metoda shift()zwraca wartość, która została „przesunięta”:
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();
Tablica JavaScript unshift()
Metoda unshift()dodaje nowy element do tablicy (na początku) i "odsuwa" starsze elementy:
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
Metoda unshift()zwraca nową długość tablicy.
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
Zmiana elementów
Dostęp do elementów tablicy uzyskuje się za pomocą ich numeru indeksu :
Indeksy tablicy zaczynają się od 0:
[0] to pierwszy element tablicy
[1] to drugi
[2] to trzeci ...
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";
Długość tablicy JavaScript
Właściwość lengthzapewnia łatwy sposób dołączenia nowego elementu do tablicy:
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";
Usuń tablicę JavaScript()
Ostrzeżenie !
Elementy tablicy można usuwać za pomocą operatora JavaScript delete.
Używając deletepozostawia undefineddziury w tablicy.
Zamiast tego użyj pop() lub shift().
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
Scalanie (konkatenowanie) tablic
Metoda concat()tworzy nową tablicę poprzez scalenie (konkatenację) istniejących tablic:
Przykład (scalanie dwóch tablic)
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
Metoda concat()nie zmienia istniejących tablic. Zawsze zwraca nową tablicę.
Metoda concat()może przyjmować dowolną liczbę argumentów tablicowych:
Przykład (scalanie trzech tablic)
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
Metoda concat()może również przyjmować ciągi znaków jako argumenty:
Przykład (scalanie tablicy z wartościami)
const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");
Łączenie i krojenie tablic
Metoda splice()dodaje nowe elementy do tablicy.
Metoda slice()wycina fragment tablicy.
Łączenie tablicy JavaScript()
Metoda splice()może służyć do dodawania nowych elementów do tablicy:
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
Pierwszy parametr (2) określa pozycję , w której należy dodać (wpleść) nowe elementy.
Drugi parametr (0) określa , ile elementów należy usunąć .
Pozostałe parametry ("Cytryna", "Kiwi") określają nowe elementy do dodania .
Metoda splice()zwraca tablicę z usuniętymi elementami:
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
Używanie splice() do usuwania elementów
Dzięki sprytnemu ustawieniu parametrów możesz użyć splice()do usunięcia elementów bez pozostawiania „dziur” w tablicy:
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
Pierwszy parametr (0) określa pozycję, w której należy dodać (wpleść) nowe elementy.
Drugi parametr (1) określa , ile elementów należy usunąć .
Pozostałe parametry są pomijane. Żadne nowe elementy nie zostaną dodane.
Wycinek tablicy JavaScript()
Metoda slice()wycina fragment tablicy na nową tablicę.
Ten przykład wycina część tablicy zaczynając od elementu tablicy 1 ("Pomarańczowy"):
Przykład
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
Notatka
Metoda slice()tworzy nową tablicę.
Metoda slice()nie usuwa żadnych elementów z tablicy źródłowej.
Ten przykład wycina część tablicy zaczynając od elementu tablicy 3 ("Jabłko"):
Przykład
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
Metoda slice()może przyjmować dwa argumenty, takie jak slice(1, 3).
Metoda następnie wybiera elementy od argumentu start i aż do (ale nie włączając) argumentu end.
Przykład
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
Jeśli argument end zostanie pominięty, jak w pierwszych przykładach, slice()
metoda wycina resztę tablicy.
Przykład
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
Automatyczne toString()
JavaScript automatycznie konwertuje tablicę na ciąg oddzielony przecinkami, gdy oczekiwana jest wartość pierwotna.
Tak jest zawsze, gdy próbujesz wypisać tablicę.
Te dwa przykłady dadzą ten sam wynik:
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Przykład
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
Notatka
Wszystkie obiekty JavaScript posiadają metodę toString().
Znajdowanie wartości maksymalnych i minimalnych w tablicy
Nie ma wbudowanych funkcji do znajdowania najwyższej lub najniższej wartości w tablicy JavaScript.
W kolejnym rozdziale tego samouczka dowiesz się, jak rozwiązać ten problem.
Sortowanie tablic
Sortowanie tablic zostało omówione w następnym rozdziale tego samouczka.
Pełne odniesienie do tablicy
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.