详解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字符串处理性能的代码
Dec 07 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 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
一个php作的文本留言本的例子(四)
2006/10/09 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
详解JS模块导入导出
2017/12/20 Javascript
详解vue axios二次封装
2018/07/22 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python创建xml的方法
2015/03/10 Python
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
基于python使用tibco ems代码实例
2019/12/20 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
高中运动会广播稿
2014/01/21 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书