JS中交換值的方法有哪些-創(chuàng)新互聯(lián)

小編給大家分享一下JS中交換值的方法有哪些，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

目前創(chuàng)新互聯(lián)已為近千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、昂仁網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

在開發(fā)過(guò)程中又是我們需要對(duì)值進(jìn)行交換。一般我們都在用一種簡(jiǎn)單的解決方案：“臨時(shí)變量”。不過(guò)還有更好的辦法，而且不只有一個(gè)，有很多。有時(shí)我們?cè)诰W(wǎng)上搜尋解決方案，找到后復(fù)制粘貼，但是從沒想過(guò)這小段代碼是怎樣工作的?，F(xiàn)在我們?cè)搶W(xué)習(xí)一下應(yīng)該怎樣輕松高效地交換值了。

1、使用臨時(shí)變量

先是最簡(jiǎn)單的一種。

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、使用算術(shù)運(yùn)算符 + 和 -

還可以用一些數(shù)學(xué)魔術(shù)來(lái)交換值。

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)

讓我們來(lái)看看它是如何工作的。我們?cè)诘?4 行獲得兩個(gè)數(shù)字的總和?，F(xiàn)在，如果從和中減去一個(gè)數(shù)字，那么另一個(gè)數(shù)字就正確了。這就是第 5 行所做的工作。從存儲(chǔ)在num1 變量中的總和中減去num2 會(huì)得到存儲(chǔ)在num2 中的原始num1 值。同樣，在第 6 行的num1 中得到num2 的值。

小心：還有一個(gè)與+ 和- 互換的單行代碼方案，不過(guò)。。。

它是這樣的：

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

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

  console.log(num1,num2)
}

swapWithPlusMinusShort(2,3)

上面的代碼給出了預(yù)期的結(jié)果。() 中的表達(dá)式將num2 存儲(chǔ)在num1 中，然后減去num1 - num2，除了減去num2 - num2 = 0 之外什么也沒有做，因此得到了結(jié)果。但是當(dāng)使用浮點(diǎn)數(shù)時(shí)，會(huì)看到一些意外的結(jié)果。

試著執(zhí)行下面的代碼并查看結(jié)果：

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

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

  console.log(num1,num2)
}

swapWithPlusMinusShort(2,3.1)

3、僅使用 + 或 - 運(yùn)算符

僅通過(guò)使用+ 運(yùn)算符就可以達(dá)到同時(shí)使用+ 和- 相同的結(jié)果。

看下面的代碼：

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 是返回值。簡(jiǎn)而言之，第 4 行的運(yùn)算邏輯如下所示：

num2 = num1 + 0 
=> num2 = num1.

所以得到了正確結(jié)果。

注意：一些 JavaScript 引擎可能會(huì)對(duì)上面的代碼進(jìn)行優(yōu)化，從而忽略+ 0。

4、使用算術(shù)運(yùn)算符 * 和 /

讓我們用* 和/ 運(yùn)算符玩更多的花樣。

其原理與先前的方法相同，但是有一些小問(wèn)題。

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)

與上一個(gè)方法相同。首先得到兩個(gè)數(shù)字的乘積，并將它們存儲(chǔ)在num1 中。然后在第 5 行，把num2 與這個(gè)結(jié)果相除，得到第一個(gè)數(shù)字，然后重復(fù)此過(guò)程以獲得第二個(gè)數(shù)字。

現(xiàn)在你成“數(shù)學(xué)家” 了。

不過(guò)那小問(wèn)題在哪兒呢？

讓我們來(lái)嘗試一下：

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

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

  console.log(num1,num2)
}

//試著改變數(shù)字的值，看看會(huì)發(fā)生什么
swapWithMulDiv(2.34,0)

我們的值沒有交換，而是得到了一個(gè)奇怪的NaN，這是怎么回事。如果你還記得小學(xué)的數(shù)學(xué)課，就會(huì)想起不要除以 0，因?yàn)槟鞘菦]有意義的。

然后再看看這種方法的其他問(wèn)題，看下面的代碼：

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

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

  console.log(num1,num2)
}
//看看會(huì)發(fā)生什么
swapWithMulDiv(2.34,Infinity)

沒錯(cuò)，又是NaN。因?yàn)槟銦o(wú)法使用Infinity 去除任何值，它是未定義的。

但我還想再試試：

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

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

  console.log(num1,num2)
}

//會(huì)怎樣呢
swapWithMulDiv(2.34,-Infinity)

-Infinity 的結(jié)果與前面的代碼相同，原因也一樣。

事實(shí)證明，即使你是一位出色的“數(shù)學(xué)家”，也有無(wú)能為力的時(shí)候。

下面是用* 和/ 進(jìn)行值交換的較短版本，仍存在相同的問(wèn)題：

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

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

  console.log(num1,num2)
}

swapWithMulDivShort(2.3,3.4)

上面的代碼類似于用+ 和- 進(jìn)行交換時(shí)的較短的代碼。把num2 賦值給num1，然后第 4 行的演算邏輯是這樣：

num2 = num1 * num2 / num2
    => num2 = num1

這樣兩個(gè)值就互換了。

5、僅使用 * 或 / 運(yùn)算符

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 是返回值。簡(jiǎn)而言之，第 4 行的邏輯如下所示：

num2 = num1 * 1 
    => num2 = num1

這樣就得到了結(jié)果。

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

XOR 用來(lái)進(jìn)行二進(jìn)制位運(yùn)算。當(dāng)有兩個(gè)不同的輸入時(shí)，它的結(jié)果為 1，否則為 0。

X	Y	X^Y
1	1	0
1	0	1
0	1	1
0	0	0

先了解其工作原理！

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

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

  console.log(num1,num2)
}
// 試試負(fù)值會(huì)怎樣
swapWithXOR(10,1)

10 的4 位二進(jìn)制數(shù) -> 1010

1 的 4 位二進(jìn)制數(shù) -> 0001

現(xiàn)在：

第四行: 
num1 = num1 ^ num2 
    => 1010 ^ 0001 
    => 1011 
    => 7 
第五行: 
num2 = num1 ^ num2 
    => 1011 ^ 0001 
    => 1010 
    => 10
第六行: 
num1 = num1 ^ num2 
    => 1011 ^ 1010 
    => 0001 
    => 1

兩個(gè)值交換了。

再來(lái)看另一個(gè)例子：

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)

嗯？？交換的值在哪兒？我們只是得到了數(shù)字的整數(shù)部分，這就是問(wèn)題所在。 XOR 假定輸入是整數(shù)，所以···相應(yīng)地執(zhí)行計(jì)算。但是浮點(diǎn)數(shù)不是整數(shù)，而是由 IEEE 754 標(biāo)準(zhǔn)表示的，將數(shù)字分為三部分：符號(hào)位、代表指數(shù)的一組位和代表尾數(shù)的一組位。位數(shù)是介于1（含）和2（不含）之間的數(shù)字。所以得到的值不正確。

另一個(gè)例子：

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

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

  console.log(num1,num2)
}
// 試試 infinities 和整數(shù)值.
swapWithXOR(-Infinity,Infinity)

毫無(wú)意外，我們沒有得到預(yù)期的結(jié)果。這是因?yàn)?strong>Infinity 和– Infinity 都是浮點(diǎn)數(shù)。正如我們?cè)谇懊嫠懻摰?，?duì)于 XOR，浮點(diǎn)數(shù)是一個(gè)問(wèn)題。

7、使用按位同或 （XNOR）

它用來(lái)進(jìn)行二進(jìn)制位運(yùn)算，但是與 XOR 正好相反。當(dāng)有兩個(gè)不同的輸入時(shí)，XNOR 的結(jié)果是 0，否則結(jié)果為 1。 JavaScript 沒有執(zhí)行 XNOR 的運(yùn)算符，所以要用NOT 運(yùn)算符對(duì) XOR 的結(jié)果求反。

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

//可以試試負(fù)值
swapWithXNOR(10,1)

10 的 4 位二進(jìn)制數(shù) -> 1010

1 的 4 位二進(jìn)制數(shù) -> 0001

第 4 行：

num1 = ~(num1 ^ num2) 
    => ~(1010 ^ 0001) 
    =>~(1011) 
    => ~11 
    => -12

由于這是一個(gè)負(fù)數(shù)，所以需要將其轉(zhuǎn)換回二進(jìn)制并計(jì)算 2 的補(bǔ)碼來(lái)獲取十進(jìn)制值，例如：

-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

花了一些時(shí)間，但還是交換了值。但不幸的是，它遇到了與 XOR 相同的問(wèn)題，不能處理浮點(diǎn)數(shù)和無(wú)窮大。

試試下面的值：

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、在數(shù)組中進(jìn)行賦值

這是一線技巧。只需要一行代碼就可以進(jìn)行交換，更重要的是，無(wú)需數(shù)學(xué)運(yùn)算，只需要數(shù)組的基本知識(shí)。不過(guò)它看上去可能很奇怪。

先讓看看它的實(shí)際效果：

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

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

  console.log(num1,num2)
}

swapWithArray(2.3,Infinity)

在數(shù)組的下標(biāo) 0 位置中存儲(chǔ)num1，在下標(biāo) 1 中，既將num2 分配給num1，又存儲(chǔ)了num2。另外，我們只是訪問(wèn)[0]，將數(shù)組中的num1 值存儲(chǔ)在num2 中。而且可以在這里交換我們想要的任何東西，比如：整數(shù)、浮點(diǎn)數(shù)（包括無(wú)窮數(shù)）以及字符串?？瓷先ズ苷麧崳窃谶@里失去了代碼的清晰度。

9、使用解構(gòu)表達(dá)式

這是 ES6 的功能。這是所有方法中最簡(jiǎn)單的。只需要一行代碼就可以完成交換：

let num1 = 23.45;
let num2 = 45.67;

console.log(num1,num2);

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

console.log(num1,num2);

10、使用立即調(diào)用的函數(shù)表達(dá)式（IIFE）

這是最奇怪的一個(gè)。簡(jiǎn)單的說(shuō) IIFE 是在在定義后立即執(zhí)行的函數(shù)。

可以用它來(lái)交換兩個(gè)值：

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行立即調(diào)用一個(gè)函數(shù)。最后的括號(hào)是該函數(shù)的參數(shù)。第二個(gè)參數(shù)將num1 賦值給num2，僅僅返回第一個(gè)參數(shù)，不過(guò)這種交換方法效率不高。

看完了這篇文章，相信你對(duì)“JS中交換值的方法有哪些”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享文章：JS中交換值的方法有哪些-創(chuàng)新互聯(lián)
文章分享：http://muchs.cn/article30/ddoipo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、云服務(wù)器、外貿(mào)建站、定制開發(fā)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)