Neste tutorial, você aprenderá sobre o operador spread JavaScript com a ajuda de exemplos.
O operador spread é uma nova adição aos recursos disponíveis na versão JavaScript ES6 .
Operador Spread
O operador spread … é usado para expandir ou espalhar um iterável ou uma matriz. Por exemplo,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
Nesse caso, o código:
console.log(… arrValue)
é equivalente a:
console.log('My', 'name', 'is', 'Jack');
Copiar Array Usando Spread Operator
Você também pode usar a sintaxe de propagação … para copiar os itens em uma única matriz. Por exemplo,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Clone Array Usando Spread Operator
Em JavaScript, os objetos são atribuídos por referência e não por valores. Por exemplo,
let arr1 = ( 1, 2, 3); let arr2 = arr1; console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3, 4)
Aqui, as variáveis arr1 e arr2 estão se referindo à mesma matriz. Portanto, a mudança em uma variável resulta na mudança em ambas as variáveis.
No entanto, se você deseja copiar matrizes para que não se refiram à mesma matriz, você pode usar o operador de propagação. Dessa forma, a mudança em uma matriz não se reflete na outra. Por exemplo,
let arr1 = ( 1, 2, 3); // copy using spread syntax let arr2 = (… arr1); console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3)
Operador Spread com Objeto
Você também pode usar o operador de propagação com literais de objeto. Por exemplo,
const obj1 = ( x : 1, y : 2 ); const obj2 = ( z : 3 ); // add members obj1 and obj2 to obj3 const obj3 = (… obj1,… obj2); console.log(obj3); // (x: 1, y: 2, z: 3)
Aqui, as propriedades obj1e obj2são adicionadas ao obj3uso do operador de propagação.
Parâmetro de repouso
Quando o operador de espalhamento é usado como parâmetro, ele é conhecido como o parâmetro resto.
Você também pode aceitar vários argumentos em uma chamada de função usando o parâmetro rest. Por exemplo,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Aqui,
- Quando um único argumento é passado para a
func()função, o parâmetro rest recebe apenas um parâmetro. - Quando três argumentos são passados, o parâmetro rest assume todos os três parâmetros.
Nota : Usar o parâmetro rest passará os argumentos como elementos do array.
Você também pode passar vários argumentos para uma função usando o operador spread. Por exemplo,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Se você passar vários argumentos usando o operador de propagação, a função pegará os argumentos necessários e ignorará o resto.
Nota : O operador Spread foi introduzido no ES6 . Alguns navegadores podem não suportar o uso de sintaxe de difusão. Visite o suporte do JavaScript Spread Operator para saber mais.
