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

相关文章

C#实现高性能Excel百万数据导出优化实战指南

《C#实现高性能Excel百万数据导出优化实战指南》在日常工作中,Excel数据导出是一个常见的需求,然而,当数据量较大时,性能和内存问题往往会成为限制导出效率的瓶颈,下面我们看看C#如何结合EPPl... 目录一、技术方案核心对比二、各方案选型建议三、性能对比数据四、核心代码实现1. MiniExcel

在React聊天应用中实现图片上传功能

《在React聊天应用中实现图片上传功能》在现代聊天应用中,除了文字和表情,图片分享也是一个重要的功能,本文将详细介绍如何在基于React的聊天应用中实现图片上传和预览功能,感兴趣的小伙伴跟着小编一起... 目录技术栈实现步骤1. 消息组件改造2. 图片预览组件3. 聊天输入组件改造功能特点使用说明注意事项

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no

debian12安装docker的实现步骤

《debian12安装docker的实现步骤》本文主要介绍了debian12安装docker的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录步骤 1:更新你的系统步骤 2:安装依赖项步骤 3:添加 docker 的官方 GPG 密钥步骤

9个SpringBoot中的自带实用过滤器使用详解

《9个SpringBoot中的自带实用过滤器使用详解》在SpringBoot应用中,过滤器(Filter)是处理HTTP请求和响应的重要组件,SpringBoot自带了许多实用的过滤器,如字符编码,跨... 目录1. CharacterEncodingFilter - 字符编码过滤器功能和配置手动配置示例2

基于Redis实现附近商铺查询功能

《基于Redis实现附近商铺查询功能》:本文主要介绍基于Redis实现-附近商铺查询功能,这个功能将使用到Redis中的GEO这种数据结构来实现,需要的朋友可以参考下... 目录基于Redis实现-附近查询1.GEO相关命令2.使用GEO来实现以下功能3.使用Java实现简China编程单的附近商铺查询4.Red

Spring Boot Controller处理HTTP请求体的方法

《SpringBootController处理HTTP请求体的方法》SpringBoot提供了强大的机制来处理不同Content-Type​的HTTP请求体,这主要依赖于HttpMessageCo... 目录一、核心机制:HttpMessageConverter​二、按Content-Type​处理详解1.

使用Python实现实时金价监控并自动提醒功能

《使用Python实现实时金价监控并自动提醒功能》在日常投资中,很多朋友喜欢在一些平台买点黄金,低买高卖赚点小差价,但黄金价格实时波动频繁,总是盯着手机太累了,于是我用Python写了一个实时金价监控... 目录工具能干啥?手把手教你用1、先装好这些"食材"2、代码实现讲解1. 用户输入参数2. 设置无头浏

Spring Boot 常用注解详解与使用最佳实践建议

《SpringBoot常用注解详解与使用最佳实践建议》:本文主要介绍SpringBoot常用注解详解与使用最佳实践建议,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录一、核心启动注解1. @SpringBootApplication2. @EnableAutoConfi

Android与iOS设备MAC地址生成原理及Java实现详解

《Android与iOS设备MAC地址生成原理及Java实现详解》在无线网络通信中,MAC(MediaAccessControl)地址是设备的唯一网络标识符,本文主要介绍了Android与iOS设备M... 目录引言1. MAC地址基础1.1 MAC地址的组成1.2 MAC地址的分类2. android与I