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

Comment échanger deux variables en JavaScript ?

WBOY
Libérer: 2023-08-30 11:45:07
avant
1283 Les gens l'ont consulté

如何在 JavaScript 中交换两个变量?

Nous apprendrons à utiliser diverses méthodes pour échanger deux valeurs de variables en JavaScript. Comprenons le sens de l'échange avec un exemple. Par exemple, nous avons deux variables appelées variable 1 et variable 2. Lorsque l'on attribue la valeur de la variable2 à la variable1 et la valeur de la variable1 à la variable2, on peut dire que nous avons échangé les valeurs de la variable1 et de la variable2.

Utiliser des variables temporaires

Nous pouvons créer une variable temporaire, c'est-à-dire toute variable pouvant stocker temporairement la valeur de la première variable. Après cela, nous pouvons attribuer la valeur de la deuxième variable à la première variable. Ensuite, nous pouvons obtenir la valeur de la première variable de la variable temporaire et l'attribuer à la deuxième variable.

Grammaire

Les utilisateurs peuvent utiliser des variables temporaires pour échanger deux valeurs de variable selon la syntaxe suivante.

let temporaryVariable = variable1;
variable1 = variable2;
variable2 = temporaryVariable;
Copier après la connexion

Dans la syntaxe ci-dessus, nous stockons la valeur de la variable 1 dans une variable temporaire. Après avoir attribué la valeur de variable2 à variable1 et attribué la valeur de TemporaryVariable à variable2.

Exemple

Dans l'exemple ci-dessous, nous avons créé deux variables et attribué des valeurs de chaîne. De plus, nous utilisons des variables temporaires pour échanger deux valeurs de variable. Dans la sortie, l'utilisateur peut voir que les valeurs de la variable 1 et de la variable 2 sont inversées.

<html>
<body>
   <h2>Using the <i> temporary variable </i> to swap two variable values in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let variable1 = "Value1";
      let variable2 = "Value2";
      let temporaryVariable = variable1;
      variable1 = variable2;
      variable2 = temporaryVariable;
      output.innerHTML += "The value of the variable1 and variable2 after swaping are the <br/>";
      output.innerHTML += "variable1 = " + variable1 + " variable2 = " + variable2;
   </script>
</body>
</html>
Copier après la connexion

Déstructuration des propriétés par affectation

Dans la version ES6 de JavaScript, la déstructuration des tableaux ou des objets a été introduite. Dans la déstructuration de tableaux, nous pouvons stocker les valeurs du tableau dans une autre ou la même variable. Ici, nous allons créer un tableau de deux variables et détruire le tableau pour échanger les deux variables.

Grammaire

Les utilisateurs peuvent utiliser la propriété de déstructuration de tableau pour échanger deux variables selon la syntaxe suivante.

[var2, var1] = [var1, var2];
Copier après la connexion

Dans la syntaxe ci-dessus, nous stockons la valeur de var1 dans var2 et la valeur de var2 dans var1.

Exemple

Dans l'exemple ci-dessous, nous avons pris var1 et var2. Après cela, nous avons créé un tableau de deux variables en utilisant var1 et var2. Lors de la déstructuration du tableau, nous attribuons la valeur de var1 à la variable var2 et la valeur de var2 à la variable var1.

<html>
<body>
   <h2>Using the <i>Assignment destructuring property</i> to swap two variable values in JavaScript </h2>
   <div id="output"> </div>
   <script>
      let output = document.getElementById('output');
      let var1 = 20;
      let var2 = 10;
      function swapVariables() {
         [var2, var1] = [var1, var2];
         output.innerHTML += "The value of the var1 and var2 after swaping are the <br/>";
         output.innerHTML += "var1 = " + var1 + " var2 = " + var2;
      }
      swapVariables()
   </script>
</body>
</html>
Copier après la connexion

Utilisez des opérateurs arithmétiques

Nous pouvons échanger deux nombres en utilisant les opérateurs arithmétiques de multiplication et de division. Pour échanger deux variables, nous pouvons effectuer des opérations arithmétiques sur deux valeurs numériques.

Grammaire

Les utilisateurs peuvent utiliser des opérateurs arithmétiques pour échanger deux valeurs de variables numériques en suivant la syntaxe suivante.

num1 = num1 * num2;  
num2 = num1 / num2; 
num1 = num1 / num2;  
Copier après la connexion

Dans la syntaxe ci-dessus, nous multiplions d'abord deux nombres et les stockons dans la variable num1. Après cela, nous divisons la nouvelle variable num1 (num1 * num2) avec la variable num2 et la stockons dans la variable num2. Ensuite, nous divisons le num1 mis à jour (num1*num2) par le num2 mis à jour et le stockons dans la variable num1.

Exemple

Dans l'exemple ci-dessous, la fonction swapNumbers() échange deux valeurs numériques. Dans le résultat de l'exemple ci-dessous, l'utilisateur peut observer les valeurs initiales des variables num1 et num2 et les valeurs après avoir échangé les deux variables.

<html>
<body>
   <h2>Using the <i>Arithmetic operators</i> to swap two variable values in JavaScript</h2>
   <div id = "output"> </div>
   <button onclick = "swapNumbers()"> Swap variables </button>
   <script>
      let output = document.getElementById('output');
      function swapNumbers() {
         let num1 = 2;
         let num2 = 4;
         output.innerHTML += output.innerHTML += "num1 = " + num1 + " num2 = " + num2 + "<br/>";

         num1 = num1 * num2;  // num1 == 8 (2*4)
         num2 = num1 / num2; // num2 == 2 (8/4)
         num1 = num1 / num2; // num1 == 4, (8/2)

         output.innerHTML += "The value of the num1 and num2 after swaping are the <br/>";
         output.innerHTML += "num1 = " + num1 + " num2 = " + num2;
      }
   </script>
</body>
</html>
Copier après la connexion

Utilisez l'opérateur XOR au niveau du bit

Lorsque nous XOR n'importe quel nombre avec lui-même, il renvoie zéro. Par conséquent, nous utiliserons cette propriété de l’opérateur XOR au niveau du bit pour échanger deux valeurs.

Grammaire

Les utilisateurs peuvent utiliser l'opérateur XOR au niveau du bit pour échanger deux nombres selon la syntaxe suivante.

num1 = num1 ^ num2; // num1 == num1 ^ num2
num2 = num1 ^ num2; // num2 == (num1 ^ num2) ^ num2 == num1
num1 = num1 ^ num2; // num1 == (num1 ^ num2) ^ num1 == num2
Copier après la connexion

Dans la syntaxe ci-dessus, nous avons effectué trois opérations XOR au niveau du bit sur num1 et num2 et échangé deux fois les valeurs des variables num1 et num2.

Exemple

Dans l'exemple ci-dessous, lorsque l'utilisateur clique sur le bouton d'échange de variable, une boîte de dialogue apparaîtra pour la saisie numérique. Ensuite, dans la sortie, l'utilisateur peut voir les valeurs échangées.

<html>
<body>
   <h2>Using the <i>Bitwise XOR operator</i> to swap two variable values in JavaScript</h2>
   <div id="output"> </div>
   <button onclick = "swapNumbers()">Swap variables</button>
   <script>
      let output = document.getElementById('output');
      function swapNumbers() {
         let num1 = prompt("Enter first number value", 10);
         let num2 = prompt("Enter second number value", 20);
         output.innerHTML += output.innerHTML += "num1 = " + num1 + " num2 = " + num2 + "<br/>";

         num1 = num1 ^ num2;
         num2 = num1 ^ num2;
         num1 = num1 ^ num2;

         output.innerHTML += "The value of the num1 and num2 after swaping are the <br/>";
         output.innerHTML += "num1 = " + num1 + " num2 = " + num2;
      }
   </script>
</body>
</html>
Copier après la connexion

Les utilisateurs peuvent utiliser la première et la deuxième méthodes pour échanger toutes les variables telles que les chaînes, les booléens, les nombres, etc. Les troisième et quatrième méthodes ne fonctionnent que pour trier des valeurs numériques.

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!