Resumo : neste tutorial, você aprenderá sobre o operador spread JavaScript que espalha elementos de um objeto iterável.
Introdução ao operador de propagação JavaScript
ES6 fornece um novo operador chamado operador spread que consiste em três pontos (...)
. O operador spread permite espalhar elementos de um objeto iterável, como um array , map ou set . Por exemplo:
const odd = [1,3,5];
const combined = [2,4,6, ...odd];
console.log(combined);
Linguagem de código: JavaScript ( javascript )
Saída:
[ 2, 4, 6, 1, 3, 5 ]
Linguagem de código: JSON/JSON com comentários ( json )
Neste exemplo, os três pontos ( ...
) localizados na frente da odd
matriz são o operador spread. O operador spread ( ...
) descompacta os elementos do odd
array.
Observe que ES6 também possui três pontos ( ...
), que é um parâmetro restante que coleta todos os argumentos restantes de uma função em um array.
function f(a, b, ...args) {
console.log(args);
}
f(1, 2, 3, 4, 5);
Linguagem de código: JavaScript ( javascript )
Saída:
[ 3, 4, 5 ]
Linguagem de código: JSON/JSON com comentários ( json )
Neste exemplo, o parâmetro rest ( ...
) coleta os argumentos 3, 4 e 5 em um array args
. Portanto, os três pontos ( ...
) representam o operador spread e o parâmetro restante.
Aqui estão as principais diferenças:
- O operador spread (
...
) descompacta os elementos de um objeto iterável. - O parâmetro rest (
...
) agrupa os elementos em um array.
Os demais parâmetros devem ser os últimos argumentos de uma função . No entanto, o operador spread pode estar em qualquer lugar:
const odd = [1,3,5];
const combined = [...odd, 2,4,6];
console.log(combined);
Linguagem de código: JavaScript ( javascript )
Saída:
[ 1, 3, 5, 2, 4, 6 ]
Linguagem de código: JSON/JSON com comentários ( json )
Ou
const odd = [1,3,5];
const combined = [2,...odd, 4,6];
console.log(combined);
Linguagem de código: JavaScript ( javascript )
Saída:
[ 2, 1, 3, 5, 4, 6 ]
Linguagem de código: JSON/JSON com comentários ( json )
Observe que o ES2018 expande o operador spread para objetos, que é conhecido como object spread .
Vejamos alguns cenários onde você pode usar os operadores de spread.
Operador de propagação JavaScript e método apply()
Veja a seguinte compare()
função que compara dois números:
function compare(a, b) {
return a - b;
}
Linguagem de código: JavaScript ( javascript )
No ES5, para passar um array de dois números para a compare()
função, você costuma usar o apply()
método a seguir:
let result = compare.apply(null, [1, 2]);
console.log(result); // -1
Linguagem de código: JavaScript ( javascript )
Entretanto, usando o operador spread, você pode passar um array de dois números para a compare()
função:
let result = compare(...[1, 2]);
console.log(result); // -1
Linguagem de código: JavaScript ( javascript )
O operador spread espalha os elementos do array assim a
é 1
e b
é 2
neste caso.
Uma maneira melhor de usar o exemplo do método push() do Array
Às vezes, uma função pode aceitar um número indefinido de argumentos. Preencher argumentos de um array não é conveniente.
Por exemplo, o push()
método de um objeto array permite adicionar um ou mais elementos a um array. Se você quiser passar um array para o push()
método, você precisa usar apply()
o método da seguinte forma:
let rivers = ['Nile', 'Ganges', 'Yangte'];
let moreRivers = ['Danube', 'Amazon'];
[].push.apply(rivers, moreRivers);
console.log(rivers);
Linguagem de código: JavaScript ( javascript )
Esta solução parece detalhada.
O exemplo a seguir usa o operador spread para melhorar a legibilidade do código:
rivers.push(...moreRivers);
Linguagem de código: CSS ( css )
Como você pode ver, usar o operador spread é muito mais limpo.
Operador de propagação JavaScript e manipulação de array
1) Construindo literal de array
O operador spread permite inserir outro array no array inicializado ao construir um array usando a forma literal. Veja o exemplo a seguir:
let initialChars = ['A', 'B'];
let chars = [...initialChars, 'C', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
Linguagem de código: JavaScript ( javascript )
2) Concatenando matrizes
Além disso, você pode usar o operador spread para concatenar dois ou mais arrays:
let numbers = [1, 2];
let moreNumbers = [3, 4];
let allNumbers = [...numbers, ...moreNumbers];
console.log(allNumbers); // [1, 2, 3, 4]
Linguagem de código: JavaScript ( javascript )
3) Copiando um array
Além disso, você pode copiar uma instância de array usando o operador spread:
let scores = [80, 70, 90];
let copiedScores = [...scores];
console.log(copiedScores); // [80, 70, 90]
Linguagem de código: JavaScript ( javascript )
Observe que o operador spread apenas copia o próprio array para o novo, não os elementos. Isso significa que a cópia é superficial, não profunda.
Operador de propagação JavaScript e strings
Considere o seguinte exemplo:
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
Linguagem de código: JavaScript ( javascript )
Neste exemplo, construímos o chars
array a partir de strings individuais. Quando aplicamos o operador spread à string ‘BC’, ele distribuiu cada caractere da string 'BC'
em caracteres individuais.
Resumo
- O operador spread é indicado por três pontos (
...
). - O operador spread descompacta elementos de objetos iteráveis, como matrizes, conjuntos e mapas, em uma lista.
- O parâmetro rest também é indicado por três pontos (
...
). No entanto, ele agrupa os argumentos restantes de uma função em um array. - O operador spread pode ser usado para clonar um objeto iterável ou mesclar objetos iteráveis em um.