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

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

我们将学习使用各种方法在 JavaScript 中交换两个变量值。让我们通过示例来了解交换的含义。例如,我们有两个变量,称为变量 1 和变量 2。当我们将variable2的值赋给variable1,将variable1的值赋给variable2时,我们可以说我们已经交换了variable1和variable2的值。

使用临时变量

我们可以创建一个临时变量,这意味着可以临时存储第一个变量的值的任何变量。之后,我们可以将第二个变量的值赋给第一个变量。接下来,我们可以从临时变量中获取第一个变量的值并将其分配给第二个变量。

语法

用户可以按照下面的语法使用临时变量来交换两个变量值。

let temporaryVariable = variable1;
variable1 = variable2;
variable2 = temporaryVariable;

在上面的语法中,我们将变量1的值存储到临时变量中。当我们将variable2的值赋给variable1并将temporaryVariable的值赋给variable2之后。

示例

在下面的示例中,我们创建了两个变量并分配了字符串值。此外,我们使用临时变量来交换两个变量值。在输出中,用户可以看到变量1和变量2的值交换了。

<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>

使用赋值解构属性

在 JavaScript 的 ES6 版本中,引入了数组或对象的解构。在数组解构中,我们可以将数组值存储到另一个或同一个变量中。在这里,我们将创建两个变量的数组并破坏该数组以交换两个变量。

语法

用户可以按照以下语法使用数组解构属性来交换两个变量。

[var2, var1] = [var1, var2];

在上面的语法中,我们将 var1 的值存储到 var2,将 var2 的值存储到 var1。

示例

在下面的示例中,我们采用了 var1 和 var2。之后,我们使用 var1 和 var2 创建了两个变量的数组。在解构数组时,我们将 var1 的值赋给 var2 变量,将 var2 的值赋给 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>

使用算术运算符

我们可以使用乘法和除法算术运算符来交换两个数字。要交换两个变量,我们可以对两个数值执行算术运算。

语法

用户可以按照以下语法使用算术运算符来交换两个数值变量值。

num1 = num1 * num2;  
num2 = num1 / num2; 
num1 = num1 / num2;  

在上面的语法中,我们首先将两个数字相乘并将它们存储在 num1 变量中。之后,我们将新的 num1 变量(num1 * num2)与 num2 变量相除,并将其存储在 num2 变量中。接下来,我们将更新后的 num1 (num1*num2) 除以更新后的 num2,并将其存储在 num1 变量中。

示例

在下面的示例中,swapNumbers() 函数交换两个数值。在下面示例的输出中,用户可以观察 num1 和 num2 变量的初始值以及交换两个变量后的值。

<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>

使用按位异或运算符

当我们对任意数值与其自身进行异或运算时,它会返回零。因此,我们将使用按位异或运算符的该属性来交换两个值。

语法

用户可以按照以下语法使用按位异或运算符来交换两个数字。

num1 = num1 ^ num2; // num1 == num1 ^ num2
num2 = num1 ^ num2; // num2 == (num1 ^ num2) ^ num2 == num1
num1 = num1 ^ num2; // num1 == (num1 ^ num2) ^ num1 == num2

在上面的语法中,我们对 num1 和 num2 执行了三次按位异或运算,两次交换 num1 和 num2 变量值。

示例

在下面的例子中,当用户点击交换变量按钮时,会弹出提示框进行数字输入。然后,在输出中,用户可以看到交换后的数值。

<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>

用户可以使用第一种和第二种方法来交换所有变量,例如字符串、布尔值、数字等。第三种和第四种方法仅适用于对数值进行排序。

以上就是如何在 JavaScript 中交换两个变量?的详细内容,更多请关注编程之家其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)