社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 正文

10种JS中交换值的方法（分享）

青灯夜游
发布： 2021-01-08 14:20:14
转载
2754 人浏览过

10种JS中交换值的方法（分享）

在开发过程中又是我们需要对值进行交换。一般我们都在用一种简单的解决方案：“临时变量”。不过还有更好的办法，而且不只有一个，有很多。有时我们在网上搜寻解决方案，找到后复制粘贴，但是从没想过这小段代码是怎样工作的。现在我们该学习一下应该怎样轻松高效地交换值了。

1、使用临时变量

先是最简单的一种。

function swapWithTemp(num1,num2){
  console.log(num1,num2)

  var temp = num1;
  num1 = num2;
  num2 = temp;

  console.log(num1,num2)
}

swapWithTemp(2.34,3.45)
登录后复制

2、使用算术运算符 + 和 -

还可以用一些数学魔术来交换值。

function swapWithPlusMinus(num1,num2){
  console.log(num1,num2)

  num1 = num1+num2;
  num2 = num1-num2;
  num1 = num1-num2;

  console.log(num1,num2)
}

swapWithPlusMinus(2.34,3.45)
登录后复制

让我们来看看它是如何工作的。我们在第 4 行获得两个数字的总和。现在，如果从和中减去一个数字，那么另一个数字就正确了。这就是第 5 行所做的工作。从存储在 num1 变量中的总和中减去 num2 会得到存储在 num2 中的原始 num1 值。同样，在第 6 行的 num1 中得到 num2 的值。

小心：还有一个与 + 和 - 互换的单行代码方案，不过。。。

它是这样的：

function swapWithPlusMinusShort(num1,num2){
  console.log(num1,num2)

  num2 = num1+(num1=num2)-num2;

  console.log(num1,num2)
}

swapWithPlusMinusShort(2,3)
登录后复制

上面的代码给出了预期的结果。 () 中的表达式将 num2 存储在 num1 中，然后减去 num1 - num2，除了减去 num2 - num2 = 0 之外什么也没有做，因此得到了结果。但是当使用浮点数时，会看到一些意外的结果。

试着执行下面的代码并查看结果：

function swapWithPlusMinusShort(num1,num2){
  console.log(num1,num2)

  num2 = num1+(num1=num2)-num2;

  console.log(num1,num2)
}

swapWithPlusMinusShort(2,3.1)
登录后复制

3、仅使用 + 或 - 运算符

仅通过使用 + 运算符就可以达到同时使用 + 和 - 相同的结果。

看下面的代码：

function swapWithPlus(num1,num2){
  console.log(num1,num2)

  num2 = num1 + (num1=num2, 0)

  console.log(num1,num2)
}

//Try with - operator
swapWithPlus(2.3,3.4)
登录后复制

上面的代码是有效的，但牺牲了可读性。在第 4 行的 () 中，我们将 num1 赋值给 num2，而旁边的 0 是返回值。简而言之，第 4 行的运算逻辑如下所示：

num2 = num1 + 0 
=> num2 = num1.
登录后复制

所以得到了正确结果。

注意：一些 JavaScript 引擎可能会对上面的代码进行优化，从而忽略 + 0。

4、使用算术运算符 * 和 /

让我们用 * 和/ 运算符玩更多的花样。

其原理与先前的方法相同，但是有一些小问题。

function swapWithMulDiv(num1,num2){
  console.log(num1,num2)

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

  console.log(num1,num2)
}

swapWithMulDiv(2.34,3.45)
登录后复制

与上一个方法相同。首先得到两个数字的乘积，并将它们存储在 num1 中。然后在第 5 行，把 num2 与这个结果相除，得到第一个数字，然后重复此过程以获得第二个数字。

现在你成“ 数学家” 了。

不过那小问题在哪儿呢？

让我们来尝试一下：

function swapWithMulDiv(num1,num2){
  console.log(num1,num2)

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

  console.log(num1,num2)
}

//试着改变数字的值，看看会发生什么
swapWithMulDiv(2.34,0)
登录后复制

我们的值没有交换，而是得到了一个奇怪的 NaN，这是怎么回事。如果你还记得小学的数学课，就会想起不要除以 0，因为那是没有意义的。

然后再看看这种方法的其他问题，看下面的代码：

function swapWithMulDiv(num1,num2){
  console.log(num1,num2)

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

  console.log(num1,num2)
}
//看看会发生什么
swapWithMulDiv(2.34,Infinity)
登录后复制

没错，又是 NaN。因为你无法使用 Infinity 去除任何值，它是未定义的。

但我还想再试试：

function swapWithMulDiv(num1,num2){
  console.log(num1,num2)

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

  console.log(num1,num2)
}

//会怎样呢
swapWithMulDiv(2.34,-Infinity)
登录后复制

-Infinity 的结果与前面的代码相同，原因也一样。

事实证明，即使你是一位出色的“数学家”，也有无能为力的时候。

下面是用 * 和 / 进行值交换的较短版本，仍存在相同的问题：

function swapWithMulDivShort(num1,num2){
  console.log(num1,num2)

  num2 = num1*(num1=num2)/num2;

  console.log(num1,num2)
}

swapWithMulDivShort(2.3,3.4)
登录后复制

上面的代码类似于用 + 和 - 进行交换时的较短的代码。把 num2 赋值给 num1，然后第 4 行的演算逻辑是这样：

num2 = num1 * num2 / num2
    => num2 = num1
登录后复制

这样两个值就互换了。

5、仅使用 * 或 / 运算符

function swapWithMul(num1,num2){
  console.log(num1,num2)

  num2 = num1 * (num1=num2, 1)

  console.log(num1,num2)
}

//Try with / and ** operator
swapWithMul(2.3,3.4)
登录后复制

上面的程序是有效的，但牺牲了可读性。在第 4 行的 () 中，我们将 num1 赋值给 num2，旁边的 1 是返回值。简而言之，第 4 行的逻辑如下所示：

num2 = num1 * 1 
    => num2 = num1
登录后复制

这样就得到了结果。

6、使用按位异或（XOR）。

XOR 用来进行二进制位运算。当有两个不同的输入时，它的结果为 1，否则为 0。

XYX^Y
110
101
011
000

先了解其工作原理！

function swapWithXOR(num1,num2){
  console.log(num1,num2)

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

  console.log(num1,num2)
}
// 试试负值会怎样
swapWithXOR(10,1)
登录后复制

10 的4 位二进制数 -> 1010

1 的 4 位二进制数 -> 0001

现在：

第四行: 
num1 = num1 ^ num2 
    => 1010 ^ 0001 
    => 1011 
    => 7 
第五行: 
num2 = num1 ^ num2 
    => 1011 ^ 0001 
    => 1010 
    => 10
第六行: 
num1 = num1 ^ num2 
    => 1011 ^ 1010 
    => 0001 
    => 1
登录后复制

两个值交换了。

再来看另一个例子：

function swapWithXOR(num1,num2){
  console.log(num1,num2)

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

  console.log(num1,num2)
}

swapWithXOR(2.34,3.45)
登录后复制

嗯？？交换的值在哪儿？我们只是得到了数字的整数部分，这就是问题所在。 XOR 假定输入是整数，所以···相应地执行计算。但是浮点数不是整数，而是由 IEEE 754 标准表示的，将数字分为三部分：符号位、代表指数的一组位和代表尾数的一组位。位数是介于1（含）和2（不含）之间的数字。所以得到的值不正确。

另一个例子：

function swapWithXOR(num1,num2){
  console.log(num1,num2)

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

  console.log(num1,num2)
}
// 试试 infinities 和整数值.
swapWithXOR(-Infinity,Infinity)
登录后复制

毫无意外，我们没有得到预期的结果。这是因为 Infinity 和 – Infinity 都是浮点数。正如我们在前面所讨论的，对于 XOR，浮点数是一个问题。

7、使用按位同或 （XNOR）

它用来进行二进制位运算，但是与 XOR 正好相反。当有两个不同的输入时，XNOR 的结果是 0，否则结果为 1。 JavaScript 没有执行 XNOR 的运算符，所以要用 NOT 运算符对 XOR 的结果求反。

XYXNOR
111
100
010
001

先了解其工作原理：

function swapWithXNOR(num1,num2){
  console.log(num1,num2)

  num1 = ~(num1^num2);
  num2 = ~(num1^num2);
  num1 = ~(num1^num2);

  console.log(num1,num2)
}

//可以试试负值
swapWithXNOR(10,1)
登录后复制

10 的 4 位二进制数 -> 1010

1 的 4 位二进制数 -> 0001

第 4 行：

num1 = ~(num1 ^ num2) 
    => ~(1010 ^ 0001) 
    =>~(1011) 
    => ~11 
    => -12
登录后复制

由于这是一个负数，所以需要将其转换回二进制并计算 2 的补码来获取十进制值，例如：

-12 => 1100 
    => 0011 + 1 
    => 0100
登录后复制

第 5 行：

num2 = ~(num1 ^ num2) 
    => ~(0100 ^ 0001) 
    => ~(0101) 
    => ~5 
    => -6-6 
    => 0110 
    => 1001 + 1
    => 1010 
    => 10
登录后复制

第 6 行：

num1 = ~(num1 ^ num2) 
    => ~(0100^ 1010) 
    => ~(1110) 
    => ~14 
    => -15-15 
    => 1111 
    => 0000 + 1 
    => 0001 
    => 1
登录后复制

花了一些时间，但还是交换了值。但不幸的是，它遇到了与 XOR 相同的问题，不能处理浮点数和无穷大。

试试下面的值：

function swapWithXNOR(num1,num2){
  console.log(num1,num2)

  num1 = ~(num1^num2);
  num2 = ~(num1^num2);
  num1 = ~(num1^num2);

  console.log(num1,num2)
}

swapWithXNOR(2.3,4.5)
登录后复制

8、在数组中进行赋值

这是一线技巧。只需要一行代码就可以进行交换，更重要的是，无需数学运算，只需要数组的基本知识。不过它看上去可能很奇怪。

先让看看它的实际效果：

function swapWithArray(num1,num2){
  console.log(num1,num2)

  num2 = [num1, num1 = num2][0];

  console.log(num1,num2)
}

swapWithArray(2.3,Infinity)
登录后复制

在数组的下标 0 位置中存储 num1，在下标 1 中，既将 num2 分配给 num1，又存储了 num2。另外，我们只是访问 [0]，将数组中的 num1 值存储在 num2 中。而且可以在这里交换我们想要的任何东西，比如：整数、浮点数（包括无穷数）以及字符串。看上去很整洁，但是在这里失去了代码的清晰度。

9、使用解构表达式

这是 ES6 的功能。这是所有方法中最简单的。只需要一行代码就可以完成交换：

let num1 = 23.45;
let num2 = 45.67;

console.log(num1,num2);

[num1,num2] = [num2,num1];

console.log(num1,num2);
登录后复制

10、使用立即调用的函数表达式（IIFE）

这是最奇怪的一个。简单的说 IIFE 是在在定义后立即执行的函数。

可以用它来交换两个值：

function swapWithIIFE(num1,num2){
  console.log(num1,num2)

  num1 = (function (num2){ return num2; })(num2, num2=num1)

  console.log(num1,num2)
}

swapWithIIFE(2.3,3.4)
登录后复制

在上面的例子中，在第4行立即调用一个函数。最后的括号是该函数的参数。第二个参数将 num1 赋值给 num2，仅仅返回第一个参数，不过这种交换方法效率不高。

总结

本文探讨了用于在 JavaScript 中对值进行交换的众多方法。希望对你有所帮助！

本文转载自：https://codeburst.io/10-ways-to-swap-values-in-javascript-8a1d056352dd

作者：Piyush Kochhar

更多编程相关知识，请访问：编程教学！！

以上是10种JS中交换值的方法（分享）的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
javascript
来源：segmentfault.com
上一篇：使用react怎么遍历数组 下一篇：JavaScript数组求和的5种常用方法
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
仅 CSS 方法可在单击时动态修改图像 src，无需使用 JavaScript 我需要仅使用css更改鼠标单击时图像的src喜欢img:active{}
来自于 2024-04-06 19:25:49
0
1
505
放大 d3.js 时散点图点不会保持值 这是我第一次使用d3.js，所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，...
来自于 2024-04-06 18:16:26
0
1
403
供应商特定伪元素上的 JavaScript 悬停事件 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
来自于 2024-04-06 15:35:24
0
1
274
使用 Javascript / Jquery 提交表单且不带按钮 我试图通过调用JavaScript函数并使用JQUERY/PHP执行表单来提交没有按钮的表单。我希望表单在后端静默执行，而无需重新加载页面。不幸的是，它不断返回JavaScript...
来自于 2024-04-06 14:54:03
0
2
421
使用'折叠显示”类自定义 Bootstrap 手风琴标题的外观 我想设置具有类collapseshow的面板的卡标题样式。在此示例中，它是第一个面板。我尝试使用CSS来使用.accordion.card.card-headerbutton.bt...
来自于 2024-04-06 12:53:11
0
1
376
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板