Neste post irá aprender como remover propriedades de um objecto em JavaScript usando desestruturação e a sintaxe ...rest .
Esta nova forma de remover propriedades de um objecto (excluindo-as de um novo objecto) dá-nos uma forma mais limpa de escrever JavaScript, com menos código e melhor legibilidade – além de ser uma operação imutável.
Antes da desestruturação, utilizaríamos tipicamente o delete palavra-chave para remover propriedades de um objecto. A questão com delete é que é uma operação mutável, mudando fisicamente o objecto e causando potencialmente efeitos secundários indesejados devido à forma como o JavaScript trata as referências dos objectos.
Ao usar a desestruturação de objectos, combinada com o resto do operador ...rest, temos uma abordagem limpa de uma linha.
O que é a desestruturação de objectos?
Desestruturação de objectos permite-nos criar variáveis a partir de nomes de propriedades de objectos, e a variável irá conter o valor do nome da propriedade – por exemplo:
const data = { a: 1, b: 2, c: 3 };const { a, b, c } = data;console.log(a, b, c); // 1, 2, 3 Utilizando const { a, b, c } = data estamos a declarar 3 novas variáveis (ab e c).
se ab e c existirem como nomes de propriedades em data, então serão criadas variáveis contendo os valores das propriedades do objecto. Se os nomes das propriedades não existirem, obterá undefined.
…descanso em Object destructuring
Vieram primeiro os parâmetros de descanso, depois vieram as propriedades de descanso!
p>Adicionadas em ECMAScript 2015 e agora na Etapa 4 – elas estão aqui para ficar e usar hoje.
Com isto em mente, como é que ...rest nos ajuda a remover uma propriedade de um objecto via desestruturação?
🎉 Descarrega-o gratuitamente!
Pronto para ir além do ForEach? Fique confiante com métodos avançados – Reduzir, Encontrar, Filtrar, Todos, Alguns e Mapear.
-
Compreender completamente como gerir estruturas de dados JavaScript com operações imutáveis - 31 páginas de sintaxe deep-dive, exemplos do mundo real, dicas e truques
- Lógica de programação mais limpa e melhor estruturada dentro de 3 horas
Como bónus extra, enviar-lhe-emos também alguns extras através de alguns emails extra.
Vamos tomar o nosso exemplo anterior e usar o ...rest sintaxe para ver o que acontece:
const data = { a: 1, b: 2, c: 3 };const { a, ...rest } = data;console.log(a); // 1console.log(rest); // { b: 2, c: 3 }Utilizando ...rest aqui (e pode chamar rest tudo o que quiser) dá-nos tudo o que resta, o urmmm “descanso” das propriedades, se quiser.
Então, não acabámos de aprender como remover uma propriedade de um objecto? Não vejo a: 1 dentro rest – foi removido!
Tecnicamente, foi excluído em vez de fisicamente “removido” do objecto – e segue um padrão imutável para escrever JavaScript e gerir o estado (sendo o estado o nosso data).
Aqui está como faríamos isto sem desestruturação do objecto ou a sintaxe restante, é muito mais enfadonho e não nos permite obter dinamicamente todas as propriedades restantes:
const data = { a: 1, b: 2, c: 3 };const a = data.a;const rest = { b: data.b, c: data.c };console.log(a); // 1console.log(rest); // { b: 2, c: 3 }Dinamicamente removendo uma propriedade por chave
Vamos dizer que temos uma chave que talvez um utilizador tenha fornecido e que queira apagar. Para isso usaremos b. Como é que removemos esse item específico? Todos os exemplos até agora têm sido codificados com valores difíceis.
P>Vamos assumir que temos 'b' como um valor algures, podemos passar isto dinamicamente para a nossa sintaxe de desestruturação usando a sintaxe de parênteses rectos , tal como uma pesquisa de objectos (em vez disso, isto cria uma nova variável baseada no valor passado dinamicamente):
const data = { a: 1, b: 2, c: 3 };const removeProp = 'b';const { : remove } = data;console.log(remove); // 2 Isso mesmo, porque estamos a construir dinamicamente uma nova variável, precisamos de usar : remove para lhe atribuir um novo nome. Caso contrário, como vamos referi-la? Não podemos referenciar pelo que teremos de nos lembrar disto.
Contudo, neste ponto podemos novamente introduzir a sintaxe restante para remover a propriedade do objecto:
const data = { a: 1, b: 2, c: 3 };const removeProp = 'b';const { : remove, ...rest } = data;console.log(remove); // 2console.log(rest); // { a: 1, c: 3 }Aí está, eliminámos com sucesso uma propriedade dinamicamente em JavaScript utilizando a desestruturação do objecto e a sintaxe restante!
Cheque o exemplo ao vivo em StackBlitz, faça uma brincadeira e fique confortável com ele:
Sumário
Percorremos um longo caminho! Esta técnica ajuda-nos a evitar operações mutáveis e a delete palavra-chave, dando-nos um padrão imutável para remover propriedades de objectos em JavaScript.
Utilizámos a desestruturação de objectos e vimos como combiná-la com a restante sintaxe para nos dar uma solução limpa para remover propriedades de objectos.
🏆 Consulte os meus cursos de JavaScript para aprender completamente o básico da linguagem profunda, padrões avançados, paradigmas de programação funcionais e orientados para objectos e tudo relacionado com o DOM. Uma série obrigatória de cursos para cada programador sério de JavaScript.
Feliz codificação!
p>P.S. este post no blog foi motivado por uma discussão limpa no Twitter que tive com Mauricio Correa! Ele é um tipo fantástico e desenvolvedor do Brasil.
🎉 Descarrega-o gratuitamente!
Pronto para ir além do ForEach? Fique confiante com métodos avançados – Reduzir, Encontrar, Filtrar, Todos, Alguns e Mapear.
- Compreender completamente como gerir estruturas de dados JavaScript com operações imutáveis
- 31 páginas de sintaxe deep-dive, exemplos do mundo real, dicas e truques
- Lógica de programação mais limpa e melhor estruturada dentro de 3 horas
Como bónus extra, enviar-lhe-emos também alguns extras através de alguns emails extra.