【小黑JavaScript入门系列之脑力训练营一《六种方法实现JavaScript交换两个变量值》】

༺๑码农小黑๑༻

已于 2022-08-26 22:08:57 修改

阅读量845

点赞数

分类专栏：初学者文章标签： javascript 前端开发语言

于 2022-08-10 20:59:45 首次发布

本文链接：https://blog.csdn.net/weixin_45298348/article/details/126274044

版权

初学者专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.案例分析：请用javascript编程实现交换两个变量的值,根据用户输入的两个变量实现，数值交换

2.运行结果：

3.方法实现：

方案一：变量置换法

方案分析：这里采取第三变量c作为一个容器，替换a和b的值，首先将a值传给c ,其次将b值传给a,最后把c值转给b，最终实现两个数的置换。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 方法一：变量置换法
        var a = prompt('请输入a的值');
        var b = prompt('请输入b的值');
        var c = 0;
        c = a;
        a = b;
        b = c;
        document.write('交换后a的值是' + a + '<br>', '交换后b的值是' + b);
    </script>
</body>

</html>

方案二：加减置换法

方案分析：这里利用加减法一个小算法，1.将a+b的值赋给a;2.将a-b的值赋给b;3.最后利用两数之和后的a减去存放了a的b，实现交换效果，值得注意的是，这里需要将用户输入的字符型，转换成数值型。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 方法二：加减置换法:值得注意的是这里要记得将字符转换为数值型
        var a = Number(prompt('请输入a的值'));
        var b = Number(prompt('请输入b的值'));
        a = a + b;
        b = a - b;
        a = a - b;
        document.write('交换后a的值是' + a + '<br>', '交换后b的值是' + b);
    </script>
</body>

</html>

方法三：异或置换法

方案分析：这里采用二进制异或的方法交换数值。异或的特点：同数为0，异数为1；将用户输入的值分别转换成二进制，在进行异或，JS里面的异或符号是用shift+6，通过两次异或还是本身这个原理，即可实现两个数的交换。

注意：其变换形式：a = (b^=a^=b)^a;【一行代码搞定两数置换】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 方法三：异或置换法(同数为0，异数为1)
        var a = prompt('请输入a的值');
        var b = prompt('请输入b的值');
        a = a ^ b;
        b = a ^ b;
        a = a ^ b;
        //a = (b ^= a ^= b) ^ a; //与上面三行实现同理只是变成一行代码
        document.write('交换后a的值是' + a + '<br>', '交换后b的值是' + b);
    </script>
</body>

</html>

方法四：数组特殊置换法【进阶】

方案分析：这里使用的是特定数组的方法，将两个数直接转换，首先假设a=6,b=9则有a=[9,b=a][0]>>>a=[9,b=6][0]>>>a=[9,6][0]>>>b=6>>>a[0]=9>>>a=9。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 方法四：数组置换法
        var a = prompt('请输入a的值');
        var b = prompt('请输入b的值');
        a = [b, b = a][0]; 
        document.write('交换后a的值是' + a + '<br>', '交换后b的值是' + b);
    </script>
</body>

</html>

方法五：数组普通置换法

方案分析：这里使用的是普通数组置换的方法，首先将把a,b的值存放在a[a,b]这个数组中，其次先将a[0]值赋给b,再将a[1]的值赋给a,不这样会导致a与b的值相等。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 方法五：数组普通置换法
        var a = prompt('请输入a的值');
        var b = prompt('请输入b的值');
        a = [a, b]; //接收用户输入的值
        document.write('交换前a，b的值是' + a + '<br>');
        b = a[0]; //将第一值赋给b必须写在a的前面
        a = a[1]; //将第二值赋给a
        document.write(a);
        document.write(b);
    </script>
</body>

</html>

方法六：ES6赋值法

方案分析：这里使用的是ES6置换的方法，由于ES6允许我们对数组和对象提取，所以可以进行变量赋值，来实现两数直接交换。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 方法六：ES6赋值法
        var a = prompt('请输入a的值');
        var b = prompt('请输入b的值');
        [a, b] = [b, a];
        document.write('交换后a的值是' + a + '<br>', '交换后b的值是' + b);
    </script>
</body>

</html>