首页 技术 正文
技术 2022年11月21日
0 收藏 879 点赞 4,962 浏览 2267 个字

工作中经常会碰到要把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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,909
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,434
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,249
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,060
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,692
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,730