Coleções indexadas

Uma coleção indexada é uma estrutura de dados na qual elementos são armazenados e acessados usando índices numerados. Os valores armazenados em uma coleção indexada são atribuiu índices numerados a partir de 0, um padrão chamado "indexação zero". Você pode acessar os valores armazenados em uma coleção indexada referenciando os índices.

Matriz

Uma matriz é um contêiner que pode conter zero ou mais valores de qualquer tipo de dados, incluindo objetos complexos ou outras matrizes. Os valores armazenados em uma matriz são também chamados de "elementos", da matriz.

Criar uma matriz

Assim como nos tipos de dados primitivos, há duas abordagens para criar uma matriz: como um literal de matriz ou invocando o construtor Array() integrado do JavaScript com new Array(). Ao atribuir uma matriz a uma variável, e iterable de atribuir diversos valores a um único identificador.

A sintaxe literal de matriz usa um conjunto de colchetes ([]) em torno de zero ou mais valores de dados separados por vírgula:

const myArray = [];

A sintaxe do construtor de matriz usa o objeto Array integrado do JavaScript como um com a palavra-chave new:

const myArray = new Array();

Tanto as sintaxes de literal de matriz quanto as sintaxes de construtor de matriz permitem preencher uma matriz com informações no momento da criação, embora as sintaxes sejam um pouco diferentes em como essas valores são definidos. A sintaxe do literal de matriz usa valores separados por vírgula entre as colchetes, que têm a mesma aparência da matriz resultante:

const myArray = [ true, null, "String", false ];

myArray;
> [ true, null, "String", false ]

A sintaxe do construtor de matriz toma valores separados por vírgula como argumentos, com um exceção comportamental especial:

const myArray = new Array( true, null, "String", false );

myArray;
> Array(4) [ true, null, "String", false ]

Quando um único valor numérico é transmitido para o construtor Array, esse valor não é atribuído à posição zero da matriz resultante. Em vez disso, uma matriz é criado com esse número de slots vazios para valores. Isso não impõe nenhum limitações na matriz. Os itens podem ser adicionados e removidos da mesma forma. como um literal de matriz.

// Firefox:\
const myArray = new Array( 10 );

myArray;
> Array(10) [ <10 empty slots> ]

// Chrome:
const myArray = new Array( 10 );

myArray;
> (10) [empty × 10]

Matrizes que contêm slots vazios (às vezes chamadas de "matrizes esparsas") são especiais casos de uso diferentes. Em vez de conter um valor undefined ou null explicitamente, deixe o campo vazio os slots são frequentemente, mas nem sempre, tratados como valores undefined em outros idioma de destino.

É possível criar acidentalmente uma matriz esparsa usando a sintaxe literal da matriz ao omitir um valor entre vírgulas ao criar um literal de matriz:

const myArray = [ true,, true, false ];

myArray;
> Array(4) [ true, <1 empty slot>, true, false ]

Apesar de não ser tratado como um valor significativo em todos os contextos, um slot vazio é fatorado no comprimento total da matriz, potencialmente levando a resultados inesperados ao iterar valores de uma matriz:

const myArray = [ 1,, 3, 4 ];

myArray.length;
> 4

for( const myValue of myArray ) {
  console.log( myValue + 10 );
}
> 11
> NaN
> 13
> 14

Esse comportamento é uma retenção de algumas das primeiras decisões de design do JavaScript. Evite usar matrizes esparsas no desenvolvimento moderno.

Assim como nos primitivos, um literal de matriz herda propriedades e métodos do construtor correspondente. Como uma matriz é uma forma especial de objeto, a sintaxe literal da matriz e A sintaxe new Array() cria resultados funcionalmente idênticos: um objeto que herda o protótipo do construtor 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 []

Como os dois resultados são idênticos e a sintaxe literal da matriz é mais concisa e literal, é altamente recomendável usar sempre a sintaxe literal da matriz em vez da Sintaxe new Array().

Acessar valores da matriz

Para acessar elementos individuais na matriz, use a notação de colchetes, conjunto de colchetes ([]) após a matriz ou seu identificador, que contém um que se refere ao índice desse elemento:

[ "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

As matrizes em JavaScript não são associativas. o que significa que não é possível usar uma string arbitrária como índice. No entanto, os valores numéricos valores usados para acessar elementos em uma matriz são convertidos em um valor de string atrás nos cenários, ou seja, é possível usar um valor de string contendo apenas valores caracteres:

const myArray = [ "My string", 50, true ];

myArray[ 2 ];
> true

myArray[ "2" ];
> true

Tentar acessar um elemento fora daqueles definidos na matriz resulta em undefined, não é um erro:

const myArray = [ "My string", 50, true ];

myArray[ 9 ];
> undefined

Atribuição de desestruturação

A atribuição de desestruturação é uma maneira concisa de extrair um intervalo de valores de matrizes ou objetos e atribuí-los a um conjunto de identificadores, um processo às vezes chamado de "descompactação" a estrutura de dados original, embora não modifique a matriz ou o objeto original.

A atribuição de desestruturação usa uma lista de identificadores semelhante a uma matriz ou objeto para monitorar os valores. Na forma mais simples, chamada padrão de vinculação desestruturação, cada valor é descompactado da matriz ou do objeto e atribuído a um variável correspondente, inicializada usando let ou const (ou 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

Use chaves ({}) para desestruturar um objeto e colchetes ([]) para desestruturar uma matriz.

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

A desestruturação de uma matriz acontece em ordem sequencial, da esquerda para a direita. Cada na atribuição de desestruturação corresponde ao elemento do elemento matriz com o mesmo índice:

const myArray = [ 1, 2, 3 ];
const [ myElement, mySecondElement, myThirdElement ] = myArray;

myElement;
> 1

mySecondElement;
> 2

myThirdElement;
> 3

Esse também é o comportamento padrão ao desestruturar um objeto. No entanto, se o identificadores usados na atribuição de desestruturação correspondem às chaves do objeto , esses identificadores são preenchidos com as propriedades valores independentemente da ordem em que são especificados:

const myObject = { firstValue: 1, secondValue: 2, thirdValue 3 };
const { secondValue, thirdValue, firstValue } = myObject;

firstValue;
> 1

secondValue;
> 2

thirdValue;
> 3

Os elementos podem ser ignorados com a omissão de um identificador:

const myArray = [ 1, 2, 3 ];
const [ firstValue,, secondValue ] = myArray;

firstValue;
> 1

secondValue;
> 3

A sintaxe de desestruturação também permite atribuir valores padrão no caso de uma o valor é um espaço vazio, como no caso de uma matriz esparsa, ou um Valor de undefined.

const myArray = [ true, ];
const [ firstValue = "Default string.", secondValue = "Default string." ] = myArray;

firstValue;
> true

secondValue;
> "Default string."

A desconstrução não força valores para tipos específicos. Isso significa que Valores "falsy", como valores vazios strings ("") ou null ainda são consideradas valores desconstruídos significativos:

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

Operador de propagação

Usar o operador de propagação (...), introduzido no ES6 para expandir dados iteráveis. como uma matriz, string ou literal de objeto em elementos individuais. O operador "Spread" é imediatamente seguido pela estrutura de dados a ser expandida. ou o identificador de uma variável que contém essa estrutura de dados.

const myArray = [ 1, 2, 3 ];

console.log( ...myArray );
> 1 2 3

A sintaxe de propagação é usada principalmente para copiar e combinar matrizes:

const myArray = [ 4, 5, 6 ];
const mySecondArray = [1, 2, 3, ...myArray ];

mySecondArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

A sintaxe de propagação pode ser usada apenas nos seguintes contextos:

Para matrizes e strings, a sintaxe de propagação se aplica apenas quando zero ou mais argumentos em uma chamada de função ou elementos em uma matriz são esperados. O primeiro exemplo de a sintaxe do operador de propagação nesta seção funciona porque transmite ...myArray como um argumento para o método integrado console.log.

Por exemplo, não é possível atribuir os dados que estão sendo distribuídos a uma variável fora outra matriz:

const myArray = [ 1, 2, 3 ];
const spreadVariable = ...myArray;
> Uncaught SyntaxError: Unexpected token '...'

No entanto, para copiar uma matriz, distribua a original em um literal de matriz:

const myArray = [ 1, 2, 3 ];
const spreadArray = [ ...myArray ];

spreadArray;
> Array(3) [ 1, 2, 3 ]

Para mesclar os elementos que compõem duas ou mais matrizes em uma única matriz:

const myArray = [ 1, 2, 3 ];
const mySecondArray = [ 4, 5, 6 ];
const myNewArray = [ ...myArray, ...mySecondArray ];

myNewArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

Ou para passar elementos de uma matriz como argumentos individuais em uma chamada de função:

const myArray = [ true, false ];
const myFunction = ( myArgument, mySecondArgument ) => {
    console.log( myArgument, mySecondArgument );
};

myFunction( ...myArray );
> true false

O operador "Spread" foi expandido para funcionar com literais de objetos no ES2018 (link em inglês). Assim como nas matrizes, você pode usar o operador "Spread" para duplicar ou mesclar objetos:

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 }

O operador "Spread" cria "shallow" cópias. Isso significa que ele não copia protótipo do objeto original e não enumerável propriedades.

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 { … }

Lembre-se de que as matrizes e os objetos não podem ser usados alternadamente. Você não pode distribuir um objeto em uma matriz ou uma matriz em um objeto.

Operador de repouso

Embora a sintaxe do operador seja a mesma, o operador REST (...) executa a função oposta com base no contexto em que é usada. Em vez de expandir uma estrutura de dados iterável em elementos individuais, como acontece desestruturação de atribuição ou como uma parâmetro de função, o operador rest combina em uma estrutura de dados iterável. O nome vem do fato de que é usada para reunir "o resto" de um conjunto de valores de dados.

Quando usada com atribuição de desestruturação, a sintaxe é chamada de "propriedade de repouso" .

const myArray = [ "First", "Second", "Third", "Fourth", "Fifth" ];

[ myFirstElement, mySecondElement, ...remainingElements ] = myArray;

myFirstElement;
> "First"

mySecondElement;
> "Second"

remainingElements;
> Array(3) [ "Third", "Fourth", "Fifth"]

Quando usado para fornecer um número indefinido de argumentos para uma função, a sintaxe é chamada de "parâmetro REST", sintaxe:

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%

Matrizes tipadas são um recurso do ES6 projetado para armazenar dados binários estruturados, para ao trabalhar com arquivos enviados ou WebGL.

Assim como em Símbolos, %TypedArray% função intrínseca (geralmente, documentada como %TypedArray% ou @@TypedArray portanto não pode ser confundido com uma propriedade global) não é uma função construtora no sentido convencional, e não é possível invocá-lo com new ou chamá-lo diretamente. Em vez disso, %TypedArray% se refere a uma superclasse pai de objetos construtores, cada um dos quais funciona com um formato de dados binários específico. A A superclasse %TypedArray% intrínseca fornece propriedades e métodos utilitários que todas as subclasses do construtor %TypedArray% e as respectivas instâncias são herdadas.

Teste seu conhecimento