溫故知新——JavaScript中的字符串連接問(wèn)題最全總結(jié)(推薦)
ECMAScript 中最常見(jiàn)的一個(gè)問(wèn)題是字符串連接的性能。與其他語(yǔ)言類似,ECMAScript 的字符串是不可變的,即它們的值不能改變。請(qǐng)考慮下面的代碼:
var str = "hello "; str += "world";
實(shí)際上,這段代碼在幕后執(zhí)行的步驟如下:
1、創(chuàng)建存儲(chǔ) "hello " 的字符串。
2、創(chuàng)建存儲(chǔ) "world" 的字符串。
3、創(chuàng)建存儲(chǔ)連接結(jié)果的字符串。
4、把 str 的當(dāng)前內(nèi)容復(fù)制到結(jié)果中。
5、把 "world" 復(fù)制到結(jié)果中。
6、更新 str,使它指向結(jié)果。
每次完成字符串連接都會(huì)執(zhí)行步驟 2 到 6,使得這種操作非常消耗資源。如果重復(fù)這一過(guò)程幾百次,甚至幾千次,就會(huì)造成性能問(wèn)題。解決方法是用 Array 對(duì)象存儲(chǔ)字符串,然后用 join() 方法(參數(shù)是空字符串)創(chuàng)建最后的字符串。想象用下面的代碼代替前面的代碼:
var arr = new Array(); arr[0] = "hello "; arr[1] = "world"; var str = arr.join("");
這樣,無(wú)論數(shù)組中引入多少字符串都不成問(wèn)題,因?yàn)橹辉谡{(diào)用 join() 方法時(shí)才會(huì)發(fā)生連接操作。此時(shí),執(zhí)行的步驟如下:
1、創(chuàng)建存儲(chǔ)結(jié)果的字符串
2、把每個(gè)字符串復(fù)制到結(jié)果中的合適位置
雖然這種解決方案很好,但還有更好的方法。問(wèn)題是,這段代碼不能確切反映出它的意圖。要使它更容易理解,可以用 StringBuffer 類打包該功能:
function StringBuffer () { this._strings_ = new Array(); } StringBuffer.prototype.append = function(str) { this._strings_.push(str); }; StringBuffer.prototype.toString = function() { return this._strings_.join(""); };
這段代碼首先要注意的是 strings 屬性,本意是私有屬性。它只有兩個(gè)方法,即 append() 和 toString() 方法。append() 方法有一個(gè)參數(shù),它把該參數(shù)附加到字符串?dāng)?shù)組中,toString() 方法調(diào)用數(shù)組的 join 方法,返回真正連接成的字符串。要用 StringBuffer 對(duì)象連接一組字符串,可以用下面的代碼:
var buffer = new StringBuffer (); buffer.append("hello "); buffer.append("world"); var result = buffer.toString();
可用下面的代碼測(cè)試 StringBuffer 對(duì)象和傳統(tǒng)的字符串連接方法的性能:
var d1 = new Date(); var str = ""; for (var i=0; i < 10000; i++) { str += "text"; } var d2 = new Date(); document.write("Concatenation with plus: " + (d2.getTime() - d1.getTime()) + " milliseconds"); var buffer = new StringBuffer(); d1 = new Date(); for (var i=0; i < 10000; i++) { buffer.append("text"); } var result = buffer.toString(); d2 = new Date(); document.write("<br />Concatenation with StringBuffer: " + (d2.getTime() - d1.getTime()) + " milliseconds");
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助~如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持!
相關(guān)文章
使用?Next.js?Cli?快速搭建和運(yùn)行?Web?應(yīng)用
這篇文章主要介紹了使用?Next.js?Cli?快速搭建和運(yùn)行?Web?應(yīng)用,需要的朋友可以參考下2024-04-04JavaScript對(duì)象學(xué)習(xí)經(jīng)驗(yàn)整理
主要包括對(duì)象的創(chuàng)建、對(duì)象屬性的設(shè)置和查詢、對(duì)象方法等等,整理如下,感興趣的朋友可以參考下2013-10-10JavaScript mapreduce工作原理簡(jiǎn)析
MapReduce是一個(gè)編程模型,用于作業(yè)調(diào)度,也是一個(gè)處理和生成超大數(shù)據(jù)集的算法模型的相關(guān)實(shí)現(xiàn),本文將詳細(xì)介紹JavaScript mapreduce工作原理,需要的朋友可以參考下2012-11-11JavaScript中window、doucment、body的解釋
JavaScript中window、doucment、body是什么意思呢,下面為大家做個(gè)介紹,不知道的朋友可以參考下2013-08-08javascript學(xué)習(xí)筆記(二十) 獲得和設(shè)置元素的特性(屬性)
javascript學(xué)習(xí)筆記之獲得和設(shè)置元素的特性(屬性)介紹,學(xué)習(xí)js的朋友可以參考下2012-06-06JavaScript Math.ceil() 函數(shù)使用介紹
Math.ceil(x) -- 返回大于等于數(shù)字參數(shù)的最小整數(shù)(取整函數(shù)),對(duì)數(shù)字進(jìn)行上舍入,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-12-12JavaScript Break 和 Continue區(qū)別教程
JavaScript Break 和 Continue區(qū)別教程...2007-04-04JavaScript arguments 多參傳值函數(shù)
在一個(gè)函數(shù)體內(nèi),標(biāo)識(shí)符arguments引用了arguments對(duì)象的一個(gè)特殊屬性??梢园凑諗?shù)目(而不是名字)獲取傳遞給函數(shù)的參數(shù)值。2010-10-10