Zindeksowane kolekcje

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ę