Déstructuration d'objets JavaScript

Objets déstructurants

Comme la déstructuration des tableaux, la déstructuration des objets vous aide et rend votre code plus propre et meilleur, mais c'est différent de la déstructuration des tableaux, voici comment procéder :

• Tout d'abord, pour toute l'explication nous aurons besoin de cet objet, j'ai utilisé une analogie avec Bob l'éponge pour l'objet ??, alors jetez-y un oeil et analysez-le un peu :

let heightInCm = 4;
const obj = {
  personName: 'spongeBob',
  personAge: 37,
  personAddress: '124 Conch Street, Bikini Bottom, Pacific Ocean',
  heightInCm: 10,
  personHobbies: [
    'Jellyfishing',
    'Cooking Krabby Patties',
    'Blowing Bubbles',
    'Karate',
  ],
  home: {
    type: 'pineapple',
    location: 'bikini bottom',
    details: {
      rooms: 3,
      uniqueFeature: "it's underwater and shaped like a pineapple!",
    },
  },
};

• maintenant, détruisons deux propriétés de l'objet :

const { personName, personAge } = obj;
console.log(personName, personAge); // spongeBob 37

• comme vous l'avez vu, pour détruire un objet, vous devez utiliser des {accolades}, puis à l'intérieur, écrire des noms de variables qui sont exactement les mêmes que les noms de propriétés que nous voulons récupérer dans l'objet.

*Vous pouvez également rendre les noms de variables différents des noms de propriétés, juste à droite du nouveau nom de variable après deux points :

const { personName: name, personAge: age } = obj;
console.log(name, age); // spongeBob 37

• comme vous pouvez le voir, nous avons changé personName en name & personAge en age.

*Valeurs par défaut :

• on peut également définir des valeurs par défaut, au cas où on essaie d'accéder à une propriété qui n'existe pas dans l'objet, exemple :

const { DriversLicense = ['no'] } = obj;
console.log(DriversLicense);  // ['no']
// DriversLicense does not exist in obj, so the default value will be used.

* Mutation de variables lors de la déstructuration d'objets :

({ heightInCm } = obj);
console.log(heightInCm); // 10

• dans cet exemple, si vous regardez en arrière, vous découvrirez que heightInCm = 4 à l'extérieur de l'objet, et nous voulions attribuer la valeur à l'intérieur de l'objet à la heightInCm à l'extérieur, nous l'avons donc fait comme une déstructuration normale, MAIS JavaScript attend un bloc de code lorsque l'on commence par { } en dehors d'une fonction, nous enveloppons donc l'instruction entre parenthèses pour la rendre valide.

*Déstructuration d'objets imbriqués :

// firstway:  Extracting the Entire Nested Object 

const { details } = obj.home;
console.log(details); // { rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// second way: Extracting Specific Properties
const {
  home: { details }} = obj;

console.log(details); // {rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// third way
const {details: { rooms, uniqueFeature }} = obj.home;

console.log(rooms, uniqueFeature); // 3 "it's underwater and shaped like a pineapple!"

• Idéal pour la clarté : la première méthode peut être meilleure lorsque vous travaillez avec des objets plus grands et que vous préférez garder les choses claires en extrayant d'abord un objet entier.
• Meilleur pour efficacité : La troisième méthode est souvent la meilleure si vous n'êtes intéressé que par des propriétés spécifiques d'un objet profondément imbriqué. C'est concis et évite de créer des variables inutiles.

*Merci d'avoir lu, j'espère que vous avez tout compris, si vous avez des questions n'hésitez pas à les poser ?

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!