Comment définir la valeur par défaut lors de la déstructuration d'un objet en JavaScript ?-js tutoriel-php.cn

Table des matières

Exemple

Grammaire

Maison

interface Web

js tutoriel

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 01, 2023 pm 06:09 PM

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>

Copier après la connexion

À 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
};

Copier après la connexion

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> 

Copier après la connexion

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>

Copier après la connexion

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!

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Will R.E.P.O. Vous avez un jeu croisé?

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7546

Tutoriel CakePHP

1381

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Comment créer et publier mes propres bibliothèques JavaScript? Mar 18, 2025 pm 03:12 PM

L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.

Comment optimiser le code JavaScript pour les performances dans le navigateur? Mar 18, 2025 pm 03:14 PM

L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.

Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Apr 04, 2025 pm 02:42 PM

Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur? Mar 18, 2025 pm 03:16 PM

L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.

Qui est payé plus de python ou de javascript? Apr 04, 2025 am 12:09 AM

Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

Comment utiliser les cartes source pour déboguer le code JavaScript minifié? Mar 18, 2025 pm 03:17 PM

L'article explique comment utiliser les cartes source pour déboguer JavaScript minifiée en le mappant au code d'origine. Il discute de l'activation des cartes source, de la définition de points d'arrêt et de l'utilisation d'outils comme Chrome Devtools et WebPack.

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Apr 04, 2025 pm 05:09 PM

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...

La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? Apr 04, 2025 pm 05:12 PM

Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...

See all articles