Maison > interface Web > js tutoriel > le corps du texte

Comment créer des valeurs et des objets dynamiques en JavaScript ?

WBOY
Libérer: 2023-09-20 10:57:04
avant
689 Les gens l'ont consulté

如何在 JavaScript 中创建动态值和对象?

Valeur dynamique est la valeur que nous attribuons à une variable dynamique. Une variable dynamique est une variable codée en dur dans le code sans nom spécifique, et son adresse est déterminée lors de l'exécution du code. Le nom « dynamique » fait référence à une valeur qui peut être manipulée et modifiée.

Ici, nous verrons comment créer une valeur dynamique (également une partie de la valeur de l'objet) en JavaScript et modifier le nom de la variable dynamique sans accéder au groupe à l'avenir. Cela signifie que nous déclarons une variable puis que nous utilisons la même variable comme l'une des clés de l'objet et à l'avenir si nous devons changer le nom de la variable, nous pouvons la changer sans accéder à l'objet.

Pour accomplir la tâche ci-dessus, nous attribuons simplement le nom de la variable dans l'objet à l'aide de crochets [ ] comme indiqué ci-dessous -

Syntaxe

Voici la syntaxe pour créer des valeurs et des objets dynamiques -

const key = 'KeyName';
const obj = { [key] : 'value'};
Copier après la connexion

ici key et value sont des paires clé-valeur utilisées pour créer des objets, "obj" et keyName > sont les valeurs des clés.

Algorithme

  • Étape 1 - Définir les clés utilisées pour créer l'objet.

  • Étape 2 - Créez l'objet et utilisez les clés définies ci-dessus.

  • Étape 3 - Appliquez JSON.stringify() à l'objet créé ci-dessus pour afficher l'objet.

Exemple 1

Nous pouvons utiliser le programme HTML suivant pour afficher la déclaration des variables dynamiques.

<!DOCTYPE html>
<html>
<body>
   <h2> JavaScript Dynamic values </h2>
   <div id = "result"> </div>
   <script>
      const key1 = "Haircolour";
      const key2 = "Eyecolour";
      const person = {
         f_name : "Rohan",
         l_name :"Joshi",
         [key1] : "Black",
         [key2] : "Brown"
      };

      // Converting the object value to show its value in html
      str = JSON.stringify(person);
      document.getElementById("result").innerHTML = str;

      // To print value of object in console
      console.log(person);
   </script>
</body>
</html>
Copier après la connexion
Copier après la connexion

Donc, dans le code ci-dessus, nous pouvons voir que nous avons déclaré deux clés f_name et l_name dans l'objet sans utiliser d'accolades [] et nous utilisons des accolades pour les variables key1 et key2 car ces deux-là Chacune est une valeur dynamique .

Dans le résultat, nous pouvons voir que le nom de la variable key1 est Eyecolour et la valeur de la variable key2 est Haircolour.

Exemple 2

Voici un autre code qui nous éclairera davantage sur la façon de changer le nom d'une variable dynamique sans accéder à l'objet. Ici, nous échangeons simplement les noms de deux variables dynamiques dans le code.

<!DOCTYPE html>
<html>
<body>
   <h2> JavaScript Dynamic values </h2>
   <div id = "result"> </div>
   <script>
      const key1 = "Haircolour";
      const key2 = "Eyecolour";
      const person = {
         f_name : "Rohan",
         l_name :"Joshi",
         [key1] : "Black",
         [key2] : "Brown"
      };

      // Converting the object value to show its value in html
      str = JSON.stringify(person);
      document.getElementById("result").innerHTML = str;

      // To print value of object in console
      console.log(person);
   </script>
</body>
</html>
Copier après la connexion
Copier après la connexion

Dans la sortie, nous pouvons voir que les valeurs des deux variables key1 et key2 restent les mêmes mais leurs noms sont modifiés sans accéder à l'objet, c'est donc ainsi que nous créons des valeurs dynamiques en JavaScript et dans les objets.

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!

source:tutorialspoint.com
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal