Get best of the week

7 astuces avec les opérateurs Rest et Spread lors de l'utilisation d'objets JS

Bonjour, Habr! Je vous présente la traduction de l'article «7 astuces avec des objets JavaScript au repos et en diffusion» de Joel Thoms.

Bonjour à tous, un collègue de travail m'a récemment lancé un lien vers un article en anglais qui répertorie les différentes méthodes de travail avec les opérateurs de repos et d'épandage. Elle m'a été utile et j'ai décidé de la traduire. Commençons donc.

image

Les opérateurs Rest et Spread peuvent être utilisés non seulement pour combiner des arguments dans un tableau et combiner des tableaux.

Dans cet article, vous trouverez les 7 astuces les moins connues de l'utilisation des opérateurs de repos et de propagation.

1. Ajout de propriétés


Clonage d'un objet tout en ajoutant au nouvel objet à l'objet cloné.
Dans l'exemple ci-dessous, nous clonons l'objet utilisateur et ajoutons la propriété password à l'objet userWithPass cloné .

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. Fusion d'objets


Analyse des processus part1 et part2 merzhatsya an object 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!' }

Les mêmes objets peuvent donc être contigus en utilisant cette syntaxe.

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

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

3. Suppression d'une propriété d'un objet


Les propriétés d'un objet peuvent être supprimées à l'aide d'une combinaison d'instructions de déstructuration et de repos. Dans l'exemple ci-dessous, nous détruisons l'objet rest et en supprimons la propriété password .

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

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

4. Suppression dynamique des propriétés


Dans l'exemple ci-dessous, la fonction removeProperty prend prop comme argument. En utilisant le nom de propriété passé dans l'argument, nous excluons dynamiquement la propriété de l'objet cloné.

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. Organisation ou tri des propriétés par nom


Parfois, les propriétés de l'objet ne sont pas dans l'ordre dont nous avons besoin. En utilisant plusieurs astuces, nous pouvons pousser les propriétés en haut de la liste, ou au milieu, par exemple.

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

Pour mettre le mot de passe à la fin, vous devez d'abord détruire l'objet et supprimer le mot de passe , puis utiliser l'opérateur de propagation pour l'ajouter.

6. Propriétés par défaut


Les propriétés par défaut sont les propriétés qui seront définies si elles ne se trouvent pas dans l'objet cloné.

Dans l'exemple ci-dessous, le champ guillemets est manquant dans l'objet user2 . La fonction setDefaults, en l'absence du champ guillemets , le définit par défaut avec la valeur [] . Après avoir appelé la fonction setDefaults (user2) , elle renvoie une propriété avec la valeur quotes: [] Lors de l'appel de setDefaults (user4), la fonction renvoie une valeur non modifiée car l'objet user4 a déjà la propriété quotes




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

Vous pouvez également l'écrire comme ceci si vous souhaitez que les valeurs par défaut soient affichées en premier:

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

7. Renommer des propriétés


En utilisant les astuces ci-dessus, nous pouvons également créer une fonction qui nous renomme les propriétés de l'objet.

Imaginez que nous ayons un objet avec l'ID de propriété écrit en majuscules et que nous devons le renommer en minuscules. Nous commençons par supprimer la propriété ID de l'objet. Ajoutez-le ensuite avec l'ID de nom pendant que l'objet est cloné.

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

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

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

8. Bonus. Ajout d'une propriété basée sur une condition


Merci à @vinialbano d' avoir montré une telle méthode. Dans cet exemple, nous ajoutons le champ de mot de passe uniquement si 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!' }

Conclusion


J'ai essayé d'énumérer quelques méthodes moins connues d'utilisation des opérateurs de repos et de propagation. Si vous connaissez d'autres méthodes qui ne figurent pas dans cette liste, veuillez en parler dans les commentaires. Si cet article vous a été utile, veuillez le republier à vos amis et connaissances.

More articles:


All Articles