Analyse de l'utilisation de la déstructuration d'objets JavaScript (exemples détaillés)

Cet article vous apporte des connaissances pertinentes sur l'analyse de l'utilisation de la déstructuration d'objets en JavaScript. J'espère qu'il vous sera utile.

La version ES6 (ES2015) fournit à JavaScript un moyen plus pratique et plus rapide de gérer les propriétés des objets. Ce mécanisme est appelé Déstructuration (également appelé affectation de déstructuration). Mais l’utiliserez-vous vraiment ? Comprenez-vous vraiment l’utilisation de la mission de déstructuration dans divers scénarios ?

Obtenir les valeurs des objets à l'aide de la déstructuration

L'utilisation la plus basique de la déstructuration d'objets consiste à récupérer la valeur d'une clé de propriété à partir d'un objet.

Par exemple, nous définissons un objet avec deux propriétés : nom et âge

const User = {
  name: '搞前端的半夏',
  age: 18
}

Traditionnellement, nous utiliserions la notation par point (.) ou la notation en indice ([]) pour récupérer les valeurs d'un objet. L'extrait de code suivant montre un exemple de récupération d'une valeur d'un objet à l'aide de la notation par points pour récupérer l'identifiant et le nom de la valeur de l'objet. employé

Avant de vouloir obtenir la valeur d'un certain attribut dans l'objet, nous utilisions généralement ou [].

const name = User['name'];
const age = User.age;

Bien sûr, ces deux méthodes ne posent aucun problème dans la situation actuelle, mais lorsqu'il y a trop d'attributs utilisateur, nous devons constamment copier et coller, ce qui entraîne beaucoup de code répété.

Avec l'affectation de structure, nous pouvons rapidement obtenir la valeur. Par exemple, nous créons une variable en utilisant le nom de clé de l'objet et attribuons la valeur de l'objet à la même clé. De cette façon, quel que soit le nombre d'attributs, il suffit d'attribuer le nom de l'attribut, ce qui réduit également beaucoup de code répété.

const { name, age } = User;

Utilisez la déstructuration pour obtenir les valeurs des objets imbriqués

Dans l'exemple ci-dessus, l'utilisateur n'est qu'un simple objet monocouche. Nous rencontrerons également des objets imbriqués dans le développement quotidien, utilisez donc l'affectation de structure, comment pouvons-nous récupérer le. valeur dans l’objet imbriqué. Ensuite, nous redéfinissons l'objet Utilisateur et ajoutons un attribut de contact à cet objet, qui contient le téléphone de l'utilisateur. .

const User = {
  name: '搞前端的半夏',
  age: '18',
  contact:{
    phone:'110',
  }
}

Si on utilise . pour faire des allers-retours jusqu'à la valeur de phone, cela prendra deux fois

const phone = User.contact.phone;

Si on utilise l'affectation déstructurante : l'écriture est la suivante :

const  {contact:{phone}}=User
consosle.log(phone)  // 输出10.

Peu importe le nombre de niveaux d'imbrication, tant que vous suivez cette écriture, elle obtiendra certainement la valeur spécifique.

Utilisez la déstructuration d'objet pour définir une nouvelle variable et une valeur par défaut

Valeur par défaut

Bien sûr, dans le processus de développement quotidien, nous pouvons rencontrer de nombreuses situations extrêmes,

Par exemple, l'objet transmis depuis le backend peut être manquant quelque chose Certains champs

const User = {
  name: '搞前端的半夏',
}

ou attributs n'ont pas de valeurs spécifiques :

const User = {
  name: '搞前端的半夏',
  age: ''
}

Lorsque nous utilisons l'affectation déstructurante : la variable age sera créée indépendamment du fait que l'attribut age existe ou non.

const { name, age } = employee;

Lorsque User.age n'a pas de valeur spécifique, nous pouvons utiliser

const { name, age=18 } = employee;

pour donner à age une valeur par défaut.

Nouvelle variable

Attendez, attendez. Il y a encore plus de magie à découvrir dans la section déconstruction ! Comment créer une toute nouvelle variable et attribuer une valeur calculée à partir de la valeur de la propriété de l'objet ? Cela semble compliqué? Ceci est un exemple.

Que devons-nous faire lorsque nous voulons afficher la valeur combinée de l'attribut Utilisateur ?

const { name,age,detail = `${name} 今年 ${age} `} = User ;
console.log(detail); // 输出：搞前端的半夏 今年 18

Utilisation d'alias de déstructuration d'objets JavaScript

Dans la déstructuration d'objets JavaScript, vous pouvez nommer l'alias de la variable de déstructuration. Très pratique pour réduire les risques de conflits de noms de variables.

const User = {
  name: '搞前端的半夏',
  age: ''
}

Supposons que nous voulions utiliser l'affectation de déstructuration pour obtenir la valeur de l'attribut age, mais que la variable age soit déjà dans le code, à ce stade, nous devons définir un alias dans la structure.

const { age: userAge } = User;
console.log(userAge); //搞前端的半夏

Et si vous utilisez l'âge, une erreur sera signalée.

console.log(age);

Gestion des propriétés de nom dynamiques à l'aide de la déstructuration d'objets

Nous traitons souvent les données de réponse de l'API en tant qu'objets JavaScript. Ces objets peuvent contenir des données dynamiques, de sorte qu'en tant que client, nous ne connaissons peut-être même pas les noms des clés de propriété à l'avance.

const User = {
  name: '搞前端的半夏',
  age: ''
}

Lorsqu'on passe la clé en paramètre, on peut écrire une fonction qui renvoie la valeur de la propriété de l'objet User. Ici, nous utilisons [] pour accepter les paramètres, et js les récupérera de l'objet en fonction de cette paire de clés !

function getPropertyValue(key) {
    const { [key]: returnValue } = User;   
    return returnValue;
}

const contact = getPropertyValue('contact');
const name = getPropertyValue('name');
console.log(contact, name); // 空  搞前端的半夏

Déstructuration d'objets dans les paramètres de fonction et valeurs de retour

Affectation de déstructuration et transmission de paramètres

Utilisez la déstructuration d'objets pour transmettre des valeurs d'attribut en tant que paramètres aux fonctions.

const User = {
  name: '搞前端的半夏',
  age: 18
}

name Créons maintenant une fonction simple qui crée un service de messages en utilisant les valeurs d'attribut et pour vous connecter à la console du navigateur.

function consoleLogUser({name, age}) {
  console.log(`${name} 今年 ${age}`); 
}

Transmettez les valeurs directement comme arguments de fonction et utilisez-les en interne.

consoleLogUser(User); // 搞前端的半夏 今年 18

Valeur de retour de l'objet Destructor

Il existe une autre utilisation du destructeur d'objet. Si la fonction renvoie un objet, vous pouvez déstructurer la valeur directement en variable. Créons une fonction qui renvoie un objet.

function getUser() {
  return {
    'name': '搞前端的半夏',
    'age': 18
  }
}

const { age } = getUser();
console.log(age); // 18

Utiliser la déstructuration d'objets dans les boucles

La dernière (mais non la moindre) utilisation dont nous discuterons est la déstructuration de boucles. Considérons un ensemble d'objets employés. Nous voulons parcourir le tableau et utiliser les valeurs de propriété de chaque objet employé.

const User= [
  { 
       'name': '爱分享的半夏',
    'age': 16
  },
  { 
      'name': '搞前端的半夏',
    'age': 18
  },
  { 
        'name': '敲代码的半夏',
    'age': 20
  }
];

Vous pouvez utiliser une boucle for-of pour parcourir l'objet User, puis utiliser la syntaxe d'affectation de déstructuration d'objet pour récupérer les détails.

for(let {name, age} of employees) {
  console.log(`${name} 今年${age}岁!!!`);
}

Recommandations associées : Tutoriel d'apprentissage Javascript

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!