JS中三种字符串连接方式及其性能比较

工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方法,这里将它们一一列出顺便也对它们的性能做个具体的比较。

第一种方法  用连接符“+”把要连接的字符串连起来:

str="a";
str+="b";

毫无疑问,这种方法是最便捷快速的,如果只连接100个以下的字符串建议用这种方法最方便。

第二种方法  以数组作为中介用 join 连接字符串:

var arr=new Array();
arr.push(a);
arr.push(b);
var str=arr.join("");

w3school 网站介绍说这种方法要比第一种消耗更少的资源,速度也更快,后面我们通过实验再验证是否是这样。

第三种方法  利用对象属性来连接字符串

function stringConnect(){
    this._str_=new Array();
}
stringConnect.prototype.append=function(a){
    this._str_.push(a);
}
stringConnect.prototype.toString=function(){
    return this._str_.join();
}
    var mystr=new stringConnect;
    mystr.append("a");
    var str=mystr.toString();

利用下面代码对三种方法性能进行比较,通过更改 c 的值来调整连接字符串的个数:

var str="";
var d1,d2;
var c=5000;//连接字符串的个数

//------------------------测试第三种方法耗费时间-------
 d1=new Date();
function stringConnect(){
    this._str_=new Array();
}
stringConnect.prototype.append=function(a){
    this._str_.push(a);
}
stringConnect.prototype.toString=function(){
    return this._str_.join("");
}
    var mystr=new stringConnect;

    for(var i=0;i<c;i++){
        mystr.append("a");
    }
str=mystr.toString();
 d2=new Date();
 console.log(d2.getTime()-d1.getTime());
//-----------------------------------------------------

//------------------------测试第二种方法耗费时间-------
d1=new Date();
    var arr=new Array();
for(var i=0;i<c;i++){
    arr.push("a");
}
str=arr.join("");
    d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

//------------------------测试第一种方法耗费时间-------
d1=new Date();for(var i=0;i<c;i++){
    str+="a";
}
d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

我调整 c 分别等于5000、50000、500000、5000000,每个数值分别测了10次,最后结果如下:

c=5000
                                                                             平均耗时(单位毫秒)
第三种   3   2   2   3   1   2  2  1   1   1                              1.8
第二种   1   3   0   3   1   3  4  1   4   2                              2.2
第一种   0   0   0   0   0   1  1  1   1   1                              0.5

c=50000

第三种   22  12     9   14    12   13   13   13   10   17          13.5
第二种   8    13   12     8    11   11     8     9     8    9          9.7
第一种   7    12     5    11   10   10   10    13   16  12          10.6

c=500000

第三种 104 70 74 69 76 77 69 102 73 73                            78.7
第二种 78 100 99 99 100 98 96 71 94 97                             93.2
第一种 90 87 83 85 85 83 84 83 88 86                                 85.4

c=5000000

第三种 651 871 465 444 1012 436 787 449 432 444             599.1
第二种 568 842 593 747 417 747 719 549 573 563               631.8
第一种 516 279 616 161 466 416 201 495 510 515               417.5

统计5000000的时候在地址栏加入了随机参数,应该是避免了缓存的影响的。从结果来看,第一种方法并不比另2种方法消耗多,甚至还更有优势,这点和手册上的说明明显不一致。

测试系统:win 7旗舰

浏览器:chrome 52.0.2739.0 m

时间: 2024-08-25 03:10:21

JS中三种字符串连接方式及其性能比较的相关文章

Sql Server中三种字符串合并方法的性能比较

最近正在处理一个合并字符吕的存储过程,在一个测试系统的开发中,要使用到字符串合并功能,直接在Sql中做.        示例:        有表內容﹕        名称  內容         1     abc        1      aaa        1      dddd        2      1223        2       fkdjfd           --------------------------------        结果﹕        1 

VMware中三种网络连接的区别

VMware中三种网络连接的区别 1.概述 2.bridged(桥接模式) 3.NAT(网络地址转换模式) 4.host-only(主机模式) 5.replicate physical network connection state 选项解释 1.概述 大家在安装完虚拟机后,默认安装了两个虚拟网卡,VMnet1和VMnet8,如下图.其中VMnet1是host网卡,用于host方式连接网络的.VMnet8是NAT网卡,用于NAT方式连接网络的.它们的IP地址是随机生成的. VMware提供了三

VMWare的三种网络连接方式

VMWare和主机的三种网络连接方式 桥接 这种模式下,虚拟机通过主机的网卡与主机通信,如果主机能够上网,则虚拟机也能联网. 在虚拟机中,需要将虚拟机的IP配置为与主机处于同一网段. 虚拟机也可以与同网段的其他计算机通信. NAT 在这种模式下,虚拟机通过VMnet8与主机通信,如果主机能够上网,则虚拟机也能联网. 在虚拟机中,需要将虚拟机的IP配置为与VMnet8处于同一网段. 虚拟机不能与主机之外的计算机通信. Host-only 在这种模式下,虚拟机通过VMnet1与主机通信,虚拟机不能联

Linux虚拟机的三种网络连接方式

Linux虚拟机的三种网络连接方式 虚拟机网络模式 无论是vmware,virtual box,virtual pc等虚拟机软件,一般来说,虚拟机有三种网络模式: 1.桥接 2.NAT 3.Host-Only 桥接 桥接网络是指本地物理网卡和虚拟网卡通过VMnet0虚拟交换机进行桥接,物理网卡和虚拟网卡在拓扑图上处于同等地位,那么物理网卡和虚拟网卡就相当于处于同一个网段,虚拟交换机就相当于一台现实网络中的交换机,所以两个网卡的IP地址也要设置为同一网段. 所以当我们要在局域网使用虚拟机,对局域网

js默认三种弹框方式

<!--js默认三种弹框方式--> <!--警告--><div onclick="alert('警告')">onclick!</div> <!--确认--><div onclick="confirm('确认')">onclick!</div> <!--信息输入--><div onclick="prompt('信息输入')">onclick!

VMware运行Ubuntu 三种网络连接方式:bridge、NAT、Host-Only的区别【转】

原:http://villasy1989.iteye.com/blog/956746 我的Host是Windows7,安装VMware虚拟机,在虚拟机中装了Ubuntu10.04,首先介绍下VMware下的几个虚拟设备: VMnet0:VMware用于虚拟桥接网络下的虚拟交换机: VMnet1:VMware用于虚拟Host-Only网络下的虚拟交换机: VMnet8:VMware用于虚拟NAT网络下的虚拟交换机: VMware Network Adapter VMnet1:这是Host用于与Ho

Vmware 的三种网络连接方式

VMWare提供了三种工作模式,host-only(主机模式).NAT(网络地址转换模式).bridged(桥接模式). 1.host-only(主机模式) 在某些特殊的网络调试环境中,如何要求将真实环境和虚拟环境隔离开,这时你就可采用host-only模式.在host-only模式中,所有的虚拟系统是可以相互通信的,但虚拟系统和真实的网络是被隔离开的,VMWare虚拟机不能访问互联网. 提示:在host-only模式下,虚拟系统和宿主机器系统是可以相互通信的,相当于这两台机器通过双绞线互连.

js中三种对象意义

JS中,可以将对象分为“内部对象”.“宿主对象”和“自定义对象”三种. 内部对象 js中的内部对象包括Array.Boolean.Date.Function.Global.Math.Number.Object.RegExp.String以及各种错误类对象,包括Error.EvalError.RangeError.ReferenceError.SyntaxError和TypeError.其中Global和Math这两个对象又被称为“内置对象”,这两个对象在脚本程序初始化时被创建,不必实例化这两个对

【SSH系列】深入浅出spring IOC中三种依赖注入方式

spring的核心思想是IOC和AOP,IOC-控制反转,是一个重要的面向对象编程的法则来消减计算机程序的耦合问题,控制反转一般分为两种类型,依赖注入和依赖查找,依赖什么?为什么需要依赖?注入什么?控制什么?依赖注入和控制反转是一样的概念吗?接触新的知识,小编的脑袋中全是大大的问号,不过没有关系,今天这篇博文,小编主要来简单的介绍一下在spring IOC中依赖注入的方法. 依赖注入和控制反转,目的是为了使类与类之间解耦合,提高系统的可扩展性和可维护性.我们可以从以下几个方面理解: a.参与者都