W tym samouczku dowiesz się o tablicy JavaScript przy pomocy przykładów.
Jak wiesz, zmienna może przechowywać pojedynczy element. Jeśli chcesz przechowywać wiele elementów jednocześnie, możesz użyć tablicy.
Tablica to obiekt, który może przechowywać wiele elementów . Na przykład,
const myArray = ('hello', 'world', 'welcome');
Utwórz tablicę
Możesz utworzyć tablicę na dwa sposoby:
1. Używanie literału tablicowego
Najłatwiejszym sposobem utworzenia tablicy jest użycie literału tablicowego (). Na przykład,
const array1 = ("eat", "sleep");
2. Korzystanie z nowego słowa kluczowego
Możesz również utworzyć tablicę za pomocą newsłowa kluczowego JavaScript .
const array2 = new Array("eat", "sleep");
W obu powyższych przykładach utworzyliśmy tablicę zawierającą dwa elementy.
Uwaga : Do tworzenia tablicy zaleca się użycie literału tablicowego.
Oto więcej przykładów tablic:
// empty array const myList = ( ); // array containing number values const numberArray = ( 2, 4, 6, 8); // array containing string values const stringArray = ( 'eat', 'work', 'sleep'); // multiple data types array const newData = ('work', 'exercise', 1, true);
Możesz także przechowywać tablice, funkcje i inne obiekty wewnątrz tablicy. Na przykład,
const newData = ( ('task1': 'exercise'), (1, 2 ,3), function hello() ( console.log('hello')) );
Dostęp do elementów tablicy
Możesz uzyskać dostęp do elementów wewnątrz tablicy za pomocą indeksów (0, 1, 2…) . Na przykład,
const myArray = ('h', 'e', 'l', 'l', 'o'); // first element console.log(myArray(0)); // "h" // second element console.log(myArray(1)); // "e" 
Indeksowanie tablic w JavaScript
Uwaga : indeks tablicy zaczyna się od 0, a nie od 1.
Dodaj element do tablicy
Możesz użyć wbudowanej metody push()i unshift()dodać element do tablicy.
push()Sposób dodaje element na końcu tablicy i zwraca długość nowej macierzy. Na przykład,
let dailyActivities = ('eat', 'sleep'); // add an element at the end of the array dailyActivities.push('exercise'); console.log(dailyActivities); // ('eat', 'sleep', 'exercise')
unshift()Metoda dodaje nowy element na początku tablicy i zwraca nową długość tablicy. Na przykład,
let dailyActivities = ('eat', 'sleep'); //add an element at the end of the array dailyActivities.unshift('work'); console.log(dailyActivities); // ('work', 'eat', 'sleep', 'exercise'')
Zmień elementy tablicy
Możesz również dodawać elementy lub zmieniać elementy, uzyskując dostęp do wartości indeksu.
let dailyActivities = ( 'eat', 'sleep'); // this will add the new element 'exercise' at the 2 index dailyActivities(2) = 'exercise'; console.log(dailyActivities); // ('eat', 'sleep', 'exercise')
Załóżmy, że tablica ma dwa elementy. Jeśli spróbujesz dodać element o indeksie 3 (czwarty element), trzeci element będzie niezdefiniowany. Na przykład,
let dailyActivities = ( 'eat', 'sleep'); // this will add the new element 'exercise' at the 3 index dailyActivities(3) = 'exercise'; console.log(dailyActivities); // ("eat", "sleep", undefined, "exercise")
Zasadniczo, jeśli spróbujesz dodać elementy do wysokich indeksów, indeksy pomiędzy nimi będą miały nieokreśloną wartość.
Usuń element z tablicy
Możesz użyć tej pop()metody, aby usunąć ostatni element z tablicy. pop()Metoda zwraca również zwracanej wartości. Na przykład,
let dailyActivities = ('work', 'eat', 'sleep', 'exercise'); // remove the last element dailyActivities.pop(); console.log(dailyActivities); // ('work', 'eat', 'sleep') // remove the last element from ('work', 'eat', 'sleep') const removedElement = dailyActivities.pop(); //get removed element console.log(removedElement); // 'sleep' console.log(dailyActivities); // ('work', 'eat')
Jeśli chcesz usunąć pierwszy element, możesz użyć shift()metody. shift()Sposób usuwa się pierwszy element, a także zwraca element usunięte. Na przykład,
let dailyActivities = ('work', 'eat', 'sleep'); // remove the first element dailyActivities.shift(); console.log(dailyActivities); // ('eat', 'sleep')
Długość szyku
Możesz znaleźć długość elementu (liczbę elementów w tablicy) za pomocą lengthwłaściwości. Na przykład,
const dailyActivities = ( 'eat', 'sleep'); // this gives the total number of elements in an array console.log(dailyActivities.length); // 2
Metody tablicowe
W JavaScript dostępne są różne metody tablicowe, które ułatwiają wykonywanie użytecznych obliczeń.
Niektóre z powszechnie używanych metod tablicowych JavaScript to:
| metoda | Opis |
|---|---|
| concat () | łączy dwie lub więcej tablic i zwraca wynik |
| indeks() | przeszukuje element tablicy i zwraca jego pozycję |
| odnaleźć() | zwraca pierwszą wartość elementu tablicy, który przechodzi test |
| findIndex () | zwraca pierwszy indeks elementu tablicy, który przeszedł test |
| dla każdego() | wywołuje funkcję dla każdego elementu |
| zawiera () | sprawdza, czy tablica zawiera określony element |
| Pchać() | dodaje nowy element na koniec tablicy i zwraca nową długość tablicy |
| unshift () | adds a new element to the beginning of an array and returns the new length of an array |
| pop() | removes the last element of an array and returns the removed element |
| shift() | removes the first element of an array and returns the removed element |
| sort() | sorts the elements alphabetically in strings and in ascending order |
| slice() | selects the part of an array and returns the new array |
| splice() | removes or replaces existing elements and/or adds new elements |
Example: JavaScript Array Methods
let dailyActivities = ('sleep', 'work', 'exercise') let newRoutine = ('eat'); // sorting elements in the alphabetical order dailyActivities.sort(); console.log(dailyActivities); // ('exercise', 'sleep', 'work') //finding the index position of string const position = dailyActivities.indexOf('work'); console.log(position); // 2 // slicing the array elements const newDailyActivities = dailyActivities.slice(1); console.log(newDailyActivities); // ( 'sleep', 'work') // concatenating two arrays const routine = dailyActivities.concat(newRoutine); console.log(routine); // ("exercise", "sleep", "work", "eat")
Note: If the element is not in an array, indexOf() gives -1.
Visit JavaScript Array Methods to learn more.
Working of JavaScript Arrays
In JavaScript, an array is an object. And, the indices of arrays are objects keys.
Ponieważ tablice są obiektami, elementy tablicy są przechowywane przez odwołanie. W związku z tym podczas kopiowania wartości tablicy każda zmiana w skopiowanej tablicy będzie również odzwierciedlać oryginalną tablicę. Na przykład,
let arr = ('h', 'e'); let arr1 = arr; arr1.push('l'); console.log(arr); // ("h", "e", "l") console.log(arr1); // ("h", "e", "l")
Możesz również przechowywać wartości, przekazując nazwany klucz w tablicy. Na przykład,
let arr = ('h', 'e'); arr.name = 'John'; console.log(arr); // ("h", "e") console.log(arr.name); // "John" console.log(arr('name')); // "John" 
Indeksowanie tablic w JavaScript
Jednak nie zaleca się przechowywania wartości przez przekazywanie dowolnych nazw w tablicy.
Stąd w JavaScript powinieneś używać tablicy, jeśli wartości są w uporządkowanym zbiorze. W przeciwnym razie lepiej jest użyć obiektu z ( ).
Polecane artykuły
- JavaScript dla każdego
- JavaScript dla… z
- Tablica wielowymiarowa JavaScript
