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.fromfica 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)