详解JS几种变量交换方式以及性能分析对比


Posted in Javascript onNovember 25, 2016

前言

“两个变量之间的值得交换”,这是一个经典的话题,现在也有了很多的成熟解决方案,本文主要是列举几种常用的方案,进行大量计算并分析对比。

起由

最近做某个项目时,其中有一个需求是交换数组中的两个元素。当时使用的方法是:

arr = [item0,item1,...,itemN];
//最初使用这段代码来交换第0个和第K(k<N)个元素
arr[0] = arr.splice(k, 1, arr[0])[0];

当时觉得这种方法很优雅,高逼格。。。

后来,业余时间又拿这个研究下了,顺带自己写了个分析工具,和普通方式进行对比。

结果,大大的出乎我的意料,这种方式的效率比我想象的要低的多。以下是其中一个测试结果的图详解JS几种变量交换方式以及性能分析对比

于是,基于这点,又研究了下其它的几种数值交换的方式,一起整合进入了分析工具中,才有了本文的这次总结。

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个循环,得到的分析结果)详解JS几种变量交换方式以及性能分析对比

可以看出,tmp变量交换最快,try catch最慢

分析结果2

以下截图数据是,在chrome (支持es6)中运行了100万次后得出的结论(每次运行1万次,一共100个循环,得到的分析结果)详解JS几种变量交换方式以及性能分析对比

 可以看出,eval最慢,splice性能较低,tmp变量交换很稳定

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

Javascript 相关文章推荐
JavaScript 数组详解
Oct 10 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
前端jquery部分很精彩
May 03 Javascript
Node.js返回JSONP详解
May 18 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
深入浅析Vue组件开发
Nov 25 #Javascript
javascript中href和replace的比较(详解)
Nov 25 #Javascript
移动适配的几种方案(三种方案)
Nov 25 #Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 #Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 #Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 #Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 #Javascript
You might like
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
python发布模块的步骤分享
2014/02/21 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python读取xlsx的方法
2018/12/25 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
总经理检讨书
2014/09/15 职场文书
人事文员岗位职责
2015/02/04 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
纪检干部学习心得体会
2016/01/23 职场文书