JavaScript交换变量常用4种方法解析


Posted in Javascript onSeptember 02, 2020

许多算法需要交换2个变量。在编码面试中,可能会问您“如何在没有临时变量的情况下交换2个变量?”。我很高兴知道执行变量交换的多种方法。在本文中,您将了解大约4种交换方式(2种使用额外的内存,而2种不使用额外的内存)。

1.解构赋值

解构赋值语法(ES2015的功能)使您可以将数组的项提取到变量中。例如,以下代码对数组进行解构:

let a;
let b;

[a, b] = [1, 2, 3];

a; // => 1
b; // => 2

[a,b] = [1,2,3] 是对 [1,2,3] 数组进行解构的解构赋值。[1,2,3] 的第一项1 分配了一个变量 a,第二项 2 对应地分配了 b。

知道如何解构数组,可以很容易地使用它交换变量。让我们使用解构分配交换变量 a 和 b:

let a = 1;
let b = 2;

[a, b] = [b, a];

a; // => 2
b; // => 1

交换过程:

第一步,在解构的右侧,创建一个临时数组[b,a](其值为[2,1])。
然后发生临时数组的解构:[a,b] = [2,1]。变量 a 分配了 2,b 分配了 1。已经完成了 a 和 b 的交换。
我喜欢这种解构方法,因为它简短而富有表现力:交换仅用一条语句执行。它适用于任何数据类型:数字,字符串,布尔值,对象。

对于大多数情况,我建议使用解构赋值来交换变量。

2.临时变量

使用临时变量交换变量是经典的。顾名思义,这种方法需要一个额外的临时变量。

让我们使用临时变量 temp 交换变量 a 和 b 的值:

let a = 1;
let b = 2;
let temp;

temp = a;
a = b;
b = temp;

a; // => 2
b; // => 1

3.加减法

您可以交换变量而无需使用额外的内存(例如临时数组或变量)。

以下示例使用加法 + 和减法 - 算术运算符交换变量 a 和 b:

let a = 1;
let b = 2;

a = a + b;
b = a - b;
a = a - b;

a; // => 2
b; // => 1

最初,a为1,b为2。让我们看一下 3 条语句如何执行交换:

a = a + b赋予a值1 + 2。
b = a - b为b赋值1 + 2 - 2 = 1(b现在为1)。
a = a - b为a分配值1 + 2 - 1 = 2(a现在为2)。

最后,a为2,b为1。已经完成了a和b的交换。

尽管这种方法不使用临时变量,但有很大的局限性。

首先,您只能交换整数。

其次,在第一步a = a + b进行加法时要注意数字溢出(总和必须小于Number.MAX_SAFE_INTEGER)。

4.按位XOR运算符

如果操作数不同,则 XOR 运算符的计算结果为 true。提醒一下,这是 XOR 真值表: 

JavaScript交换变量常用4种方法解析

在JavaScript中,按位 XOR 运算符 n1 ^ n2 对n1和n2数字的每一位执行 XOR 操作。

举例来说,这是 5 ^ 7 评估(evaluates)为2的方式:

1 0 1 (5 的二进制)
1 1 1 (7 的二进制)
-----
0 1 0 (5 ^ 7 = 2 的二进制)

按位 XOR 具有 2 个有趣的属性:

n ^ n = 0:对相同数字执行的按位 XOR 为0.
n ^ 0 = n:对一个数字执行按位异或,零是相同数字.

这些 XOR 属性可用于交换变量。让我们看看如何交换a和b变量:

let a = 1;
let b = 2;

a = a ^ b;
b = a ^ b;
a = a ^ b;

a; // => 2
b; // => 1

交换过程:

a = a ^ b
b = a ^ b。基于1 a被a ^ b取代。因此b =(a ^ b)^ b = a ^(b ^ b)= a ^ 0 = a。请记住,现在b不是a。
a = a ^ b。基于1 a的a替换为a ^ b,基于2 b的a替换为a。因此a =(a ^ b)^ a = b ^(a ^ a)= b ^ 0 = b。变量a变为b。

如果您觉得解释很复杂,请随时跳过。由3个赋值组成的按位XOR(n ^ n = 0和n ^ 0 = n)的性质使您可以交换a和b的值。

使用按位XOR运算符交换变量有局限性:您只能交换整数。

结论

JavaScript提供了很多交换变量的好方法,无论有没有额外的内存。

  • 我建议使用的第一种方法通过应用解构赋值[a,b] = [b,a]交换变量。这是一种简短而富有表现力的方法。
  • 第二种方法使用临时变量。这是代替(applying)解构赋值方法的不错选择。
  • 第三种方法,使用加减法,不使用其他变量或内存。但是,该方法仅限于交换整数。
  • 同样,使用按位XOR的第四种方法不使用额外的内存。但是同样,您只能交换整数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件推荐 jquery.cookie
Nov 09 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
详解Vue单元测试case写法
May 24 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 #Javascript
Jquery $.map使用方法实例详解
Sep 01 #jQuery
JQuery基于FormData异步提交数据文件
Sep 01 #jQuery
vue实现路由懒加载的3种方法示例
Sep 01 #Javascript
JQuery使用数组遍历跳出each循环
Sep 01 #jQuery
vue+echarts实现动态折线图的方法与注意
Sep 01 #Javascript
node.js 如何监视文件变化
Sep 01 #Javascript
You might like
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
React优化子组件render的使用
2019/05/12 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
详解Django中的过滤器
2015/07/16 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
Python编写打字训练小程序
2019/09/26 Python
python实现翻译word表格小程序
2020/02/27 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
实现向右循环移位
2014/07/31 面试题
项目采购员岗位职责
2014/04/15 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
锦旗赠语
2015/06/23 职场文书
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
浅谈MySQL之select优化方案
2021/08/07 MySQL
python 安全地删除列表元素的方法
2022/03/16 Python
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android