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 年月日联动实现核心代码
Dec 21 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
深入理解Javascript闭包 新手版
Dec 28 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
浅谈React之状态(State)
Sep 19 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 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
PHP 中执行系统外部命令
2006/10/09 PHP
URL Rewrite的设置方法
2007/01/02 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python爬虫工程师面试问题总结
2018/03/22 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
高二英语教学反思
2014/01/19 职场文书
2014年国庆节寄语
2014/09/19 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
python实现会员信息管理系统(List)
2022/03/18 Python
vue实现Toast组件轻提示
2022/04/10 Vue.js