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

相关文章

Spring事务传播机制最佳实践

《Spring事务传播机制最佳实践》Spring的事务传播机制为我们提供了优雅的解决方案,本文将带您深入理解这一机制,掌握不同场景下的最佳实践,感兴趣的朋友一起看看吧... 目录1. 什么是事务传播行为2. Spring支持的七种事务传播行为2.1 REQUIRED(默认)2.2 SUPPORTS2

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》:本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java进程异常故障定位及排查过程

《Java进程异常故障定位及排查过程》:本文主要介绍Java进程异常故障定位及排查过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、故障发现与初步判断1. 监控系统告警2. 日志初步分析二、核心排查工具与步骤1. 进程状态检查2. CPU 飙升问题3. 内存

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

java中新生代和老生代的关系说明

《java中新生代和老生代的关系说明》:本文主要介绍java中新生代和老生代的关系说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、内存区域划分新生代老年代二、对象生命周期与晋升流程三、新生代与老年代的协作机制1. 跨代引用处理2. 动态年龄判定3. 空间分

MySQL查询JSON数组字段包含特定字符串的方法

《MySQL查询JSON数组字段包含特定字符串的方法》在MySQL数据库中,当某个字段存储的是JSON数组,需要查询数组中包含特定字符串的记录时传统的LIKE语句无法直接使用,下面小编就为大家介绍两种... 目录问题背景解决方案对比1. 精确匹配方案(推荐)2. 模糊匹配方案参数化查询示例使用场景建议性能优

Java设计模式---迭代器模式(Iterator)解读

《Java设计模式---迭代器模式(Iterator)解读》:本文主要介绍Java设计模式---迭代器模式(Iterator),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录1、迭代器(Iterator)1.1、结构1.2、常用方法1.3、本质1、解耦集合与遍历逻辑2、统一

Java内存分配与JVM参数详解(推荐)

《Java内存分配与JVM参数详解(推荐)》本文详解JVM内存结构与参数调整,涵盖堆分代、元空间、GC选择及优化策略,帮助开发者提升性能、避免内存泄漏,本文给大家介绍Java内存分配与JVM参数详解,... 目录引言JVM内存结构JVM参数概述堆内存分配年轻代与老年代调整堆内存大小调整年轻代与老年代比例元空

深度解析Java DTO(最新推荐)

《深度解析JavaDTO(最新推荐)》DTO(DataTransferObject)是一种用于在不同层(如Controller层、Service层)之间传输数据的对象设计模式,其核心目的是封装数据,... 目录一、什么是DTO?DTO的核心特点:二、为什么需要DTO?(对比Entity)三、实际应用场景解析