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
Considerando `const myArray = [ 30, 50, 70 ];`, o que `myArray[1]` voltar?
70
Se `myArray` tiver três valores, o que `myArray[9]` retornará?
9
Null
Undefined