Destruição de objetos, parâmetros de descanso e sintaxe espalhada | Explicado em JavaScript

Destruição de objetos, parâmetros de descanso e sintaxe de espalhamento são considerados tópicos avançados de JavaScript. Vamos dividi -los em etapas compreensíveis e explicar com exemplos. Todos esses três recursos foram introduzidos em JavaScript com o lançamento do Ecmav6 JavaScript (ES6 JS)

Destruição de objetos

É o processo de retirar os "valores" dos pares de valor-chave de um objeto e colocá-los em variáveis ​​individuais com uma única linha de código. Esta única linha de código não apenas atribui valores às variáveis, mas também cria essas variáveis. Podemos dizer que estamos declarando e inicializando várias variáveis ​​em uma única linha de código com destruição de objetos.

Sintaxe da destruição de objetos:
Após a declaração variável (const, let, var) coloque os identificadores das variáveis ​​dentro dos colchetes encaracolados e coloque toda essa equação igual ao objeto que queremos destruir. Lembre-se, o nome das variáveis ​​deve ser o mesmo que a "chave" dos pares de valor-chave do objeto.

const identifier1, identificador2, identificador3 = objectName;

Nota: Não há como destruir o "operador", no entanto, a declaração acima é chamada de "operador de atribuição de destruição"

Exemplo:

Para demonstrar a destruição do objeto, primeiro criaremos um objeto em JavaScript usando as seguintes linhas de código:

Telefone =
Nome: 'iPhone',
Modelo: '13 Pro ',
Empresa: 'Apple',
Popularidade: 10

Agora que temos nosso objeto, podemos destruí -lo em várias variáveis, com a seguinte linha de código:

const nome, modelo = telefone;

Nota: Estamos apenas destruindo o objeto e armazenando dois valores com a chave "nome" e "modelo", é por isso que precisamos dar o nome do identificador da mesma forma que as chaves dos pares de valores-chave.

Você pode até acessar os valores usando variáveis ​​como:

console.log ("O nome do celular é:" + nome);
console.log ("O modelo do celular é:"+ modelo);

O trecho de código completo deste exemplo é como

Telefone =
Nome: "iPhone",
Modelo: "13 Pro",
Empresa: "Apple",
Popularidade: 10,
;
const nome, modelo = telefone;
console.log ("O nome do celular é:"+nome);
console.log ("O modelo do celular é:"+ modelo);

Você obterá a seguinte saída quando executar este código:

Isto é, para destruir objetos em JavaScript ES6

Parâmetros de descanso

Os parâmetros restantes são usados ​​quando não temos certeza de quantos parâmetros uma função deve levar. Promovemos o compilador usando o operador de ponto triplo antes do nome do parâmetro para deixar claro que este é um parâmetro de descanso e não um parâmetro normal.

Os valores dentro do parâmetro restante são armazenados como uma matriz sob o mesmo identificador que o próprio parâmetro.

Sintaxe
Como mencionado acima, usamos um operador de ponto triplo antes do identificador nos parâmetros de uma função para transformá-lo em um parâmetro de descanso

função xyz (… paramIdentifier) ​​
// corpo da função

Restrição para definir parâmetros de descanso:

• Apenas um param de descanso em uma função.
• Deve ser o último parâmetro da função

Exemplo de parâmetros de descanso

Para demonstrar o uso de parâmetros de repouso com JavaScript, criaremos uma função simples que resume os números dados a ele como argumentos com as seguintes linhas de código:

Função soma (a, b)
retornar a+b;

Como você pode ver, essa função pode somar apenas 2 números, mas queremos uma função que possa levar uma quantidade indefinida de números e resumir para nós, por isso alteramos a função para fazer com que pareça o seguinte:

função soma (… números)
resultado = 0;
para (valor dos números)
resultado = resultado + valor;

resultado de retorno;

Como você pode ver, estamos pegando apenas 1 parâmetro, que é o parâmetro restante que permitirá que essa função pegue uma quantidade indefinida de números e, em seguida, estamos usando o loop para percorrer os valores colocados dentro da matriz e adicioná-los no outro. Tudo o que resta fazer é chamar essa função e imprimir o valor de retorno com as seguintes linhas de código:

console.log (soma (6, 3, 83, 55, 13, 45));
console.log (soma (1, 2, 3));

Você verá a seguinte saída na tela quando executar este código:

É isso para usar parâmetros de repouso no JavaScript, agora podemos passar para o nosso próximo tópico.

Espalhe sintaxe

É usado para transmitir os elementos de um objeto iterável (uma matriz ou uma string) para os argumentos ou a lista de argumentos, como em uma única linha de código sem a necessidade de iteração manual através desse objeto iterável.

Sintaxe
A sintaxe da sintaxe de propagação é bastante básica, simplesmente usamos o operador de ponto triplo antes do nome da variável enquanto o passamos como um argumento.

(… ArgumentVariable);

Exemplo

Para demonstrar o uso da sintaxe de spread em JavaScript, precisaremos de uma função que possamos criar com as seguintes linhas de código:

função addNumbers (a, b, c, d, e)
retornar a+b+c+d+e;

Agora que temos nossa função, precisamos de uma matriz que conterá nossos números a serem adicionados,

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

A última coisa que resta a fazer é transmitir essa matriz usando a sintaxe de spread na função com a seguinte linha de código:

console.log (addNumbers (... números));

Você deve ver o seguinte resultado em seu console:

Como você pode ver, os elementos da matriz foram passados ​​com sucesso para a função como argumentos com o uso da sintaxe de spread.

Parâmetro REST VS SPRANCH SINTAX

Muitas vezes, os usuários ficam confusos entre o Parâmetros de descanso e a espalhe sintaxe para transmitir argumentos. Essa confusão é criada devido ao fato de que o operador Para ambos os recursos, é o mesmo (DOT-Operator). Para abordar essa confusão, podemos dizer isso:

• Se o operador de ponto for usado na definição da função para definir um parâmetro, será chamado de Operador de parâmetro REST.
• Por outro lado, se esse operador for usado ao passar argumentos para uma função, será chamado de Operador espalhado.

Conclusão

O JavaScript possui vários recursos, especialmente o lançamento do ECMA V6 do JavaScript bombardeou a comunidade de programação com muitos recursos úteis. Algumas dessas características são: destruição de objetos, parâmetros restantes e sintaxe de propagação. Neste post, passamos pela explicação e uso desses três recursos, juntamente com seus exemplos.