快捷導(dǎo)航

JS 字符串連接[性能比較]

更新時(shí)間：2009年05月10日 15:22:36 作者：

js字符串連接實(shí)現(xiàn)代碼。

一、ECMAScript的字符串是不可變的，即它們的值不能改變，因此當(dāng)你寫出下面的代碼的時(shí)候發(fā)生了什么呢？
Js代碼

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

執(zhí)行的步驟如下：
創(chuàng)建存儲(chǔ)“Hello“的字符串
創(chuàng)建存儲(chǔ)”world“的字符串
創(chuàng)建存儲(chǔ)連接結(jié)果的字符串
把str的當(dāng)前內(nèi)容復(fù)制到結(jié)果中
把“world”復(fù)制到結(jié)果中
更新str，使它指向結(jié)果
每次完成字符串的連接都會(huì)執(zhí)行步驟2-6，使得這種操作非常消耗資源。想象一下重復(fù)這個(gè)過(guò)程幾百次，甚至幾千次，那性能如何？
二、那么再看看下面的代碼,來(lái)解決這種窘?jīng)r
Js代碼

復(fù)制代碼代碼如下:

var arr = new Array; 
arr[0] = "Hello "; 
arr[1] = "world"; 
var str = arr.join(""); 

執(zhí)行的步驟如下：
創(chuàng)建存儲(chǔ)結(jié)果的字符串
把每個(gè)字符串復(fù)制到結(jié)果中的適當(dāng)位置
這樣，無(wú)論數(shù)組要引入多少字符串都不成問(wèn)題，因?yàn)橹挥性谡{(diào)用join()方法時(shí)候才會(huì)發(fā)生連接操作。
三、覺(jué)得操作很復(fù)雜？代碼不能確切反應(yīng)它的意圖？那么我們用對(duì)象的解決方式吧，使它更容易理解，用StringBuffer類來(lái)封裝該功能：
Js代碼

復(fù)制代碼代碼如下:

function StringBuffer() { 
this._strs = new Array; 
} 
StringBuffer.prototype.append = function (str) { 
this._strs.push(str); 
}; 
StringBuffer.prototype.toString = function() { 
this._strs.join(""); 
}; 

好了，感受一下吧，現(xiàn)在如何操作字符串呢？
Js代碼

復(fù)制代碼代碼如下:

var sb = new StringBuffer(); 
sb.append("Hello "); 
sb.append("world"); 
var result = sb.toString(); 

四、似乎色香味俱全了，但是吃下去的功效如何？
Js代碼

復(fù)制代碼代碼如下:

var tStart = new Date(); 
var str = ""; 
for(var i=0;i<10000;i++) 
{ 
str += "text" 
} 
var tEnd = new Date(); 
document.write("原始的方法加號(hào) 拼接10000個(gè)字符串 花費(fèi)時(shí)間："+(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個(gè)字符串 花費(fèi)時(shí)間："+(tEnd.getTime()-tStart.getTime())+"秒"); 

可能你已經(jīng)猜到了，StringBuffer要比+快，到底快多少呢？我的測(cè)試結(jié)果：
Js代碼
FF3.0.10
原始的方法加號(hào) 拼接10000個(gè)字符串花費(fèi)時(shí)間：3豪秒
StringBuffer 拼接10000個(gè)字符串花費(fèi)時(shí)間：8豪秒
IE7
原始的方法加號(hào) 拼接10000個(gè)字符串花費(fèi)時(shí)間：15豪秒
StringBuffer 拼接10000個(gè)字符串花費(fèi)時(shí)間：16豪秒
IE8
原始的方法加號(hào) 拼接10000個(gè)字符串花費(fèi)時(shí)間：15豪秒
StringBuffer 拼接10000個(gè)字符串花費(fèi)時(shí)間：16豪秒
Chrome1.0.154.46
原始的方法加號(hào) 拼接10000個(gè)字符串花費(fèi)時(shí)間：1豪秒
StringBuffer 拼接10000個(gè)字符串花費(fèi)時(shí)間：2豪秒
五、怎么回事？
恩？眼睛花了？還是測(cè)試結(jié)果貼錯(cuò)了？還是……？
一切都沒(méi)有錯(cuò)！
2006年11月此書(shū)出版《JavaScript高級(jí)程序設(shè)計(jì)》在84-85頁(yè)，就是我上面的內(nèi)容，我的測(cè)試結(jié)果卻和它的完全相反，技術(shù)的變革還是……？
我覺(jué)得是一個(gè)教訓(xùn)！深刻的教訓(xùn)！不知道哪看了這篇文章的人會(huì)有何感想。

您可能感興趣的文章: