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

本文主要是介绍【小黑JavaScript入门系列之脑力训练营一《六种方法实现JavaScript交换两个变量值》】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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]; //将第二值赋给adocument.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>

这篇关于【小黑JavaScript入门系列之脑力训练营一《六种方法实现JavaScript交换两个变量值》】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/349285

相关文章

QT移植到RK3568开发板的方法步骤

《QT移植到RK3568开发板的方法步骤》本文主要介绍了QT移植到RK3568开发板的方法步骤,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录前言一、获取SDK1. 安装依赖2. 获取SDK资源包3. SDK工程目录介绍4. 获取补丁包二

Java反转字符串的五种方法总结

《Java反转字符串的五种方法总结》:本文主要介绍五种在Java中反转字符串的方法,包括使用StringBuilder的reverse()方法、字符数组、自定义StringBuilder方法、直接... 目录前言方法一:使用StringBuilder的reverse()方法方法二:使用字符数组方法三:使用自

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(

Flask 验证码自动生成的实现示例

《Flask验证码自动生成的实现示例》本文主要介绍了Flask验证码自动生成的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习... 目录生成图片以及结果处理验证码蓝图html页面展示想必验证码大家都有所了解,但是可以自己定义图片验证码

VSCode配置Anaconda Python环境的实现

《VSCode配置AnacondaPython环境的实现》VisualStudioCode中可以使用Anaconda环境进行Python开发,本文主要介绍了VSCode配置AnacondaPytho... 目录前言一、安装 Visual Studio Code 和 Anaconda二、创建或激活 conda

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

JAVA封装多线程实现的方式及原理

《JAVA封装多线程实现的方式及原理》:本文主要介绍Java中封装多线程的原理和常见方式,通过封装可以简化多线程的使用,提高安全性,并增强代码的可维护性和可扩展性,需要的朋友可以参考下... 目录前言一、封装的目标二、常见的封装方式及原理总结前言在 Java 中,封装多线程的原理主要围绕着将多线程相关的操

MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固 通俗易懂版)

《MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固通俗易懂版)》本文主要讲解了MySQL中的多表查询,包括子查询、笛卡尔积、自连接、多表查询的实现方法以及多列子查询等,通过实际例子和操... 目录复合查询1. 回顾查询基本操作group by 分组having1. 显示部门号为10的部门名,员

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依