Para criar um array com N elementos contendo o mesmo valor:
Utilize o construtor
Array()
para criar um novo array;Utilize o método
fill()
para preencher o array com um valor específico;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"]
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"]
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"},
]
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' } ]
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' }
]
]
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'
]
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' ]
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' ]
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)