Quelles sont les nouvelles fonctionnalités d'es6

Nouvelles fonctionnalités d'ES6 : 1. Ajouter des attributs aux objets ; 2. Fusionner des objets ; 3. Supprimer les attributs des objets ; 5. Ajuster la position des attributs d'objet ; . Renommez les propriétés de l'objet ; 8. Propriétés conditionnelles.

L'environnement d'exploitation de cet article : système Windows 7, ECMAScript version 6.0, ordinateur Dell G3.

Nouvelles fonctionnalités d'ES6 :

1. Ajouter des attributs à l'objet

Cloner l'objet, et en même temps. (peu profond) cloner l'objet Ajoutez des attributs supplémentaires, comme indiqué dans le code suivant :

const user = { id: 10, name: 'Tom'}const userWithPass = { ...user, password: 'Password!' }user //=> { id: 10, name: 'Tom' }userWithPass //=> { id: 10, name: 'Tom', password: 'Password!' }

Dans cet exemple, l'utilisateur est cloné dans userWithPass et l'attribut password est ajouté à l'objet userWithPass. Le code est simple et. efficace.

2. Fusionner des objets

Nous donnons un exemple pour illustrer comment faire fonctionner

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

Dans cet exemple, nous fusionnons part1 et part2 dans un objet user1 , vous pouvez également fusionner des objets des manières suivantes

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

3. Supprimer les attributs de l'objet

Vous pouvez utiliser la destruction en conjonction avec l'opérateur REST pour supprimer les attributs .

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

4. Supprimer dynamiquement les attributs

Vous pouvez utiliser le nom de l'attribut de l'objet, puis RemoveProperty transmet le nom de l'attribut pour supprimer l'attribut

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

5. Ajustez la position des attributs de l'objet

Parfois, les attributs ne rentrent pas dans l'ordre dont nous avons besoin. En utilisant quelques astuces, nous pouvons pousser les attributs en haut de la liste, ou les déplacer vers le bas, par exemple :

const user3 = { password: 'Password!', name: 'Naboo', id: 300}const organize = object => ({ id: undefined, ...object })// -------------// /// move id to the first propertyorganize(user3)//=> { id: 300, password: 'Password!', name: 'Naboo' }

Dans cet exemple, l'identifiant a été déplacé vers la première position. l'attribut de mot de passe. jusqu'au dernier bit

const user3 = { password: 'Password!', name: 'Naboo', id: 300}const organize = ({ password, ...object }) => ({ ...object, password })// --------// /// move password to last propertyorganize(user3)//=> { name: 'Naboo', id: 300, password: 'Password!' }

6. Attribut par défaut

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

Il convient de noter que la valeur de l'attribut par défaut ne sera définie que si elle n'est pas contenue. dans l'objet d'origine. À partir de cela, à en juger par les résultats de l'exemple, nous savons comment définir la valeur par défaut. Ou vous devrez peut-être aussi écrire comme ceci

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

7. Renommez les attributs de l'objet

Dans certains scénarios, par exemple, nous devrons peut-être changer la casse du les attributs de l'objet, alors nous pouvons renommer

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })const user = {ID: 500,name: "Bob Fossil"}renamed(user) //=> { id: 500, name: 'Bob Fossil' }//将大写ID改成了小写的

de cette façon 8. Attribut conditionnel

C'est parfois très pratique à en juger par le nom, cela montre que le. l'objet est contrôlé par des conditions. Propriétés de

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

Recommandations vidéo associées : Tutoriel vidéo PHP

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!