4 formas de gerar um array (vetor) populado em Javascript

4 formas de gerar um array (vetor) populado em Javascript

Tulio Faria
Tulio Faria25 de julho de 2021
É muito comum durante a solução de alguns problems com algorítmos de precisarmos de um array com valores padrão já inseridos.
Inclusive para gerar dados de testes. E podemos gerar o array com os mais diversos valores, como números, strings e até mesmo objetos.

O bom e velho for

A forma mais tradicional de fazer esta tarefa é utilizar o bom e velho for. Sem muitos segredos, podemos fazer o seguinte:

const array = [] const size = 10 for (let i = 0; i < size; i++) { array.push(i) } // array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Desta maneira podemos inclusive criar valores diferentes de inteiros, por exemplo:

const names = [] const size = 7 for (let i = 0; i < size; i++) { names.push({ id: i, name: `Name ${i}` }) } /* names = 0: {id: 0, name: "Name 0"} 1: {id: 1, name: "Name 1"} 2: {id: 2, name: "Name 2"} 3: {id: 3, name: "Name 3"} 4: {id: 4, name: "Name 4"} 5: {id: 5, name: "Name 5"} 6: {id: 6, name: "Name 6"} */

Uma versão alternativa:

const size = 7 const names = new Array(size) for (let i = 0; i < size; i++) { names[i] = { id: i, name: `Name ${i}` } } /* names = 0: {id: 0, name: "Name 0"} 1: {id: 1, name: "Name 1"} 2: {id: 2, name: "Name 2"} 3: {id: 3, name: "Name 3"} 4: {id: 4, name: "Name 4"} 5: {id: 5, name: "Name 5"} 6: {id: 6, name: "Name 6"} */

Array.fill

Outra forma de gerar o array com valores é utilizando o Array.fill. Nesta forma, criamos um array com o tamanho desejado e informamos o valor para qual queremos preenchê-lo.

const array = new Array(15).fill('valor') // array = ["valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor", "valor"]

Uma observação importante é que o método fill usa a mesma referência. Ou seja, se passarmos um objeto como valor no fill, todos os itens do vetor referenciarão o mesmo objeto. E caso alteramos um deles, iremos alterar todos.

const people = new Array(3).fill({ name: 'Person' }) people[0].name = 'Changed Person' /* people = 0: {name: "Changed Person"} 1: {name: "Changed Person"} 2: {name: "Changed Person"} */

Existe uma forma de mudar ligeiramente este comportamento, bastando para isso conectar o fill com um map (lembrando que map transforma um vetor em outro).

const people = new Array(3).fill(null).map(() => ({ name: 'Person' })) people[0].name = 'Changed Person' /* people = 0: {name: "Changed Person"} 1: {name: "Person"} 2: {name: "Person"} */

Array.from

Uma outra forma de criar um array é usando o Array.from. Esta versão é bastante simples:

const array = Array.from({ length: 5 }, () => 1) // array = [1, 1, 1, 1, 1] const people = Array.from({ length: 3 }, () => ({ name: 'Person' })) /* people = 0: {name: "Person"} 1: {name: "Person"} 2: {name: "Person"} */

Usando o Object.keys

Uma forma bastante interessante de gerar um array preenchido com números é usando uma característica de objetos (sim, objetos). Usaremos o Object.keys.

const numbers = Object.keys(new Array(5).fill(null)) // numbers = ["0", "1", "2", "3", "4"]

Repare que os números que foram inseridos no array estão com string. Podemos usar um map para convertê-los:

const numbers = Object.keys(new Array(5).fill(null)).map(Number) // numbers = [0, 1, 2, 3, 4]

Bom é isso :) O que gostou destas formas de gerar um vetor? Qual a sua forma favorita?
Ah, todos os nossos cursos tem um módulos somente de Javascript ;) Conheça o Fullstack Master
Tulio Faria
Autor
Tulio Faria25 de julho de 2021

Últimas do Blog