Zindeksowana kolekcja to struktura danych, w której elementy są przechowywane
dostęp za pomocą indeksów numerowanych. Wartości przechowywane w zindeksowanej kolekcji to:
są przypisane indeksy numerowane, począwszy od 0
, czyli wzorzec o nazwie „indeksowanie zerowe”.
Następnie możesz uzyskać dostęp do wartości zapisanych w zindeksowanej kolekcji, podając odwołanie
ich indeksach.
Tablica
Tablica to kontener, który może zawierać zero lub więcej wartości dowolnego typu danych, w tym złożonych obiektów i innych tablic. Wartości przechowywane w tablicy to czasem nazywane „elementami” tablicy.
Tworzenie tablicy
Podobnie jak w przypadku podstawowych typów danych tablicę można utworzyć na 2 sposoby:
literału tablicowego lub przez wywołanie wbudowanego konstruktora Array()
JavaScriptu
dzięki new Array()
. Przypisanie tablicy do zmiennej zapewnia dużą przenośność
i iteracyjny sposób przypisywania
wiele wartości dla jednego identyfikatora.
Składnia literału tablicowego wykorzystuje zestaw nawiasów ([]
) otaczających 0 lub więcej
rozdzielane przecinkami wartości danych:
const myArray = [];
Składnia konstruktora tablicy używa wbudowanego obiektu Array
JavaScript jako
konstruktor ze słowem kluczowym new
:
const myArray = new Array();
Składnia literału tablicowego i składni konstruktora tablicowego pozwala wypełnić tablicę przy użyciu informacji, chociaż składnia tych elementów nieco się różni i wartości są zdefiniowane. Składnia literału tablicowego wykorzystuje wartości rozdzielone przecinkami pomiędzy argumentami nawiasy, które wyglądają tak samo jak tablica wynikowa:
const myArray = [ true, null, "String", false ];
myArray;
> [ true, null, "String", false ]
Składnia konstruktora tablicowego przyjmuje wartości rozdzielane przecinkami jako argumenty, przy czym jeden specjalny wyjątek behawioralny:
const myArray = new Array( true, null, "String", false );
myArray;
> Array(4) [ true, null, "String", false ]
W przypadku przekazywania pojedynczej wartości numerycznej do konstruktora Array
zostaje ona przekazana
nie jest przypisana do zerowej pozycji w tablicy wynikowej. Zamiast tego tablica
zostanie utworzona z tą liczbą pustych przedziałów na wartości. Nie nakłada to żadnych
ograniczeń tablicy. W ten sam sposób można dodawać i usuwać elementy
jak w przypadku literału tablicowego.
// Firefox:\
const myArray = new Array( 10 );
myArray;
> Array(10) [ <10 empty slots> ]
// Chrome:
const myArray = new Array( 10 );
myArray;
> (10) [empty × 10]
Tablice zawierające puste przedziały (czasami nazywane „tablicami rozproszonymi”) są specjalne
przypadków. Zamiast zawierać wartość undefined
lub jawnie null
, pustą wartość
boksy są często, ale nie zawsze, są traktowane jako wartości undefined
w innym miejscu
język.
Można przypadkowo utworzyć tablicę rozproszoną przy użyciu składni literału tablicowego przez pomijanie wartości między przecinkami podczas tworzenia literału tablicowego:
const myArray = [ true,, true, false ];
myArray;
> Array(4) [ true, <1 empty slot>, true, false ]
Chociaż nie są traktowane jako wartości istotne we wszystkich kontekstach, puste miejsce jest uwzględniana w łącznej długości tablicy, co może prowadzić do w przypadku powielania uzyskiwać nieoczekiwane rezultaty wartości tablicy:
const myArray = [ 1,, 3, 4 ];
myArray.length;
> 4
for( const myValue of myArray ) {
console.log( myValue + 10 );
}
> 11
> NaN
> 13
> 14
To zachowanie wynika z niektórych najwcześniejszych decyzji projektowych JavaScriptu. Unikaj stosowania układów rozproszonych we współczesnych projektach.
Podobnie jak w przypadku elementów podstawowych, literał tablicowy
dziedziczy właściwości i metody z odpowiedniego konstruktora.
Tablica jest specjalną formą obiektu, składnia literału tablicowego
Składnia new Array()
zapewnia funkcjonalnie identyczne wyniki: obiekt, który
dziedziczy prototyp z konstruktora Array
.
const arrayLiteral = [];
const arrayConstructor = new Array();
typeof arrayLiteral;
> "object"
arrayLiteral;
> Array []
length: 0
<prototype>: Array []
typeof arrayConstructor;
> "object"
arrayConstructor;
> Array []
length: 0
<prototype>: Array []
Ponieważ te 2 wyniki są identyczne, a składnia literału tablicowego jest bardziej zwięzła
i literału, zdecydowanie zalecamy, aby zawsze używać składni literału tablicowego zamiast
Składnia new Array()
.
Dostęp do wartości tablicy
Dostęp do poszczególnych elementów tablicy można uzyskać przy użyciu notacji nawiasowej,
w nawiasach ([]
) po tablicy lub jej identyfikatorze zawierającym
odnosząca się do indeksu tego elementu:
[ "My string", "My other string" ][ 1 ];
> "My other string"
const myArray = [ "My string", 50, true ];
myArray[ 0 ];
> "My string"
myArray[ 1 ];
> 50
myArray[ 2 ];
> true
Tablice w JavaScript nie są powiązanie, Oznacza to, że jako indeksu nie można użyć dowolnego ciągu. Natomiast wartość liczbowa wartości używane do uzyskiwania dostępu do elementów w tablicy są zmieniane na wartość ciągu za scen, co oznacza, że możesz użyć wartości ciągu tekstowego zawierającej tylko wartości liczbowe, znaki:
const myArray = [ "My string", 50, true ];
myArray[ 2 ];
> true
myArray[ "2" ];
> true
Próba uzyskania dostępu do elementu spoza zakresu zdefiniowanego w tablicy powoduje
undefined
, to nie jest błąd:
const myArray = [ "My string", 50, true ];
myArray[ 9 ];
> undefined
Niszczenie przypisania
Niszczenie przypisań to zwięzły sposób wyodrębnienia zakresu wartości z tablice lub obiekty i przypisywanie ich do zbioru identyfikatorów, czyli proces nazywany czasem „rozpakowywaniem” oryginalną strukturę danych, chociaż nie zmienia to pierwotnej tablicy ani obiektu.
Niszczenie przypisania wykorzystuje listę identyfikatorów w postaci tablic lub obiektów do
śledzić wartości. W najprostszej postaci, nazywamy wzorzec wiążący.
zniszczenia, każda wartość jest rozpakowywana z tablicy lub obiektu i przypisywana do argumentu
odpowiadająca jej zmienna zainicjowana przy użyciu metody let
lub const
(albo var
):
const myArray = [ "A string", "A second string" ];
const [ myFirstElement, mySecondElement ] = myArray;
const myObject = { firstValue: false, secondValue: true };
const { myProp, mySecondProp } = myObject;
myFirstElement;
> "My string"
mySecondElement;
> "Second string"
myProp;
> false
mySecondProp;
> true
Nawiasy klamrowe ({}
) służą do niszczenia obiektu, a nawiasy kwadratowe ([]
) – do niszczenia obiektu
do zniszczenia tablicy.
const myArray = [ false, true ];
const myObject = { firstValue: false, secondValue: true };
const [ myProp, mySecondProp ] = myObject;
> Uncaught TypeError: myObject is not iterable
const { myElement, mySecondElement } = myArray;
myElement
> undefined
mySecondElement;
> undefined
Niszczenie tablicy odbywa się w kolejności od lewej do prawej. Każdy identyfikator w przypisaniu niszczenia odpowiada elementowi tablica o tym samym indeksie:
const myArray = [ 1, 2, 3 ];
const [ myElement, mySecondElement, myThirdElement ] = myArray;
myElement;
> 1
mySecondElement;
> 2
myThirdElement;
> 3
Jest to również domyślne zachowanie przy niszczeniu obiektu. Jeśli jednak identyfikatory używane w przypisaniu niszczenia są zgodne z kluczami obiektu jako właściwości, identyfikatory te są wypełniane odpowiednimi właściwościami niezależnie od ich kolejności, w jakiej są określone:
const myObject = { firstValue: 1, secondValue: 2, thirdValue 3 };
const { secondValue, thirdValue, firstValue } = myObject;
firstValue;
> 1
secondValue;
> 2
thirdValue;
> 3
Elementy można pominąć, pomijając identyfikator:
const myArray = [ 1, 2, 3 ];
const [ firstValue,, secondValue ] = myArray;
firstValue;
> 1
secondValue;
> 3
Niszczenie składni pozwala też przypisać wartości domyślne na wypadek destrukturyzacji
jest pustym przedziałem, tak jak w przypadku tablicy rozproszonej, lub
Wartość: undefined
.
const myArray = [ true, ];
const [ firstValue = "Default string.", secondValue = "Default string." ] = myArray;
firstValue;
> true
secondValue;
> "Default string."
Dekonstrukcja nie zmusza wartości do określonych typów. Oznacza to, że
wartości „falsy”, takie jak puste;
ciągi tekstowe (""
) lub null
są wciąż uznawane za istotne, zdekonstruowane wartości:
const myArray = [ false, null, 0, "",, undefined ];
const [ falseValue = true, nullValue = true, zeroValue = true, emptyStringValue = true, emptySlot = true, undefinedValue = true ] = myArray;
falseValue;
> false;
nullValue;
> null
zeroValue;
> 0
emptyStringValue;
> ""
emptySlot;
> true
undefinedValue;
> true
Operator rozkładu
Do rozwijania danych iteracyjnych użyj operatora rozproszonego (...
) wprowadzonego w ES6.
taką jak tablica, ciąg lub literał obiektu, na poszczególne elementy.
Za operatorem rozkładu bezpośrednio po nim znajduje się struktura danych, która ma zostać rozszerzona
lub identyfikator zmiennej zawierającej tę strukturę danych.
const myArray = [ 1, 2, 3 ];
console.log( ...myArray );
> 1 2 3
Składnia rozproszona jest używana głównie do kopiowania i łączenia tablic:
const myArray = [ 4, 5, 6 ];
const mySecondArray = [1, 2, 3, ...myArray ];
mySecondArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]
Składni rozkładu można używać tylko w tych kontekstach:
W przypadku tablic i ciągów składnia rozproszona ma zastosowanie tylko wtedy, gdy zero lub więcej argumentów
w wywołaniu funkcji lub elementach tablicy. Pierwszy przykład
składnia operatora „spread betting” w tej sekcji działa, ponieważ przekazuje ...myArray
jako
argumentu we wbudowanej metodzie console.log
.
Nie możesz np. przypisać danych rozsuwanych do zmiennej poza inna tablica:
const myArray = [ 1, 2, 3 ];
const spreadVariable = ...myArray;
> Uncaught SyntaxError: Unexpected token '...'
Udało Ci się jednak skopiować tablicę, rozkładając pierwotną tablicę na literał tablicowy:
const myArray = [ 1, 2, 3 ];
const spreadArray = [ ...myArray ];
spreadArray;
> Array(3) [ 1, 2, 3 ]
Aby scalić elementy tworzące co najmniej dwie tablice w jedną tablicę:
const myArray = [ 1, 2, 3 ];
const mySecondArray = [ 4, 5, 6 ];
const myNewArray = [ ...myArray, ...mySecondArray ];
myNewArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]
Aby przekazać elementy tablicy jako pojedyncze argumenty w wywołaniu funkcji:
const myArray = [ true, false ];
const myFunction = ( myArgument, mySecondArgument ) => {
console.log( myArgument, mySecondArgument );
};
myFunction( ...myArray );
> true false
Operator rozkładu został rozszerzony tak, aby działał literałów obiektów w ES2018. Podobnie jak w przypadku tablic, za pomocą operatora rozproszonego możesz duplikować lub scalać obiekty:
const myObj = { myProperty : true };
const mySecondObj = { ...myObj };
mySecondObj;
> Object { myProperty: true }
const myFirstObj = { myProperty : true };
const mySecondObj = { additionalProperty : true };
const myMergedObj = { ...myFirstObj, ...mySecondObj };
myMergedObj;
> Object { myProperty: true, additionalProperty: true }
Operator rozkładu tworzy „płytki” kopii. Oznacza to, że nie zostanie skopiowana prototyp i niewyliczające pierwotnego obiektu usług.
const myCustomPrototype = { protoProp: "My prototype." };
const myObj = Object.create( myCustomPrototype, {
myEnumerableProp: {
value: true,
enumerable: true
},
myNonEnumerableProp: {
value: false,
enumerable: false
}
});
const myNewObj = { ...myObj };
myObj;
> Object { myEnumerableProp: true, … }
myEnumerableProp: true
myNonEnumerableProp: false
<prototype>: Object { protoProp: "My prototype." }
myNewObj;
> Object { myEnumerableProp: true }
myEnumerableProp: true
<prototype>: Object { … }
Pamiętaj, że tablic i obiektów nie można używać wymiennie. Nie możesz rozłożyć obiekt na tablicę lub tablicę w obiekcie.
Operator obsługi podróżnych
Chociaż składnia samego operatora jest taka sama, operator pozostałych operatorów (...
)
wykonuje funkcję odwrotną w zależności od kontekstu, w którym jest używana. Zamiast
rozwijają wykonaną strukturę danych na poszczególne elementy, tak jak w przypadku
niszczające przypisanie lub jako
parametr funkcji, operator „reszta” łączy
w powtarzalną strukturę danych. Nazwa pochodzi z tego,
jest wykorzystywane do gromadzenia „reszty”. zbioru wartości danych.
W przypadku przypisywania destrukturyzacji składnia nosi nazwę „właściwość spoczynku” składni.
const myArray = [ "First", "Second", "Third", "Fourth", "Fifth" ];
[ myFirstElement, mySecondElement, ...remainingElements ] = myArray;
myFirstElement;
> "First"
mySecondElement;
> "Second"
remainingElements;
> Array(3) [ "Third", "Fourth", "Fifth"]
Używa się go do podania nieskończonej liczby argumentów funkcji, składnia nosi nazwę „parametr spoczynku”. składnia:
function myFunction( ...myParameters ) {
let result = 0;
myParameters.forEach( ( myParam ) => {
result += myParam;
});
return result;
};
myFunction( 2, 2 );
> 4
myFunction( 1, 1, 1, 10, 5 );
> 18
myFunction( 10, 11, 25 );
> 46
%TypedArray%
Tablice z typem to funkcja ES6 przeznaczona do przechowywania uporządkowanych danych binarnych na potrzeby np. podczas pracy z przesłanymi plikami WebGL.
Tak jak symbole, %TypedArray%
funkcja wewnętrzna (zwykle udokumentowana jako %TypedArray%
lub @@TypedArray
)
więc nie można jej pomylić z właściwością globalną) nie jest funkcją konstruktora w argumencie
konwencjonalnego sensu i nie można wywołać go za pomocą metody new
ani wywoływać jej bezpośrednio.
Zamiast tego termin %TypedArray%
odnosi się do nadrzędnej klasy jednostki fizycznej.
konstruktory, z których każdy działa z określonym formatem danych binarnych.
wbudowana superklasa %TypedArray%
udostępnia właściwości i metody użytku, które
wszystkie podklasy konstruktora %TypedArray%
i ich instancje dziedziczą.
Sprawdź swoją wiedzę
Biorąc pod uwagę argument „const myTrack = [ 30, 50, 70 ];; co robi „myTablica[1]” zwrócić?
70
Jeśli „mytablica” ma trzy wartości, co zwraca „mytablica[9]”?
Undefined
9
Null