详解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 相关文章推荐
jquery easyui的tabs使用时的问题
Mar 23 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
js实现抽奖效果
Mar 27 Javascript
理解javascript async的用法
Aug 22 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
es6数值的扩展方法
2019/03/11 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
用Python进行TCP网络编程的教程
2015/04/29 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
python调用java的jar包方法
2018/12/15 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Python time库基本使用方法分析
2019/12/13 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
python怎么提高计算速度
2020/06/11 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
金士达面试非笔试
2012/03/14 面试题
《石榴》教学反思
2014/03/02 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
内勤主管岗位职责
2014/04/03 职场文书
2014年教务处工作总结
2014/12/03 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技