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 29 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
uni app仿微信顶部导航条功能
Sep 17 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使用codebase生成随机数
2014/03/25 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
python验证码识别实例代码
2018/02/03 Python
python实现比较文件内容异同
2018/06/22 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
基于python历史天气采集的分析
2019/02/14 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
股份转让协议书
2014/04/12 职场文书
客户答谢会活动方案
2014/08/31 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL