详解JS几种变量交换方式以及性能分析对比
作者:撒网要见鱼 发布时间:2024-04-10 16:13:58
前言
“两个变量之间的值得交换”,这是一个经典的话题,现在也有了很多的成熟解决方案,本文主要是列举几种常用的方案,进行大量计算并分析对比。
起由
最近做某个项目时,其中有一个需求是交换数组中的两个元素。当时使用的方法是:
arr = [item0,item1,...,itemN];
//最初使用这段代码来交换第0个和第K(k<N)个元素
arr[0] = arr.splice(k, 1, arr[0])[0];
当时觉得这种方法很优雅,高逼格。。。
后来,业余时间又拿这个研究下了,顺带自己写了个分析工具,和普通方式进行对比。
结果,大大的出乎我的意料,这种方式的效率比我想象的要低的多。以下是其中一个测试结果的图
于是,基于这点,又研究了下其它的几种数值交换的方式,一起整合进入了分析工具中,才有了本文的这次总结。
JS变量交换的几种方式
其实关于JS的变量交换,使用最广泛的几种方式基本已经是前端人员必备的技能了,本文正好借此分析研究的契机,列举了本次分析中用到的几种交换方式:
第一种:普通临时变量交换方式
适用性: 适用于所有类型
代码如下:
tmp = a;
a = b;
b = tmp;
简要说明:
这是用到的最广泛的一种方式,经实战测试分析,性能也很高
(在JS中,这种方式效率确实很高,而且就算是其它语言中,只要tmp变量提前创建,性能也不会很低,反而是一些杂技派和少数派性能方面很低)
基本上可以说: 经典的才是最优雅的
第二种:利用一个新的对象来进行数据交换
适用性: 适用于所有类型
代码如下:
a = {a : b, b : a};
b = a.b
;a = a.a;
简要说明:
这种方式在实战中应用的很少
第三种:利用一个新的数组来进行数据交换
适用性: 适用于所有类型
代码如下:
a = [b, b=a][0];
简要说明:
这种方式在各大论坛中都有看到有人使用,但经测试实际性能并不高
第四种:利用数组交换变量(需EJS支持)
适用性: 适用于所有类型
代码如下:
`[a, b] = [b, a];
简要说明:
这也是在ES6出来后看到有人用的,实际在现有的浏览器中测试,性能很低
第五种:利用try catch交换
适用性: 适用于所有类型
代码如下:
a=(function(){;
try{return b}
finally{b=a}}
)();
简要说明:
这种方法应该是基本没人使用的,也没有什么实用性,而且性能也是属于在各种方法中垫底的
第六种:异或操作交换变量第一种方式
适用性: 适用于数字或字符串
代码如下:
a = (b = (a ^= b) ^ b) ^ a;
简要说明:
异或方法在数字或字符串时用到的比较普遍,而且性能也不低
第七种:异或操作交换变量第二种方式
适用性: 适用于数字或字符串
代码如下:
a ^=b;
b ^=a;
a ^=b;
简要说明:
异或方法在数字或字符串时用到的比较普遍,而且性能也不低
第八种:数字之间的加减运算来实现,第一种加减方式
适用性: 仅适用于数字
代码如下:
a = a + b;
b = a - b;
a = a - b;
简要说明:
这种用法在只用于数字间的交换时,性能也不弱
第九种:数字之间的加减运算来实现,第一种加减方式
适用性: 仅适用于数字
代码如下:
a = b -a +(b = a);
简要说明:
这种用法在只用于数字间的交换时,性能也不弱
第十种:利用eval计算
适用性: 仅适用于数字和字符串
代码如下:
eval("a="+b+";b="+a);
简要说明:
这种方式仅用于研究,实战慎用
这种模式执行一万次耗时等于其它执行一亿次...
第十一种:数组中,利用splice交换两个元素的位置
适用性: 仅适用于数组元素
代码如下:
arr[0] = arr.splice(2, 1, arr[0])[0];
简要说明:
这种方式看起来挺优雅的,但实际上性能远远比不上临时变量那种
各种交换方式的性能对比
上述列举了几种方式都有一一做过对比分析,基本上可以得出的结论是:
还是老老实实的用回临时变量交换吧,经典,优雅,而且保证不会出什么幺蛾子
性能对比截图
分析结果1
以下截图中的数据是,在chrome中运行了一亿次后得出的结论(每次运行100万次,一共100个循环,得到的分析结果)
可以看出,tmp变量交换最快,try catch最慢
分析结果2
以下截图数据是,在chrome (支持es6)中运行了100万次后得出的结论(每次运行1万次,一共100个循环,得到的分析结果)
可以看出,eval最慢,splice性能较低,tmp变量交换很稳定
来源:http://www.cnblogs.com/dailc/p/6099662.html
猜你喜欢
- 本文实例为大家分享了Vue实现通知或详情类弹窗的具体代码,供大家参考,具体内容如下效果如图所示:(整体样式模仿ant-design-vue
- 我写过一个外部模块扩展,现在开始看PHP源码中的mysql扩展,它是可以被集成到PHP内部的,所以应该算是内置的扩展了。 该扩展需要用到my
- 核心导出作业的 代码 和 作业备份是相似的 代码如下:alter PROC DumpJob (@job VARCHAR(100)
- 本文实例为大家分享了python实现简单聊天室的具体代码,供大家参考,具体内容如下刚刚接触python编程,又从接触java开始一直对soc
- 一、介绍线程是什么?线程有啥用?线程和进程的区别是什么?线程是操作系统能够进行运算调度的最小单位。被包含在进程中,是进程中的实际运作单位。一
- vue3路由hash与History的设置1、history 关键字:createWebHistoryimport { createRout
- 一、什么是requirements.txt文件及作用requirements.txt 文件是项目的依赖包及其对应版本号的信息列表,即记载你这
- //TransmitFile实现下载protected void Button1_Click(object sender, EventArg
- numpy 数组及运算扩展库 numpy 是 Python 支持科学计算的重要扩展库,是数据分析和科学计算领域如 scipy、pa
- 线程池线程池的创建 - concurrentconcurrent 是 Python 的内置包,使用它可以帮助我们完成创建线程池的任
- 本文实例讲述了python创建关联数组(字典)的方法。分享给大家供大家参考。具体分析如下:关联数组在python中叫字典,非常有用,下面是定
- 总括pandas的索引函数主要有三种:loc 标签索引,行和列的名称iloc 整型索引(绝对位置索引),绝对意义上的几行几列,起始索引为0i
- 游标的使用提到游标这个词,人们想到的是在屏幕上一个闪动的方框,用以指示用户将要输入字符的位置。而在关系型数据库的SQL语言中,游标却有另外的
- 本文实例讲述了GO语言延迟函数defer用法。分享给大家供大家参考。具体分析如下:defer 在声明时不会立即执行,而是在函数 return
- 参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2操作系统:Windows我喜欢p
- 优雅的设计经常包含一些特殊的字体,而这些字体并不存在于用户的字体库中,我们并不能奢求每一个访客都是设计师。 :-)虽然CSS3标
- Python信息抽取之乱码解决办法就事论事,直说自己遇到的情况,和我不一样的路过吧,一样的就看看吧信息抓取,用python,beautifu
- drop_duplicates为我们提供了数据去重的方法,那怎么得到哪些数据有重复呢?实现步骤:1、采用drop_duplicates对数据
- 一、更改my.cnf配置文件1.用命令编辑/etc/my.cnf配置文件,即:vim /etc/my.cnf 或者 vi /etc/my.c
- 目录一. 加载数据1. 继承Dataset类并重写关键方法2. 使用Dataloader加载数据二. 模型设计三. 训练四. 测试结语pyt