JS 字符串连接[性能比较]


Posted in Javascript onMay 10, 2009

一、ECMAScript的字符串是不可变的,即它们的值不能改变,因此当你写出下面的代码的时候发生了什么呢?
Js代码

var str = "Hello "; 
str += "world";

执行的步骤如下:
创建存储“Hello“的字符串
创建存储”world“的字符串
创建存储连接结果的字符串
把str的当前内容复制到结果中
把“world”复制到结果中
更新str,使它指向结果
每次完成字符串的连接都会执行步骤2-6,使得这种操作非常消耗资源。想象一下重复这个过程几百次,甚至几千次,那性能如何?
二、那么再看看下面的代码,来解决这种窘况
Js代码
var arr = new Array; 
arr[0] = "Hello "; 
arr[1] = "world"; 
var str = arr.join("");

执行的步骤如下:
创建存储结果的字符串
把每个字符串复制到结果中的适当位置
这样,无论数组要引入多少字符串都不成问题,因为只有在调用join()方法时候才会发生连接操作。
三、觉得操作很复杂?代码不能确切反应它的意图?那么我们用对象的解决方式吧,使它更容易理解,用StringBuffer类来封装该功能:
Js代码
function StringBuffer() { 
this._strs = new Array; 
} 
StringBuffer.prototype.append = function (str) { 
this._strs.push(str); 
}; 
StringBuffer.prototype.toString = function() { 
this._strs.join(""); 
};

好了,感受一下吧,现在如何操作字符串呢?
Js代码
var sb = new StringBuffer(); 
sb.append("Hello "); 
sb.append("world"); 
var result = sb.toString();

四、似乎色香味俱全了,但是吃下去的功效如何?
Js代码
var tStart = new Date(); 
var str = ""; 
for(var i=0;i<10000;i++) 
{ 
str += "text" 
} 
var tEnd = new Date(); 
document.write("原始的方法加号 拼接10000个字符串 花费时间:"+(tEnd.getTime()-tStart.getTime())+"秒"); 
var oSB = new StringBuffer(); 
tStart = new Date(); 
for(var i=0;i<10000;i++) 
{ 
oSB.append("text"); 
} 
var sRst = oSB.toString(); 
tEnd = new Date(); 
document.write("<br/>StringBuffer 拼接10000个字符串 花费时间:"+(tEnd.getTime()-tStart.getTime())+"秒");

可能你已经猜到了,StringBuffer要比+快,到底快多少呢?我的测试结果:
Js代码
FF3.0.10
原始的方法加号 拼接10000个字符串 花费时间:3豪秒
StringBuffer 拼接10000个字符串 花费时间:8豪秒
IE7
原始的方法加号 拼接10000个字符串 花费时间:15豪秒
StringBuffer 拼接10000个字符串 花费时间:16豪秒
IE8
原始的方法加号 拼接10000个字符串 花费时间:15豪秒
StringBuffer 拼接10000个字符串 花费时间:16豪秒
Chrome1.0.154.46
原始的方法加号 拼接10000个字符串 花费时间:1豪秒
StringBuffer 拼接10000个字符串 花费时间:2豪秒
五、怎么回事?
恩?眼睛花了?还是测试结果贴错了?还是……?
一切都没有错!
2006年11月此书出版《JavaScript高级程序设计》在84-85页,就是我上面的内容,我的测试结果却和它的完全相反,技术的变革还是……?
我觉得是一个教训!深刻的教训!不知道哪看了这篇文章的人会有何感想。
Javascript 相关文章推荐
javascript 禁止复制网页
Jun 11 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
javascript获取当前ip的代码
May 10 #Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 #Javascript
extjs fckeditor集成代码
May 10 #Javascript
一组JS创建和操作表格的函数集合
May 07 #Javascript
给Function做的OOP扩展
May 07 #Javascript
js arguments.callee的应用代码
May 07 #Javascript
javascript 有用的脚本函数
May 07 #Javascript
You might like
php更新修改excel中的内容实例代码
2014/02/26 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
js友好的时间返回函数
2016/08/24 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
在vue项目中引用Iview的方法
2018/09/14 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
Python判断Abundant Number的方法
2015/06/15 Python
python语音识别实践之百度语音API
2018/08/30 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
事假请假条范文
2014/04/11 职场文书
健康家庭事迹材料
2014/05/02 职场文书
汽车维修求职信
2014/06/15 职场文书
法学专业求职信
2014/07/15 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
致青春观后感
2015/06/09 职场文书