详解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 相关文章推荐
js function定义函数使用心得
Apr 15 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
Vue学习之路之登录注册实例代码
Jul 06 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 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中基本HTTP认证技巧分析
2015/03/16 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
js运动应用实例解析
2015/12/28 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
express express-session的使用小结
2018/12/12 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python实现各种插值法(数值分析)
2019/07/30 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python内置函数property()如何使用
2020/09/01 Python
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
会计自我鉴定
2013/11/02 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
高中教师考核方案
2014/05/18 职场文书
机械工程师岗位职责
2014/06/16 职场文书
学校读书活动总结
2014/06/30 职场文书
大学生安全责任书
2014/07/25 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers