Maison > interface Web > js tutoriel > le corps du texte

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

不言
Libérer: 2019-03-22 09:35:01
avant
2191 Les gens l'ont consulté

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!' }
Copier après la connexion

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!' }
Copier après la connexion

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!' }
Copier après la connexion

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' }
Copier après la connexion

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!' }
Copier après la connexion

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' }
Copier après la connexion

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!' }
Copier après la connexion

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..."]
//=> }
Copier après la connexion

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 })
Copier après la connexion

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' }
Copier après la connexion

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!' }
Copier après la connexion

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!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal