admin 
[ad_1]
Neste tutorial, você aprenderá as diferentes maneiras de usar o operador spread em JavaScript e a principal diferença entre os operadores spread e rest.
Simbolizado por três pontos (...), o operador de propagação JavaScript foi introduzido no ES6. Ele pode ser usado para expandir elementos em coleções e matrizes em elementos únicos e individuais.
O operador spread pode ser usado para criar e clonar arrays e objetos, passar arrays como parâmetros de função, remover duplicatas de arrays e muito mais.
Sintaxe
O operador spread só pode ser usado em objetos iteráveis. Deve ser usado imediatamente antes do objeto iterável, sem qualquer separação. Por exemplo:
console.log(...arr);
Parâmetros de função
Tome como exemplo o método Math.min(). Este método aceita pelo menos um número como parâmetro e retorna o menor número entre os parâmetros passados.
Se você tem uma matriz de números e deseja encontrar o mínimo desses números, sem o operador de propagação, você precisará passar os elementos um por um usando seus índices ou usar o método apply() para passar os elementos do matriz como parâmetros. Por exemplo:
const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber);
Observe que o primeiro parâmetro é nulljá que o primeiro parâmetro é usado para alterar o valor de this da função de chamada.
O operador spread é uma solução mais conveniente e legível para passar os elementos de um array como parâmetros para a função. Por exemplo:
const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(numbers);
Você pode ver isso neste exemplo ao vivo:
Veja a caneta
Use o Operador de Spread no Functions JS by SitePoint (@SitePoint)
no CodePen.
Criar matrizes
O operador spread pode ser usado para criar novos arrays a partir de arrays existentes ou outros objetos iteráveis que incluem o método Symbol.iterator(). Estes são objetos que podem ser iterados usando o for...of ciclo.
Por exemplo, pode ser usado para clonar arrays. Se você simplesmente atribuir a um novo array o valor de um array existente, fazer alterações no novo atualizará o existente:
const numbers = [15, 13, 100, 20];
const clonedNumbers = numbers;
clonedNumbers.push(24);
console.log(clonedNumbers);
console.log(numbers);
Usando o operador spread, o array existente pode ser clonado em um novo array e quaisquer alterações feitas no novo array não afetariam o array existente:
const numbers = [15, 13, 100, 20];
const clonedNumbers = [...numbers];
clonedNumbers.push(24);
console.log(clonedNumbers);
console.log(numbers);
Deve-se notar que isso apenas clonaria matrizes unidimensionais. Não funcionaria para matrizes multidimensionais.
O operador spread também pode ser usado para concatenar mais de um array em um. Por exemplo:
const evenNumbers = [2, 4, 6, 8];
const oddNumbers = [1, 3, 5, 7];
const allNumbers = [...evenNumbers, ...oddNumbers];
console.log(...allNumbers);
Você também pode usar o operador spread em uma string para criar uma matriz onde cada item é um caractere na string:
const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr);
Criar objetos
O operador spread pode ser usado de diferentes maneiras para criar objetos.
Ele pode ser usado para clonar superficialmente outro objeto. Por exemplo:
const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj);
Também pode ser usado para mesclar mais de um objeto em um. Por exemplo:
const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj);
Deve-se observar que, se os objetos compartilharem os mesmos nomes de propriedade, será usado o valor do último spread do objeto. Por exemplo:
const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj);
O operador spread pode ser usado para criar um objeto a partir de um array, onde os índices no array se tornam propriedades e o valor nesse índice se torna o valor da propriedade. Por exemplo:
const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj);
Também pode ser usado para criar um objeto a partir de uma string, onde, da mesma forma, os índices na string se tornam propriedades e o caractere nesse índice se torna o valor da propriedade. Por exemplo:
const str = 'Hello, World!';
const obj = { ...str };
console.log(obj);
Converter um NodeList em um Array
Um NodeList é uma coleção de nós, que são elementos no documento. Os elementos são acessados por meio de métodos nas coleções, como item ou entriesao contrário das matrizes.
Você pode usar o operador de propagação para converter um NodeList em um Array. Por exemplo:
const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0));
const nodeArray = [...nodeList];
console.log(nodeList[0]);
Remover duplicatas de arrays
Um objeto Set é uma coleção que armazena apenas valores exclusivos. Semelhante ao NodeList, um Set pode ser convertido em um array usando o operador spread.
Como um Set armazena apenas valores exclusivos, ele pode ser emparelhado com o operador spread para remover duplicatas de um array. Por exemplo:
const duplicatesArr = [1, 2, 3, 2, 1, 3];
const uniqueArr = [...new Set(duplicatesArr)];
console.log(duplicatesArr);
console.log(uniqueArr);
Operador de Spread vs Operador de Resto
O operador rest também é um operador de três pontos (...), mas é usado para um propósito diferente. O operador rest pode ser usado na lista de parâmetros de uma função para dizer que esta função aceita um número indefinido de parâmetros. Esses parâmetros podem ser tratados como uma matriz.
Por exemplo:
function calculateSum(...funcArgs) {
let sum = 0;
for (const arg of funcArgs) {
sum += arg;
}
return sum;
}
Neste exemplo, o operador rest é usado como parâmetro do calculateSum função. Em seguida, você percorre os itens na matriz e os soma para calcular sua soma.
Você pode então passar variáveis uma a uma para o calculateSum função como argumentos ou use o operador spread para passar os elementos de um array como argumentos:
console.log(calculateSum(1, 2, 3));
const numbers = [1, 2, 3];
console.log(calculateSum(...numbers));
Conclusão
O operador spread permite que você faça mais com menos linhas de código, mantendo a legibilidade do código. Ele pode ser usado em objetos iteráveis para passar parâmetros para uma função ou para criar arrays e objetos de outros objetos iteráveis.
Leitura relacionada:
[ad_2]
Source link
