DEV Community

Renata Karolina
Renata Karolina

Posted on

Como criar um Array com N elementos com o mesmo valor no JS

Para criar um array com N elementos contendo o mesmo valor:

  1. Utilize o construtor Array() para criar um novo array;

  2. Utilize o método fill() para preencher o array com um valor específico;

  3. O método fill() altera todos os elementos do array para o valor fornecido;

const arr = Array(3).fill("abc")

console.log(arr) // ["abc", "abc", "abc"]

Enter fullscreen mode Exit fullscreen mode

Ao passar um argumento de número para o construtor Array(), estamos criando um array com a quantidade de espaços vazios relativos ao valor passado como parâmentro.

Array(3) // ['', '', '']

O método fill() irá preencher os espaços do array com um valor específico.

Array(3).fill("a") // ['a', 'a', 'a']

Outra alternativa: Usar o método Array.from()

Como alternativa você pode usar também o método Array.from() ao invés do contrututor Array().

const arr = Array.from({length: 3}).fill("abc")

console.log(arr) // ["abc", "abc", "abc"]
Enter fullscreen mode Exit fullscreen mode

Passamos o comprimento desejado do array para o método Array.from() como argumento.

Usando o método Array.from fica um pouco mais explícito e mais fácil de ler do que instanciar o construtor Array.

Criando um Array de N elementos não primitivos com o mesmo valor

Quando criamos um array de N elementos não primitivos com o mesmo valor, usamos o método Array.from()

const arr = Array.from({length: 3}, () => {
  return {name: "Renata Karolina"}
})

console.log(arr) // [

  {name: "Renata Karolina"},
  {name: "Renata Karolina"},
  {name: "Renata Karolina"},

] 

Enter fullscreen mode Exit fullscreen mode

Criar um array de valores não primitivos é um pouco mais complicado porque temos que garantir que os objetos do array não tenha a mesma referência.

Se os objetos estiverem armazenados no mesmo local na memória, assim que um objeto for atualizado então todos serão atualizados.

Em vez disso, nós passamos a função map() como segundo argumento para o método Array.from(). A cada chamada da função map(), retornamos um objeto.
Então se você atualizar um objeto, as mudanças não irão refletir nos outros objetos porque todos eles estarão armazenados em locais diferentes na memória.

const arr = Array.from({length: 3}, () => {
  return {name: 'Renata Karolina'};
});

console.log(arr); //
 [
   { name: 'Renata Karolina' },
   { name: 'Renata Karolina' },
   { name: 'Renata Karolina' }
 ]

arr[0].name = 'Renata Oliveira';

console.log(arr); // [ { name: 'Renata Oliveira' }, { name: 'Renata Karolina' }, { name: 'Renata Karolina' } ]
Enter fullscreen mode Exit fullscreen mode

A atualização da propriedade name do primeiro objeto não alterou a propriedade dos outros objetos.

Criando um array bidimensional com N elementos do mesmo valor:

A mesma abordagem pode ser usada para criar um array bidimensional com N elementos do mesmo valor.

const arr = Array.from({length: 2}, () =>
  Array.from({length: 3}, () => {
    return {name: 'Renata Karolina'};
  }),
);

console.log(arr); // [
   [
    { name: 'Renata Karolina' },
    { name: 'Renata Karolina' },
    { name: 'Renata Karolina' }
  ],
  [
    { name: 'Renata Karolina' },
    { name: 'Renata Karolina' },
    { name: 'Renata Karolina' }
   ]
 ]

Enter fullscreen mode Exit fullscreen mode

Perceba que utilizamos o método Array.from() duas vezes.

A chamada externa para o método Array.from() determina o tamanho do array da matriz externa.
E a chamada aninhada para Array.from() determina o tamanho de cada array aninhado.

Repetindo vários valores N vezes:

Você pode usar a mesma abordagem se precisar criar um array que repita vários valores N vezes.

const arr = Array(3).fill(['a', 'b', 'c']).flat();

console.log(arr); // 
[
  'a', 'b', 'c',
  'a', 'b', 'c',
  'a', 'b', 'c'
]

Enter fullscreen mode Exit fullscreen mode

Passamos um array de valores para o método Array.fill() e usamos o Array.flat() para nivelar o array.

Você também pode passar o map() como segundo argumento para o Array.from() quando estiver trabalhando com primitivos.

const arr = Array.from({length: 5}, () => {
  return 'a';
});

console.log(arr); // [ 'a', 'a', 'a', 'a', 'a' ]

Enter fullscreen mode Exit fullscreen mode

O exemplo acima cria um array de 5 elementos com o valor de "a".
Você pode também encadear explicitamente uma chamada para a função Array.map() na saída do método Array.from().

const arr = Array.from(Array(5)).map(() => {
  return 'a';
});

console.log(arr); // [ 'a', 'a', 'a', 'a', 'a' ]

Enter fullscreen mode Exit fullscreen mode

A função Array.map() é chamada para cada elemento no array.

Ref: Create an Array with N elements, same Value in JavaScript

Top comments (0)