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 读取xml,写入xml 实现代码
Jul 10 Javascript
js word表格动态添加代码
Jun 07 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
vue.js路由跳转详解
Aug 28 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python strip lstrip rstrip使用方法
2008/09/06 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Python 求数组局部最大值的实例
2019/11/26 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
Python实现随机爬山算法
2021/01/29 Python
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
工程造价自荐信
2013/10/09 职场文书
《乞巧》教学反思
2014/02/27 职场文书
规划编制实施方案
2014/03/15 职场文书
小班下学期评语
2014/05/04 职场文书
新闻学专业求职信
2014/07/28 职场文书
机关作风建设整改方案
2014/10/27 职场文书
国王的演讲观后感
2015/06/03 职场文书
辩论赛新闻稿
2015/07/17 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python