当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS 字符串连接[性能比较]

Javascript
用javascript实现的图片马赛克后显示并切换加文字功能
通用的javascript 换行色换列色的小js
滑动门,简洁,新手上路制作篇 (小鸽子系列)
文字模糊特效
javascript实现的又一个不错的滑动导航效果
css实现的图片模糊效果
javascript跟随鼠标x,y坐标移动的字效果
js实现用于建立新的一行且增加的四个文本框为空的且被禁用
XML+XSL 与 HTML 两种方案的结合
javascript生成/解析dom的CDATA类型的字段的代码
IE与FireFox的兼容性问题分析
关于脚本操作文本域的问题
刷新时清空文本框内容的js代码
又一个不错的js浮动广告代码
网页背景渐变效果代码
非常漂亮的让背景如此暗淡(一种弹出提示信息时页面背景色调改变的方法)
[原创]jser必看的破解javascript各种加密的反向思维方法
eval(function(p,a,c,k,e,d)系列解密javascript程序
从sohu弄下来的flash中展示图片的代码
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 406 ::
收藏到网摘: n/a

js字符串连接实现代码。 一、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页,就是我上面的内容,我的测试结果却和它的完全相反,技术的变革还是……?
我觉得是一个教训!深刻的教训!不知道哪看了这篇文章的人会有何感想。