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 oddmatriz são o operador spread. O operador spread ( ...) descompacta os elementos do oddarray.
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); // -1Linguagem 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); // -1Linguagem de código: JavaScript ( javascript )O operador spread espalha os elementos do array assim aé 1e bé 2neste 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 charsarray 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.
