Maison >interface Web >js tutoriel >Comment créer des valeurs et des objets dynamiques en JavaScript ?

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

WBOYavant: 2023-09-20 10:57:04726parcourir

如何在 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 = &#39;KeyName&#39;;
const obj = { [key] : &#39;value&#39;};

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>

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>

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!

JavaScript json html 对象算法

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment obtenir le facteur d'échelle d'objet d'une image à l'aide de FabricJS ?Article suivant：Comment obtenir le facteur d'échelle d'objet d'une image à l'aide de FabricJS ?

Articles Liés

Voir plus