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

前言

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

起由

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

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变量交换很稳定

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

(0)

相关推荐

  • 分析 JavaScript 中令人困惑的变量赋值

    Javascript是一门弱类型的语言,声明变量不需要声明其类型,var x 就可以等于任何类型的值. 比如: var str = "string...."; var arr = ["this","is","array"]; var obj = {name:"caizhongqi",age:26,sex:"male"}; 这些都是正确的,这似乎非常简单方便,但是这种方便也会带来一些令人难

  • JavaScript中的函数的两种定义方式和函数变量赋值

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /*I总结: 1.函数名可以做变量使用,可以赋值,可以传值 2.函数名当参数,传递给另一个函数 */ //===========

  • JS交换变量的方法

    本文实例讲述了JS交换变量的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title></title>      <script type="text/javascript">          function jh(arr) {              for (

  • JavaScript交换两个变量值的七种解决方案

    前言 这篇文章总结了七种办法来交换a和b的变量值 var a = 123; var b = 456; 交换变量值方案一 最最最简单的办法就是使用一个临时变量了,不过使用临时变量的方法实在是太low了 var t; t = a; a = b; b = t; 首先把a的值存储到临时变量中,然后b赋值给a,最后拿出临时变量中的a值赋给b,这个办法是最基本的了 交换变量值方案二 下面的方案都不会有临时变量,我总结了一下,其实不使用临时变量的思路都是让其中一个变量变成一个a和b都有关系的值,这样可以先改变

  • JavaScript传递变量: 值传递?引用传递?

    当变量A赋值给变量B时,会将栈中的值复制一份到为新变量分配的空间中. 如何理解? 复制代码 代码如下: var x = y = 1; y = 2; alert(x); x的值为多少? 复制代码 代码如下: var obj = {}; var sub = {}; sub['id'] = 3; obj['sub'] = sub; sub['id'] = 4; alert(obj['sub']['id']); obj['sub']['id']的值又为多少?他们真的符合你的预期吗? 我们分别运行2段代码

  • Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)

    以前只知道在返回data区域赋给html控件值,后来发现,原来直接定义变量就行了.   复制代码 代码如下: var csj_data; $.ajax       ({           cache: false,           async: false,           type: 'post',           data: { aaa: "1" },           url: "../handle/Ladder_Fee_Code.ashx?ajaxac

  • 如何将JS的变量值传递给ASP变量

    asp作为主页面,外接一个js的,我想知道一下能否在js里面调用asp的变量值,如果能这些值是怎么传递过去的呢? 我是这样做的,不知道是不是正确的?在asp这里:<script type="text/javascript" src="lpindex.js?jsid=trim(request('id'))" ></script> 而在js那边:location.href='lmsg.asp?id=<%=trim(request("

  • js判断变量是否空值的代码

    复制代码 代码如下: function empty(v){ switch (typeof v){ case 'undefined' : return true; case 'string' : if(trim(v).length == 0) return true; break; case 'boolean' : if(!v) return true; break; case 'number' : if(0 === v) return true; break; case 'object' : i

  • js中取得变量绝对值的方法

    本文实例讲述了js中取得变量绝对值的方法.分享给大家供大家参考.具体分析如下: 绝对值在js中我们直接使用abs函数来求,这里就来整理一些关于js中取得变量的绝对值的方法,以便让大家更深入的理解js绝对值的用法 js中的绝对值不怎么常用到,今天在写一个方法的时候遇到了,于是记录下来,与大家共同学习. js中的默认对象--Math对象下面有一个abs函数,专门用来获取数字的绝对值,如: 复制代码 代码如下: Math.abs(-1);  //1 Math.abs(-2);  //2 当然,这个函数

  • javascript的变量、传值、传址、参数之间关系

    先把收获晾一下: 1.javascrip变量包含两种类型的值,一种为引用类型的值,一种是基本类型的值.引用类型包括:Array,Object,Function(可以这么理解,非基本类型的都是引用类型);5种基本类型包括:undefined,null,string,boolean,number 2.函数的参数的传递的机制是复制变量值. 书上说:"把函数外部的值复制给函数内部的参数,就和把值从一个变量复制给另一个变量一样.基本类型的传递如同基本类型变量的复制一样,而引用类型的则如同引用类型变量的复制

随机推荐