Criar arrays em JavaScript é uma tarefa fundamental, mas existem várias nuances e dicas que até mesmo desenvolvedores experientes podem ignorar. Vamos mergulhar no básico e explorar alguns aspectos interessantes da criação e manipulação de arrays que você pode achar esclarecedores.

Criação básica de array

A maneira mais simples de criar um array é usando literais de array:

let arr = [];

Você pode então preencher esse array usando um loop:

for (let i = 0; i 



Isso cria um array com elementos [0, 1, 2, 3, 4]. No entanto, se você criar um array vazio sem preenchê-lo, obterá um array sem itens e sem slots vazios.


  
  
  Usando o construtor Array


Outra maneira de criar arrays é usando o construtor Array:


let arr = Array(5);




Quando um único argumento numérico é passado, ele cria uma matriz esparsa com o comprimento especificado, mas sem elementos reais:


console.log(arr.length); // 5
console.log(arr); // [empty × 5]





  
  
  Matrizes esparsas


Matrizes esparsas têm "slots vazios", o que pode levar a um comportamento inesperado ao usar métodos como map, filter ou forEach. Esses métodos ignoram slots vazios:


let arr = Array(5);
arr = arr.map((x, i) => i); // Still [empty × 5]




Para preencher tal array, você precisa definir valores manualmente:


arr[0] = 2;
arr[4] = 3;
console.log(arr); // [2, empty × 3, 3]





  
  
  Manipulação de matrizes esparsas


Para lidar com matrizes esparsas de maneira eficaz, você pode usar métodos como fill para inicializar valores:


let arr = Array(5).fill(1);
console.log(arr); // [1, 1, 1, 1, 1]




Mas tenha cuidado ao preencher com objetos ou arrays:


let arr = Array(5).fill({});
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}]




Cada elemento faz referência ao mesmo objeto. Para evitar isso, use map:


let arr = Array(5).fill(0).map(() => ({}));
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {}, {}, {}, {}]





  
  
  Método Array.from


Array.from fornece uma maneira versátil de criar arrays a partir de objetos semelhantes a array ou iteráveis:


let arr = Array.from({ length: 5 }, (_, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]




Este método também pode ajudar na criação de arrays bidimensionais:


let arr2D = Array.from({ length: 5 }, () => Array(5).fill(0));
arr2D[0][0] = 1;
console.log(arr2D); // [[1, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]





  
  
  Iterando sobre matrizes


JavaScript fornece várias maneiras de iterar arrays, cada uma tratando arrays esparsos de maneira diferente:

• loop for: processa cada índice, tratando slots vazios como indefinidos.
• for...in: Itera sobre os índices do array, ignorando os slots vazios.
• for...of: Itera sobre valores, tratando slots vazios como indefinidos.

Conclusão

Compreender as complexidades da criação e manipulação de array em JavaScript pode ajudá-lo a evitar armadilhas comuns e escrever código mais eficiente. Esteja você usando literais de array, o construtor Array ou métodos como Array.from e fill, saber como essas ferramentas funcionam permitirá que você lide com arrays de maneira eficaz em seus projetos.

Se você achou este guia útil, me avise. Estou sempre ansioso para criar mais conteúdo que se aprofunde nos detalhes básicos do JavaScript. Obrigado por ler e boa codificação!