【小黑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

相关文章

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

IDEA运行spring项目时,控制台未出现的解决方案

《IDEA运行spring项目时,控制台未出现的解决方案》文章总结了在使用IDEA运行代码时,控制台未出现的问题和解决方案,问题可能是由于点击图标或重启IDEA后控制台仍未显示,解决方案提供了解决方法... 目录问题分析解决方案总结问题js使用IDEA,点击运行按钮,运行结束,但控制台未出现http://

解决Spring运行时报错:Consider defining a bean of type ‘xxx.xxx.xxx.Xxx‘ in your configuration

《解决Spring运行时报错:Considerdefiningabeanoftype‘xxx.xxx.xxx.Xxx‘inyourconfiguration》该文章主要讲述了在使用S... 目录问题分析解决方案总结问题Description:Parameter 0 of constructor in x

解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

《解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题》文章详细描述了在使用lombok的@Data注解标注实体类时遇到编译无误但运行时报错的问题,分析... 目录问题分析问题解决方案步骤一步骤二步骤三总结问题使用lombok注解@Data标注实体类,编译时

JSON字符串转成java的Map对象详细步骤

《JSON字符串转成java的Map对象详细步骤》:本文主要介绍如何将JSON字符串转换为Java对象的步骤,包括定义Element类、使用Jackson库解析JSON和添加依赖,文中通过代码介绍... 目录步骤 1: 定义 Element 类步骤 2: 使用 Jackson 库解析 jsON步骤 3: 添

Java中注解与元数据示例详解

《Java中注解与元数据示例详解》Java注解和元数据是编程中重要的概念,用于描述程序元素的属性和用途,:本文主要介绍Java中注解与元数据的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参... 目录一、引言二、元数据的概念2.1 定义2.2 作用三、Java 注解的基础3.1 注解的定义3.2 内

Java中使用Java Mail实现邮件服务功能示例

《Java中使用JavaMail实现邮件服务功能示例》:本文主要介绍Java中使用JavaMail实现邮件服务功能的相关资料,文章还提供了一个发送邮件的示例代码,包括创建参数类、邮件类和执行结... 目录前言一、历史背景二编程、pom依赖三、API说明(一)Session (会话)(二)Message编程客

Java中List转Map的几种具体实现方式和特点

《Java中List转Map的几种具体实现方式和特点》:本文主要介绍几种常用的List转Map的方式,包括使用for循环遍历、Java8StreamAPI、ApacheCommonsCollect... 目录前言1、使用for循环遍历:2、Java8 Stream API:3、Apache Commons

Python判断for循环最后一次的6种方法

《Python判断for循环最后一次的6种方法》在Python中,通常我们不会直接判断for循环是否正在执行最后一次迭代,因为Python的for循环是基于可迭代对象的,它不知道也不关心迭代的内部状态... 目录1.使用enuhttp://www.chinasem.cnmerate()和len()来判断for

JavaScript中的isTrusted属性及其应用场景详解

《JavaScript中的isTrusted属性及其应用场景详解》在现代Web开发中,JavaScript是构建交互式应用的核心语言,随着前端技术的不断发展,开发者需要处理越来越多的复杂场景,例如事件... 目录引言一、问题背景二、isTrusted 属性的来源与作用1. isTrusted 的定义2. 为