recherche

Maison  >  Article  >  interface Web  >  Comment définir la valeur par défaut lors de la déstructuration d'un objet en JavaScript ?

Comment définir la valeur par défaut lors de la déstructuration d'un objet en JavaScript ?

WBOY
WBOYavant
2023-09-01 18:09:061096parcourir

La fonctionnalité

在 JavaScript 中解构对象时如何设置默认值？

Tableaux et objets Déstructuration a été introduite dans la version ES6 de JavaScript. La déstructuration des tableaux et des objets nous permet de stocker leurs valeurs dans des variables distinctes. On peut alors utiliser cette variable pour accéder à la valeur d'une propriété spécifique de l'objet.

La principale chose à laquelle nous devons prêter attention lors de la déstructuration d'un objet tableau est la valeur par défaut. Par exemple, nous avons ajouté la variable property3 dans l'objet de déstructuration, mais si l'objet ne contient pas la propriété3, la déstructuration définira une valeur non définie sur la variable property3.

Les utilisateurs peuvent suivre l'exemple ci-dessous pour comprendre Destructuringcomment définir une valeur indéfinie sur une propriété inexistante.

Exemple

Dans l'exemple ci-dessous, nous avons créé un objet demo_obj qui contient les propriétés x et y avec des valeurs entières. Après cela, nous déconstruisons demo_obj et essayons de définir ses valeurs d'attribut dans les variables w, x, y et z.

Dans le résultat, nous pouvons observer que la valeur des variables w et z n'est pas définie puisqu'elle n'existe pas dans l'objet demo_obj. 

<html>
<body>
   <h2>Destructuring objects without default values in JavaScript</h2>
   <div id = "output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   let demo_obj = {
      x: 30,
      y: 60
   }
   const { w, x, y, z } = demo_obj;
   output.innerHTML += "The value of w variable is " + w + "<br/>";
   output.innerHTML += "The value of x variable is " + x + "<br/>";
   output.innerHTML += "The value of y variable is " + y + "<br/>";
   output.innerHTML += "The value of z variable is " + z + "<br/>";
</script>
</html>

À partir de l'exemple ci-dessus, les utilisateurs comprennent pourquoi nous devons définir des valeurs par défaut pour les variables lors de la déstructuration d'objets.

Grammaire

Les utilisateurs peuvent définir des valeurs par défaut selon la syntaxe suivante lors de la déstructuration d'objets en JavaScript. 

const { prop1, prop2 = default_value, prop3 = default_value } = {
   prop1 : value1,
   prop2 : value2
};

Dans la syntaxe ci-dessus, nous avons déstructuré les objets en variables prop1, prop2 et porp3. De plus, nous définissons des valeurs par défaut pour les variables prop2 et prop3.

Exemple

Dans l'exemple ci-dessous, nous créons un objet employé contenant l'identifiant, le nom et le salaire. Après cela, nous déstructurons l'objet employé dans les variables id, nom, salaire et âge. De plus, nous initialisons la variable age avec une valeur par défaut de 22.

Dans le résultat, nous pouvons observer que la variable age a une valeur de 22, qui est la valeur par défaut car l'objet employé ne contient pas l'attribut age. 

<html>
<body>
   <h2>Destructuring objects <i> with default values </i> in JavaScript.</h2>
   <div id = "output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   let employee = {
      id: "12345",
      name: "Shubham",
      salary: "10000$",
   }
   const { id, name, salary, age = 22 } = employee;
   output.innerHTML += "The value of id variable is " + id + "<br/>";
   output.innerHTML += "The value of name variable is " + name + "<br/>";
   output.innerHTML += "The value of salary variable is " + salary + "<br/>";
   output.innerHTML += "The value of age variable is " + age + "<br/>";
</script>
</html>

Exemple

Dans l'exemple ci-dessous, nous créons un objet table et le déstructurons en variables d'identification, de tiroir, de largeur et de couleur. L'utilisateur peut constater que puisque l'objet table ne contient pas de propriété width, la valeur de la variable width est de 4 pieds, ce qui est la valeur par défaut.

Pour les autres variables, il obtient la valeur des propriétés de l'objet. Par exemple, la valeur par défaut d'une variable de couleur est le noir. Néanmoins, puisque l'objet contient une propriété de couleur avec une valeur verte, le vert est attribué comme valeur de la variable de couleur. 

<html>
<body>
   <h2>Destructuring objects <i> with default values </i> in JavaScript</h2>
   <div id= "output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   let table = {
      id: "table2",
      color: "blue",
      drawers: 3,
   }
   const { id, color = "black", drawers = 5, width = "4 feet" } = table; 
   output.innerHTML += "The value of id variable is " + id + "<br/>";
   output.innerHTML += "The value of color variable is " + color + "<br/>";
   output.innerHTML += "The value of drawers variable is " + drawers + "<br/>";
   output.innerHTML += "The value of width variable is " + width + "<br/>";
</script>
</html>

L'utilisateur a appris dans ce tutoriel comment déstructurer un objet avec une valeur par défaut. De plus, les utilisateurs peuvent initialiser les variables avec certaines valeurs par défaut lors de leur création, plutôt que de leur attribuer des valeurs par défaut lors de la déstructuration de l'objet.

À partir de l'exemple ci-dessus, nous pouvons comprendre que lorsqu'un objet contient un attribut, la valeur de l'attribut sera définie sur une variable ; sinon, la variable conservera la valeur par défaut.

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!

JavaScript es6 对象
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment déplacer la ligne de base d'un seul caractère dans un texte à l'aide de FabricJS ?Article suivant：Comment déplacer la ligne de base d'un seul caractère dans un texte à l'aide de FabricJS ?

Articles Liés

Voir plus