3 coisas que você não sabe sobre matrizes JavaScript

Matrizes são um recurso amplamente utilizado de linguagens de programação; eles são variáveis ​​especiais que pode ser usado para armazenar vários valores ao mesmo tempo. No entanto, quando se trata de JavaScript, por mais fácil que seja aprender, há sempre mais para explorar.

Neste post, vamos dar uma olhada em três características menos conhecidas, porém importantes, de matrizes JavaScript que você talvez não conhecesse antes.

1. Adicionar propriedades personalizadas a matrizes

Se você fosse vasculhar a Internet em busca de uma definição completa dos arrays de JavaScript, você descobrirá que quase todas as fontes sem falhas listarão o array como realmente é, um objeto.

Na verdade, quase tudo com que lidamos no JavaScript acaba por ser um objeto. Existem dois tipos de tipos de dados em JavaScript, primitivos e objetos, mas primitivos são sempre embrulhados dentro de objetos.

Matriz, Função, Data, etc. são objetos JavaScript predefinidos que incorporam métodos, propriedades e sua própria sintaxe padronizada.

Matrizes JavaScript podem ter três tipos diferentes de propriedades:

1. Índices de um array também são propriedades
2. Propriedades incorporadas
3. Propriedades personalizadas você pode adicionar por si mesmo

Os dois primeiros são mais conhecidos, você pode usá-los todos os dias, mas vamos vê-los rapidamente antes de entrar em como você pode adicionar sua própria propriedade personalizada a um array.

Índices como propriedades

Matrizes JavaScript usam o sintaxe de colchetes, tal como var ary = ["orange", "apple", "lichia"];.

Índices de elementos de matriz são basicamente propriedades onde o nomes de propriedade está sempre inteiros não negativos.

o par de elemento de índice de uma matriz é semelhante ao par de valores-chave de um objeto.

Índices são uma característica exclusiva do objeto Array e, ao contrário de suas outras propriedades internas, podem ser definido com a sintaxe de colchetes sozinho, tal como ary [3] = "pêssego";.

Propriedades incorporadas

Arrays também têm propriedades incorporadas, tal como array.length. o comprimento propriedade carrega um valor inteiro que denota o comprimento de um array.

Em geral, as propriedades internas podem ser encontradas com frequência em objetos JavaScript predefinidos, como matrizes. Juntamente com os métodos incorporados, eles ajudam personalize objetos genéricos para que os objetos estejam aptos para diferentes necessidades.

As propriedades incorporadas podem ser acessadas com o object.key ou o objeto ["chave"] sintaxe. Então você também pode escrever ary ["comprimento"] para acessar o comprimento de um array.

Criar propriedades personalizadas para o objeto Array

Agora vamos falar sobre adicionando suas próprias propriedades aos arrays. Matrizes são objetos predefinidos que armazenam diferentes tipos de valores em diferentes índices.

Geralmente não há muita necessidade de adicionar propriedades personalizadas a uma matriz; Essa é uma das razões pelas quais os iniciantes geralmente não são ensinados sobre esse recurso. Na verdade, se você quiser tratar uma matriz como um objeto normal adicionando pares de valor-chave a ela, também pode use um objeto normal para o seu propósito. Mas isso não significa que não haja casos especiais onde você pode fazer uso do fato de que uma matriz é um objeto, adicionando uma ou mais propriedades personalizadas a ela.

Por exemplo, você pode adicionar uma propriedade personalizada a uma matriz que identifica o "tipo" ou a "classe" de seus elementos, como você pode ver no exemplo abaixo.

 var ary = ["orange", "apple", "lichia"]; ary.itemClass = "frutos"; console.log (ary + "são" + ary.itemClass); // "laranja, maçã, lichia são frutas" 

Observe que a propriedade personalizada adicionada a uma matriz é enumerável, o que significa que será captado por loops como o para ... em declaração.

2. Loop through Array Elements

Você provavelmente diz "Eu já sei disso", o que provavelmente é verdade, você já sabe como passar pelos elementos da matriz. Mas também é verdade que dizer "loop through array elements" é um pouco abstrato, pois o que nós realmente percorremos é o índices do array.

Como os índices de array são compostos apenas de números inteiros não negativos, nós iteramos um valor inteiro tipicamente começando do zero e terminando no comprimento total da matriz, então usamos esse valor iterado para acessar o elemento da matriz em um determinado índice.

No entanto, desde ECMAScript6, há uma maneira de diretamente loop através dos valores da matriz sem se preocupar com índices, e isso pode ser feito usando o para de laço.

Em uma matriz, o para de loop irá percorrer os elementos da matriz na ordem dos índices, em outras palavras, ele vai cuidar de iterar sobre os índices e obter um valor de matriz existente em um determinado índice. Esse loop é ideal se você quiser apenas percorrer todos os elementos da matriz e trabalhar com eles.

 var ary = ["orange", "apple", "lichia"]; para (let item of ary) console.log (item);  // "laranja", "maçã", "lichia" 

Para comparação, com o regular para loop, obtemos os índices em vez dos valores como saída.

 var ary = ["orange", "apple", "lichia"]; para (var item = 0; item < ary.length; item++) console.log(item);  // 0, 1, 2

3. O número de elementos não é seu comprimento

Normalmente, quando falamos sobre o comprimento de um array, pensamos que é o número de valor que uma matriz contém ou o tamanho que damos ao array manualmente. No entanto, na realidade, o comprimento de uma matriz depende o maior índice existente dentro dela.

O comprimento é um propriedade muito flexível. Se você já corrigiu o tamanho de uma matriz antecipadamente ou não, se continuar adicionando valores à matriz, o comprimento continua aumentando de acordo.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6

No exemplo acima, você pode ver que eu dei à matriz apenas um valor no índice 5, e o tamanho se tornou 6. Agora, se você acha que adicionando um valor no índice 5, a matriz criou os índices de 0 a 4 automaticamente , então sua suposição está incorreta. Existem realmente sem índices existentes de 0 a 4 nessa matriz. Você pode verificar isso usando o em operador.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 console.log (0 in ary); // false

O array ary é o que chamamos de matriz "esparsa", uma matriz onde os índices não são criados continuamente, e tem lacunas. O oposto de uma matriz "esparsa" é o array "denso" onde os índices existem continuamente na matriz, e o número de elementos é o mesmo que o comprimento.

o comprimento propriedade também é capaz de truncar uma matriz, certificando-se de que o maior índice presente no array seja sempre menos que isso, Como comprimento é sempre numericamente maior que o índice mais alto por padrão.

No exemplo abaixo, você pode ver como perdemos o elemento no índice 5 diminuindo o comprimento do ary matriz.

 var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 ary.length = 2; console.log (ary.length); // 2 console.log (ary [5]); // Indefinido

Leitura Adicional

• 10 termos de JavaScript que você deve saber agora
• 4 declarações JavaScript não tão comuns, mas úteis, que você deve saber
• Otimização de código com JS Hint - uma ferramenta para linting Javascript