👩🏻‍🎓 🎅🏼 ☦️ 7 truques com operadores Rest e Spread ao trabalhar com objetos JS 😳 👴🏿 👨🏿‍✈️

Olá Habr! Apresento a você a tradução do artigo “7 truques para descansar e espalhar objetos JavaScript”, de Joel Thoms.

Olá pessoal, outro dia um colega de trabalho me enviou um link para um artigo em inglês que lista diferentes métodos de trabalho com operadores de descanso e propagação. Ela foi útil para mim e eu decidi traduzi-lo. Então, vamos começar.

imagem

Os operadores Rest e Spread podem ser usados não apenas para combinar argumentos em uma matriz e combinar matrizes.

Neste artigo, você encontrará os 7 truques menos conhecidos do uso de operadores de descanso e propagação.

1. Adicionando propriedades

Clonar um objeto enquanto adiciona ao novo objeto no objeto clonado.
No exemplo abaixo, clonamos o objeto de usuário e adicionamos a propriedade password ao objeto userWithPass clonado .

const user = { id: 100, name: 'Howard Moon'}
const userWithPass = { ...user, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon' }
userWithPass //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

2. Mesclando objetos

Analisando processos part1 e part2 merzhatsya um objeto user1

const part1 = { id: 100, name: 'Howard Moon' }
const part2 = { id: 100, password: 'Password!' }

const user1 = { ...part1, ...part2 }
//=> { id: 100, name: 'Howard Moon', password: 'Password!' }

Portanto, os mesmos objetos podem ser contíguos usando essa sintaxe.

const partial = { id: 100, name: 'Howard Moon' }
const user = { ...partial, id: 100, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

3. Removendo uma propriedade de um objeto

As propriedades de um objeto podem ser removidas usando uma combinação de instruções de desestruturação e descanso. No exemplo abaixo, destruímos o objeto restante e removemos a propriedade da senha .

const noPassword = ({ password, ...rest }) => rest
const user = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}

noPassword(user) //=> { id: 100, name: 'Howard moon' }

4. Exclusão dinâmica de propriedades

No exemplo abaixo, a função removeProperty usa prop como argumento. Usando o nome da propriedade passado no argumento, excluímos dinamicamente a propriedade do objeto clonado.

const user1 = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
//                     ----       ------
//                          \   /
//                dynamic destructuring

const removePassword = removeProperty('password')
const removeId = removeProperty('id')

removePassword(user1) //=> { id: 100, name: 'Howard Moon' }
removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }

5. Organização ou classificação de propriedades por nome

Às vezes, as propriedades no objeto não estão na ordem que precisamos. Usando vários truques, podemos enviar propriedades para o topo da lista ou para o meio, por exemplo.

const user3 = {
  password: 'Password!',
  name: 'Naboo',
  id: 300
}

const organize = object => ({ id: undefined, ...object })
//                            -------------
//                          /
//  move id to the first property

organize(user3)
//=> { id: 300, password: 'Password!', name: 'Naboo' }

Para colocar a senha no final, primeiro você precisa destruir o objeto e remover a senha e, em seguida, usar o operador de propagação para adicioná-lo.

6. Propriedades Padrão

As propriedades padrão são as propriedades que serão definidas se não estiverem no objeto clonado.

No exemplo abaixo, o campo de aspas está ausente no objeto user2 . A função setDefaults, na ausência do campo de aspas , a define por padrão com o valor [] . Depois de chamar a função setDefaults (user2) , ela retorna uma propriedade com as cotações de valor : [] Ao chamar setDefaults (user4), a função retorna um valor não modificado, pois o objeto user4 já possui a propriedade aspas

const user2 = {
  id: 200,
  name: 'Vince Noir'
}

const user4 = {
  id: 400,
  name: 'Bollo',
  quotes: ["I've got a bad feeling about this..."]
}

const setDefaults = ({ quotes = [], ...object}) =>
  ({ ...object, quotes })

setDefaults(user2)
//=> { id: 200, name: 'Vince Noir', quotes: [] }

setDefaults(user4)
//=> {
//=>   id: 400,
//=>   name: 'Bollo',
//=>   quotes: ["I've got a bad feeling about this..."]
//=> }

Você também pode escrevê-lo assim se desejar que os valores padrão sejam exibidos primeiro:

const setDefaults = ({ ...object}) => ({ quotes: [], ...object })

7. Renomeando propriedades

Usando os truques de cima, também podemos criar uma função que renomeia as propriedades do objeto para nós.

Imagine que temos um objeto com o ID da propriedade escrito em maiúsculas e precisamos renomeá-lo para minúsculas. Começamos removendo a propriedade ID do objeto. Em seguida, adicione-o novamente com o nome id enquanto o objeto estiver sendo clonado.

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })

const user = {
  ID: 500,
  name: "Bob Fossil"
}

renamed(user) //=> { id: 500, name: 'Bob Fossil' }

8. bônus. Adicionando uma propriedade com base em uma condição

Agradecemos a @vinialbano por mostrar esse método. Neste exemplo, adicionamos o campo de senha apenas se password == true !

const user = { id: 100, name: 'Howard Moon' }
const password = 'Password!'
const userWithPassword = {
  ...user,
  id: 100,
  ...(password && { password })
}

userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

Conclusão

Tentei listar alguns métodos menos conhecidos de usar operadores de descanso e propagação. Se você conhece outros métodos que não estão listados nesta lista, escreva sobre eles nos comentários. Se este artigo foi útil para você, repassá-lo para seus amigos e conhecidos.

7 truques com operadores Rest e Spread ao trabalhar com objetos JS