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

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

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

Autor