O que é sintaxe espalhada em JavaScript | Explicado com exemplos

O operador de spread é usado para expandir uma instância da matriz ou uma instância de string em uma lista de argumentos como elementos individuais, os argumentos também podem ser zero ou menos que o comprimento da matriz/string iterável.

O JavaScript lançou muitos recursos com o lançamento do JavaScript ES6 em 2015, um dos recursos que eram novos no JavaScript foi o operador espalhado; O operador de spread tem um identificador semelhante aos parâmetros restantes, que é o ponto triplo "..." Antes do nome da variável.

O operador de propagação (…)

O identificador de ponto triplo quando usado antes de um nome variável em um argumento é conhecido como sintaxe de spread ou um argumento de spread. O argumento espalhado quebra o objeto iterável (matriz ou uma corda) e os passa para os argumentos.

Sintaxe

(… nome variável)

Para entender a diferença entre a saída variável normal e a variável de spread, dê uma olhada na figura abaixo:

Como a propagação funciona com o console.registro()

Para entender a funcionalidade básica do operador de propagação, você simplesmente criará um objeto de string e passa dentro do console.registro() função. Depois, use o operador de espalhamento para passar dentro do console.registro() Para examinar o comportamento do operador de propagação:

String = "Google";
console.log ("Resultado da sintaxe normal:"+ string)
console.log ("Resultado de sintaxe espalhado:");
console.log (… string);

Você obterá a seguinte saída ao executar o trecho de código acima:

A seta está apontando para a saída normal da string e o retângulo vermelho está fechando a saída da sintaxe de propagação. Você pode notar lacunas entre cada caractere da saída de sintaxe de propagação, porque é porque cada caractere está sendo tratado como um elemento diferente.

Passando a sintaxe da propagação em argumentos de uma função

Todo o objetivo da sintaxe de propagação e do operador de propagação é criar os argumentos de spread e passá -los para dentro da função. Para demonstrar isso, você criará uma função que levará 5 argumentos e imprimirá o resultado dos valores passados ​​dentro dos argumentos com as seguintes linhas de código:

Função impressa (A, B, C, D, E)
console.log (a+b+c+d+e);

Você vai criar uma matriz com 5 valores inteiros dentro dele usando a seguinte linha:

números = [1,2,3,4,5];

Para a última etapa, você vai chamar essa função usando os argumentos de spread e passar no números Array usando a sintaxe do spread como um único argumento com a seguinte linha:

impressão (… números);

O trecho completo seria:

Função impressa (A, B, C, D, E)
console.log (a + b + c + d + e);

números = [1, 2, 3, 4, 5, 6];
impressão (… números);

Depois de executar o código, você obterá a seguinte saída:

Todos os elementos dentro da matriz de números foram passados ​​como argumentos individuais para a função e, em seguida, cada argumento foi adicionado impresso no console.

Mas, e se o seu conjunto de números tiver mais elementos do que os argumentos da função?; Bem, nesse caso, apenas os 5 primeiros elementos da matriz serão usados ​​e outros serão descartados, impedindo qualquer erro.

Para mostrar isso, pegue a função mencionada acima e passe na seguinte matriz dentro dela:

Variedade:

Números = [3,52,6,7,1,3,5,3,1,5,3,6,7,3,5,6,1,2];

Usando o seguinte comando:

impressão (… números);

Você verá o seguinte resultado no console:

Você pode ver, mesmo que tivéssemos mais elementos dentro da matriz que foram passados ​​para a lista do argumento com a sintaxe do spread, os elementos extras foram todos descartados e, portanto, não conseguimos erros.

Como concatenar matrizes usando spread?

Podemos até usar a sintaxe de propagação ou o operador de propagação para concatenar elementos de matriz com outros elementos passando na matriz completa dentro de um único elemento.

Array1 = [2, 3, 4, 5, 6, 6, 7, 7];
Array2 = [1, 10, 2, 44, 66, 22, 11, 33, 56];
finalArray = [… Array1,… Array2];
console.log (finalArray);

Você obterá a seguinte saída:

Você pode ver que o FinalAlArray tem os dois Array1 e Array2 Concatenado dentro dele e apenas demos dois elementos no "FinalArray".

Isso é para a sintaxe de propagação em JavaScript.

Conclusão

A sintaxe do spread foi introduzida em JavaScript como um novo recurso com o lançamento do ES6. Sintaxe espalhada ou comumente conhecida como argumento de spread é usado para expandir os elementos de um objeto iterável -: Array ou String - sobre uma lista de argumentos de uma função passando individualmente cada elemento. Essa funcionalidade da linguagem de programação do ES6 JavaScript permite lidar com certos cenários em que você tem mais argumentos do que os parâmetros da função. O operador de spread também pode ser usado para concatenar elementos da matriz que examinamos com a ajuda de um exemplo.