> 웹 프론트엔드 > JS 튜토리얼 > JS(공유)에서 값을 교환하는 10가지 방법

JS(공유)에서 값을 교환하는 10가지 방법

青灯夜游
풀어 주다: 2021-01-08 14:20:14
앞으로
2788명이 탐색했습니다.

JS(공유)에서 값을 교환하는 10가지 방법

개발 과정에서 우리는 다시 가치를 교환해야 합니다. 일반적으로 우리는 "임시 변수"라는 간단한 솔루션을 사용합니다. 하지만 더 좋은 방법이 있습니다. 한 가지가 아니라 여러 가지가 있습니다. 때때로 우리는 온라인에서 솔루션을 검색하고, 솔루션을 찾았을 때 복사하여 붙여넣지만, 이 작은 코드 조각이 어떻게 작동하는지 전혀 생각하지 않습니다. 이제 쉽고 효율적으로 가치를 교환하는 방법을 배울 차례입니다.

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 값이 됩니다. 마찬가지로 num2의 값은 6행의 num1에서 가져옵니다. 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

주의: 하지만 +-와 상호 교환 가능한 한 줄짜리 구성표도 있습니다. . .

다음과 같습니다:

num2 = num1 * 1 
    => num2 = num1
로그인 후 복사

위 코드는 예상된 결과를 제공합니다. ()의 표현식은 num1num2를 저장한 다음 num1 - num2를 빼고 다음으로 이동합니다. num2 - num2 = 0은 아무 작업도 수행하지 않으므로 결과가 나타납니다. 그러나 부동 소수점 숫자로 작업할 때 예상치 못한 결과가 나타날 수 있습니다.

다음 코드를 실행하고 결과를 확인하세요.
function swapWithXOR(num1,num2){
  console.log(num1,num2)

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

  console.log(num1,num2)
}
// 试试负值会怎样
swapWithXOR(10,1)
로그인 후 복사
로그인 후 복사

3. + 또는 - 연산자를 사용하세요

+ 연산자를 사용하면 됩니다. +-를 모두 사용해도 같은 결과가 나옵니다. 아래 코드를 보세요: 위 코드는 작동하지만 가독성이 떨어집니다. 4행의 ()에서는 num1num2에 할당하고 그 옆의 0이 반환 값입니다. . 간단히 말해서 4행의 연산 논리는 다음과 같습니다. 그래서 올바른 결과를 얻습니다. 참고: 일부 JavaScript 엔진은 + 0을 무시하도록 위 코드를 최적화할 수 있습니다.

4. 산술 연산자 * 및 /

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)
로그인 후 복사
로그인 후 복사
이제 당신은 "수학자"입니다.
function swapWithXNOR(num1,num2){
  console.log(num1,num2)

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

  console.log(num1,num2)
}

//可以试试负值
swapWithXNOR(10,1)
로그인 후 복사
로그인 후 복사
그런 다음 이 접근 방식의 다른 문제점을 살펴보고 다음 코드를 살펴보세요.
num1 = ~(num1 ^ num2) 
    => ~(1010 ^ 0001) 
    =>~(1011) 
    => ~11 
    => -12
로그인 후 복사
로그인 후 복사
-12 => 1100 
    => 0011 + 1 
    => 0100
로그인 후 복사
로그인 후 복사
당신이 뛰어난 "수학자"라 할지라도 무력할 때가 있다는 것이 밝혀졌습니다.
num2 = ~(num1 ^ num2) 
    => ~(0100 ^ 0001) 
    => ~(0101) 
    => ~5 
    => -6-6 
    => 0110 
    => 1001 + 1
    => 1010 
    => 10
로그인 후 복사
로그인 후 복사
num1 = ~(num1 ^ num2) 
    => ~(0100^ 1010) 
    => ~(1110) 
    => ~14 
    => -15-15 
    => 1111 
    => 0000 + 1 
    => 0001 
    => 1
로그인 후 복사
로그인 후 복사

5. * 또는 / 연산자만 사용하세요

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)
로그인 후 복사
로그인 후 복사
위 프로그램은 유효하지만 가독성이 떨어집니다. 4행의 ()에서는 num1num2에 할당하고 그 옆의 1이 반환값입니다. 값 . 간단히 말해서 4행의 논리는 다음과 같습니다.
第四行: 
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)
로그인 후 복사
로그인 후 복사
사용 */ 연산자를 사용하여 더 많은 트릭을 시도해 보겠습니다. 원리는 이전 방법과 동일하지만, 약간의 문제가 있습니다. 이전 방법과 동일합니다. 먼저 두 숫자의 곱을 구하여 num1에 저장하세요. 그런 다음 5행에서 num2를 이 결과로 나누어 첫 번째 숫자를 얻고, 이 과정을 반복하여 두 번째 숫자를 얻습니다.
그런데 그 작은 문제가 어디에 있나요? 다음을 시도해 보겠습니다. 값을 바꾸는 대신 이상한 NaN이 표시됩니다. 무슨 일이 일어나고 있나요? 초등학교 수학 시간을 기억하신다면, 0으로 나누는 것이 말이 안 되기 때문에 0으로 나누지 말아야 한다는 것을 기억하실 것입니다.
예, 다시 NaN입니다. 무한대를 사용하여 값을 제거할 수 없으므로 정의되지 않습니다. 하지만 다시 시도하고 싶습니다. -Infinity 는 같은 이유로 이전 코드와 동일한 결과를 갖습니다.
다음은 */를 사용하는 더 짧은 버전의 값 교환이지만 여전히 동일한 문제가 있습니다. 위의 코드는 +<를 사용하는 것과 유사합니다. /code>와 <code>-를 바꿀 때 코드가 더 짧아집니다. num1num2를 할당하면 4행의 계산 논리는 다음과 같습니다. 이렇게 하면 두 값이 ​​​​교환됩니다.
function swapWithArray(num1,num2){
  console.log(num1,num2)

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

  console.log(num1,num2)
}

swapWithArray(2.3,Infinity)
로그인 후 복사
로그인 후 복사
🎜이 결과를 제공합니다. 🎜🎜6. 비트 배타적 OR(XOR)을 사용하세요. 🎜🎜XOR은 이진 비트 연산을 수행하는 데 사용됩니다. 두 개의 서로 다른 입력이 있으면 결과는 1이고 그렇지 않으면 0입니다. 🎜🎜🎜🎜🎜 🎜🎜🎜🎜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)
}
// 试试负值会怎样
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

更多编程相关知识,请访问:编程教学!!

위 내용은 JS(공유)에서 값을 교환하는 10가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿