首頁  >  文章  >  web前端  >  10種JS中交換值的方法(分享)

10種JS中交換值的方法(分享)

青灯夜游
青灯夜游轉載
2021-01-07 18:36:192737瀏覽

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。

##1 101#010110#

先了解其工作原理!

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 的结果求反。

X Y X^Y
##0 0
X Y XNOR
1 1 1
1 0 0
0 1 0
0 0 1

先了解其工作原理:

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中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除