Criando arrays em JavaScript

Os arrays são utilizados no JavaScript para armazenar conjuntos de dados. Eles são representados pelo objeto Array, que oferece uma variedade de propriedades e métodos para gerenciar o array e seus elementos.

Como Criar um Array

É possível criar um array vazio usando colchetes ou o construtor Array:

const users = new Array();
const people = [];

console.log(users); // Array[0]
console.log(people); // Array[0]

Também é possível inicializar um array com uma série de elementos:

const users = new Array("Tom", "Bill", "Alice");
const people = ["Sam", "John", "Kate"];

console.log(users); // ["Tom", "Bill", "Alice"]
console.log(people); // ["Sam", "John", "Kate"]

É possível definir um array e adicionar novos elementos durante a execução:

const users = [];
users[1] = "Tom";
users[2] = "Kate";
console.log(users[1]); // "Tom"
console.log(users[0]); // undefined

Outra forma de inicializar arrays é por meio do método Array.of(), que aceita elementos e os utiliza para inicializar o array:

const people = Array.of("Tom", "Bob", "Sam");
console.log(people); // ["Tom", "Bob", "Sam"]

A Função Array.from

A função Array.from oferece vários usos, veja os mais comuns:

Array.from(arrayLike)
Array.from(arrayLike, function mapFn(element) { ... })
Array.from(arrayLike, function mapFn(element, index) { ... })

Essa função aceita um primeiro parâmetro que pode ser outro array ou uma string, que consiste em um conjunto de caracteres. Veja um exemplo:

const array = Array.from("Hello");
console.log(array); // ["H", "e", "l", "l", "o"]

Também é possível passar uma função de mapeamento como segundo argumento para transformar os elementos do array:

const numbers = [1, 2, 3, 4];
const array = Array.from(numbers, (n) => n * n);
console.log(array); // [1, 4, 9, 16]

Outra versão da função Array.from aceita uma função de transformação que, além do elemento, recebe o índice do elemento:

const array = Array.from({ length: 3 }, (element, index) => {
  console.log(element); // undefined
  return index;
});
console.log(array); // [0, 1, 2]

Aqui, um objeto é passado para a função, cuja propriedade length é igual a 3. Para a função Array.from, isso indica que o array resultante deve ter três elementos. Importante notar que o valor do elemento recebido pela função de transformação do segundo parâmetro (parâmetro element) será sempre undefined. No entanto, o valor length:3 sinaliza que o array resultante terá três elementos, com índices de 0 a 2. E, por meio do segundo parâmetro da função de transformação, que é o parâmetro index, podemos obter o índice atual do elemento.

Além disso, podemos passar um objeto onde os nomes das propriedades são índices. Neste caso, o objeto se transformará em um objeto semelhante a um array, que pode ser percorrido:

const array = Array.from({ length: 3, 0: "Tom", 1: "Sam", 2: "Bob" }, (element) => {
  console.log(element);
  return element;
});
console.log(array); // ["Tom", "Sam", "Bob"]

Propriedade length

Para verificar o tamanho de um array, utiliza-se a propriedade length:

const fruits = [];
fruits[0] = "maçãs";
fruits[1] = "peras";
fruits[2] = "ameixas";

console.log("No array fruits há", fruits.length, "elementos"); // No array fruits há 3 elementos

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Na prática, o tamanho do array é o índice do último elemento adicionado mais um. Por exemplo:

const users = []; // array tem 0 elementos
users[0] = "Tom";
users[1] = "Kate";
users[4] = "Sam";
for (let i = 0; i < users.length; i++) {
  console.log(users[i]);
}

Saída no console do navegador:

Tom
Kate
undefined
undefined
Sam

Mesmo que não haja elementos nos índices 2 e 3, o tamanho do array será 5, com os elementos dos índices 2 e 3 como undefined.