Graças ao ES6 e a outros aplicativos como o Babel, escrever em JavaScript tornou-se incrivelmente dinâmico, desde a nova sintaxe da linguagem até a análise personalizada, como o JSX. Tornei-me um grande fã do operador spread, três pontos que podem mudar a maneira como o senhor realiza tarefas em JavaScript. A seguir, apresento uma lista dos meus usos favoritos do operador spread no JavaScript!
Chamando funções sem aplicar
Até este ponto, chamamos o Function.prototype.applypassando um array de argumentos, para chamar uma função com um determinado conjunto de parâmetros mantido por um array:
function doStuff (x, y, z) { }
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
Com o operador de spread, podemos evitar apply e simplesmente chamar a função com o operador de spread antes da matriz:
doStuff(...args);
O código é mais curto, mais limpo e não há necessidade de usar um null!
Combine Arrays (Combinar Matrizes)
Sempre houve um várias maneiras de combinar matrizesmas o operador de propagação oferece um novo método de combinação de matrizes:
arr1.push(...arr2) // Adds arr2 items to end of array arr1.unshift(...arr2) //Adds arr2 items to beginning of array
Se quiser combinar duas matrizes e colocar elementos em qualquer ponto da matriz, o senhor pode fazer o seguinte:
var arr1 = ['two', 'three']; var arr2 = ['one', ...arr1, 'four', 'five']; // ["one", "two", "three", "four", "five"]
Sintaxe mais curta do que outros métodos e, ao mesmo tempo, adiciona controle posicional!
Cópia de matrizes
Obter uma cópia de um array é uma tarefa frequente, algo que usamos Array.prototype.slice para fazer no passado, mas agora podemos usar o operador de propagação para obter uma cópia de uma matriz:
var arr = [1,2,3]; var arr2 = [...arr]; // like arr.slice() arr2.push(4)
Lembre-se: os objetos dentro da matriz ainda são por referência, portanto, nem tudo é “copiado”, por si só.
Converter argumentos ou NodeList em Array
Assim como na cópia de arrays, usamos o Array.Prototype.slice para converter NodeList e arguments objetos e para matrizes verdadeiras, mas agora podemos usar o operador de propagação para concluir essa tarefa:
[...document.querySelectorAll('div')]
O senhor pode até mesmo obter os argumentos como uma matriz dentro da assinatura:
var myFn = function(...args) {
// ...
}
Não se esqueça de que o senhor também pode fazer isso com Array.from!
Usando Math Funções
É claro que o operador spread “espalha” uma matriz em diferentes argumentos, portanto, qualquer função em que o spread é usado como argumento pode ser usada por funções que podem aceitar qualquer número de argumentos.
let numbers = [9, 4, 7, 1]; Math.min(...numbers); // 1
O Math é um exemplo perfeito do operador de propagação como o único argumento de uma função.
Desestruturação divertida
A desestruturação é uma prática divertida que estou usando bastante em meus projetos React, bem como em outros aplicativos Node.js. É possível usar a desestruturação e o operador rest juntos para extrair as informações em variáveis como o senhor quiser:
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
As propriedades restantes são atribuídas à variável após o operador de spread!
O ES6 não apenas tornou o JavaScript mais eficiente, mas também mais divertido. Todos os navegadores modernos suportam a nova sintaxe do ES6, portanto, se o senhor ainda não teve tempo de brincar com ela, definitivamente deveria. Se preferir fazer experiências independentemente do ambiente, não deixe de conferir meu post Primeiros passos com o ES6. De qualquer forma, o operador de spread é um recurso útil do JavaScript que o senhor deve conhecer!
