Conseils d'utilisation des objets JavaScript Rest et Spread (avec code)

Le contenu de cet article concerne les compétences d'utilisation des objets JavaScript Rest et Spread (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Les opérateurs Rest et Spread peuvent être utilisés pour bien plus que de simples paramètres de repos et d'expansion de tableaux.

Voici 7 astuces peu connues pour utiliser Rest et Spread avec des objets JavaScript.

Ajouter des propriétés

Cloner un objet tout en ajoutant des propriétés supplémentaires au clone (superficiel).

Dans cet exemple, l'utilisateur est cloné et l'attribut password est ajouté à 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!' }

Fusion d'objets

Fusionnez deux objets en un nouvel objet.

Fusionnez Part1 et Part2 dans 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 objets peuvent également être fusionnés en utilisant la syntaxe suivante :

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

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

Exclure les propriétés de l'objet

Les propriétés peuvent être supprimées à l'aide de la déstructuration opérateur de repos. Ici, le mot de passe est supprimé et les attributs restants sont renvoyés au repos.

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

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

Propriétés d'exclusion dynamique

La fonction accepte un accessoire comme paramètre. Les propriétés peuvent être supprimées dynamiquement d'un clone à l'aide des noms de propriétés d'objet calculés.

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

Trier les propriétés

Parfois, les propriétés ne sont pas dans l'ordre dont nous avons besoin. Grâce à quelques astuces, nous pouvons pousser les propriétés en haut de la liste ou les déplacer vers le bas.

Pour déplacer l'identifiant vers la première position, ajoutez id: undefined devant le nouvel objet avant d'étendre l'objet.

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 déplacer le mot de passe vers la dernière propriété, déstructurez le mot de passe de l'objet. Réinitialisez ensuite l'attribut du mot de passe après avoir utilisé l'opérateur Rest.

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

const organize = ({ password, ...object }) =>
  ({ ...object, password })
//              --------
//             /
// move password to last property

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

Propriétés par défaut

Les propriétés par défaut sont des valeurs qui ne sont définies que si elles ne sont pas contenues dans l'objet d'origine.

Dans cet exemple, user2 ne contient pas l'attribut quotes. La fonction setdefaults garantit que tous les objets ont l'attribut quotes défini, sinon il sera défini sur [].

Lors de l'appel de setDefaults (user2), la valeur de retour contiendra l'attribut quotes : [].

Lors de l'appel de setDefaults (user4), car user4 possède déjà l'attribut quotes, cet attribut ne sera pas modifié.

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

Si vous souhaitez que la valeur par défaut apparaisse en premier au lieu de la dernière, vous pouvez également écrire comme ceci :

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

Renommer l'attribut

En combinant ce qui précède techniques, vous pouvez créer une fonction pour renommer les propriétés.

Supposons qu'il existe des noms de propriétés d'objet avec des identifiants en majuscules qui devraient être des identifiants en minuscules. Déconstruisez d’abord l’ID de l’objet, puis ajoutez-le à nouveau en tant qu’identifiant lorsque l’objet est Spread.

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

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

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

Bonus : Ajouter des attributs conditionnels

Merci à @vinialbano d'avoir souligné que vous pouvez également ajouter des attributs conditionnellement. Dans cet exemple, le mot de passe ne sera ajouté que si le mot de passe est vrai !

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

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Vidéo du didacticiel JavaScript du site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!