🌊 🤝 🏷️ 7 trucos con operadores Rest y Spread cuando se trabaja con objetos JS 🙍🏾 ➰ 🏂🏿

Hola Habr! Les presento la traducción del artículo "7 trucos con objetos JavaScript en reposo y dispersión" por Joel Thoms.

Hola a todos, un compañero de trabajo me lanzó recientemente un enlace a un artículo en inglés que enumera diferentes métodos para trabajar con operadores de descanso y difusión. Ella fue útil para mí y decidí traducirlo. Vamos a empezar.

imagen

Los operadores Rest and Spread pueden usarse no solo para combinar argumentos en una matriz y combinar matrices.

En este artículo encontrará los 7 trucos menos conocidos para usar operadores de descanso y propagación.

1. Agregar propiedades

Clonar un objeto mientras se agrega al nuevo objeto al objeto clonado.
En el siguiente ejemplo, clonamos el objeto de usuario y agregamos la propiedad de contraseña al objeto clonado userWithPass .

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. Fusionar objetos

Analizando los procesos part1 y part2 merzhatsya un objeto usuario1

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

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

Entonces, los mismos objetos pueden ser contiguos usando esta sintaxis.

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

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

3. Eliminar una propiedad de un objeto

Las propiedades de un objeto se pueden eliminar mediante una combinación de declaraciones de desestructuración y descanso. En el siguiente ejemplo, destruimos el objeto rest y eliminamos la propiedad de contraseña .

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

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

4. Eliminación dinámica de propiedades.

En el siguiente ejemplo, la función removeProperty toma prop como argumento. Usando el nombre de propiedad pasado en el argumento, excluimos dinámicamente la propiedad del 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. Organización u ordenamiento de propiedades por nombre

A veces las propiedades en el objeto no están en el orden que necesitamos. Usando varios trucos, podemos empujar propiedades a la parte superior de la lista, o al medio, por ejemplo.

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 poner la contraseña al final, primero debe destruir el objeto y eliminar la contraseña , y luego usar el operador de propagación para agregarla.

6. Propiedades predeterminadas

Las propiedades predeterminadas son las propiedades que se establecerán si no están en el objeto clonado.

En el siguiente ejemplo, falta el campo de comillas en el objeto user2 . La función setDefaults, en ausencia del campo de comillas , la establece de manera predeterminada con el valor [] . Después de llamar a la función setDefaults (user2) , devuelve una propiedad con las comillas de valor : [] Al llamar a setDefaults (user4), la función devuelve un valor no modificado ya que el objeto user4 ya tiene la propiedad de comillas

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..."]
//=> }

También puede escribirlo así si desea que los valores predeterminados se muestren primero:

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

7. Renombrar propiedades

Usando los trucos de arriba, también podemos crear una función que nos cambie el nombre de las propiedades del objeto.

Imagine que tenemos un objeto con el ID de propiedad escrito en mayúsculas, y necesitamos cambiarle el nombre a minúsculas. Comenzamos eliminando la propiedad ID del objeto. Luego, agréguelo de nuevo con la identificación del nombre mientras se clona el objeto.

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

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

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

8. Bonificación. Agregar una propiedad basada en una condición

Gracias a @vinialbano por mostrar tal método. En este ejemplo, agregamos el campo de contraseña solo si contraseña == verdadero !

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!' }

Conclusión

Traté de enumerar algunos métodos menos conocidos de usar operadores de descanso y propagación. Si conoce otros métodos que no figuran en esta lista, escriba sobre ellos en los comentarios. Si este artículo fue útil para usted, vuelva a enviarlo a sus amigos y conocidos.

7 trucos con operadores Rest y Spread cuando se trabaja con objetos JS