Javascript三种字符串连接方式及性能比较


Posted in Javascript onMay 28, 2019

第一种:用连接符“+”连接字符串

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

这种方法相对以下两种,最便捷快速。建议100字符以下的连接使用这种连接方式。

第二种:以数组作为中介,使用jion函数进行连接

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

第三种:利用对象属性连接字符串

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

总结

以上所述是小编给大家介绍的Javascript三种字符串连接方式及性能比较,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 鼠标滚轮事件
Apr 09 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
防止文件缓存的js代码
Jan 10 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 #Javascript
Vue实现表格批量审核功能实例代码
May 28 #Javascript
vue+Element实现搜索关键字高亮功能
May 28 #Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 #Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 #Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 #Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 #Javascript
You might like
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
基于JQuery的多标签实现代码
2012/09/19 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
Python datetime时间格式化去掉前导0
2014/07/31 Python
python统计日志ip访问数的方法
2015/07/06 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
应用服务器有那些
2012/01/19 面试题
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
2014年底个人工作总结
2015/03/10 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
目标责任书格式范文
2015/05/11 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers