JavaScript 學(xué)習(xí)筆記（七）字符串的連接
更新時(shí)間：2009年12月31日 23:22:30 作者：
javascript 字符串的連接效率問題，需要的朋友可以參考下。
字符串的連接
一、 最常用+=
一直說這種方式的效率是最低的，為什么呢？可以看下這種方式的實(shí)質(zhì)過程。
var str = "hello";
str += "world";
(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ù)這一過程幾百次，甚至幾千次，就會(huì)造成性能問題。所有以后就要摒棄這種用法了，哈哈哈。^_^
二、 join()方法
//按鈕調(diào)用
function JoinFn() {
var arr = new Array;
arr[0] = "張三";
arr[1] = "李四";
alert(arr.join(""));
}
執(zhí)行的步驟如下：
(1) 創(chuàng)建存儲(chǔ)結(jié)果的字符串。
(2) 把每個(gè)字符串復(fù)制到結(jié)果中的合適位置。
這中方法效率比第一種快。
三、 封裝一個(gè)自定義的類
JavaScript中沒有像C#中那樣的StringBuilder類，但是我們可以自定義一個(gè)StringBuilder類，建類的方法就是上一篇提到的“混合的構(gòu)造函數(shù)/原型方式”。
//自定義一個(gè)StringBuilder類，用來連接字符串
function StringBuilder() {
this._strings = new Array();
}
StringBuilder.prototype.append = function(str) {
this._strings.push(str);
};
StringBuilder.prototype.toString = function() {
return this._strings.join("");
};
//按鈕調(diào)用
function MyConnectClassFn() {
var sb = new StringBuilder();
sb.append("張三");
sb.append("李四");
var strResult = sb.toString();
alert(strResult);
}
總結(jié)
最后比較以上這三種方法，書上說最后一種速度最快，但是經(jīng)過我測試，貌似join()是最快的，第三種反而是最慢的，難道我的自定義StringBuilder類有問題？
一、 最常用+=
一直說這種方式的效率是最低的，為什么呢？可以看下這種方式的實(shí)質(zhì)過程。
var str = "hello";
str += "world";
(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ù)這一過程幾百次，甚至幾千次，就會(huì)造成性能問題。所有以后就要摒棄這種用法了，哈哈哈。^_^
二、 join()方法
復(fù)制代碼 代碼如下:
//按鈕調(diào)用
function JoinFn() {
var arr = new Array;
arr[0] = "張三";
arr[1] = "李四";
alert(arr.join(""));
}
執(zhí)行的步驟如下：
(1) 創(chuàng)建存儲(chǔ)結(jié)果的字符串。
(2) 把每個(gè)字符串復(fù)制到結(jié)果中的合適位置。
這中方法效率比第一種快。
三、 封裝一個(gè)自定義的類
JavaScript中沒有像C#中那樣的StringBuilder類，但是我們可以自定義一個(gè)StringBuilder類，建類的方法就是上一篇提到的“混合的構(gòu)造函數(shù)/原型方式”。
復(fù)制代碼 代碼如下:
//自定義一個(gè)StringBuilder類，用來連接字符串
function StringBuilder() {
this._strings = new Array();
}
StringBuilder.prototype.append = function(str) {
this._strings.push(str);
};
StringBuilder.prototype.toString = function() {
return this._strings.join("");
};
//按鈕調(diào)用
function MyConnectClassFn() {
var sb = new StringBuilder();
sb.append("張三");
sb.append("李四");
var strResult = sb.toString();
alert(strResult);
}
總結(jié)
最后比較以上這三種方法，書上說最后一種速度最快，但是經(jīng)過我測試，貌似join()是最快的，第三種反而是最慢的，難道我的自定義StringBuilder類有問題？
相關(guān)文章
javascript實(shí)現(xiàn)用戶點(diǎn)擊數(shù)量統(tǒng)計(jì)
本文主要javascript實(shí)現(xiàn)用戶點(diǎn)擊數(shù)量統(tǒng)計(jì)的方法進(jìn)行詳細(xì)介紹，具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)web留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript+html5 canvas制作的百花齊放效果完整實(shí)例
這篇文章主要介紹了JavaScript+html5 canvas制作的百花齊放效果,結(jié)合完整實(shí)例形式分析了使用html5的canvas技術(shù)動(dòng)態(tài)繪制圖形的技巧,需要的朋友可以參考下2016-01-01
webpack學(xué)習(xí)教程之publicPath路徑問題詳解
這篇文章主要給大家介紹了webpack學(xué)習(xí)教程之publicPath路徑問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
JavaScript中正則表達(dá)式使數(shù)字、中文或指定字符高亮顯示
這篇文章主要介紹了JavaScript中正則表達(dá)式使數(shù)字、中文或指定字符高亮顯示,需要的朋友可以參考下2017-10-10
使用JavaScript實(shí)現(xiàn)在頁面中顯示距離2017年中秋節(jié)的天數(shù)
這篇文章主要介紹了 使用JavaScript實(shí)現(xiàn)在頁面中顯示距離2017年中秋節(jié)的天數(shù)的相關(guān)資料,需要的朋友可以參考下2017-09-09
腳本合并可以有效提升javascript性能，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-02-02
js關(guān)閉瀏覽器時(shí)退出賬號(hào)的處理
某些網(wǎng)站，尤其是涉及錢的網(wǎng)站，現(xiàn)在基本都有一個(gè)機(jī)制是兩小時(shí)后登陸自動(dòng)失效，要重新登陸確認(rèn)身份，那么js關(guān)閉瀏覽器時(shí)退出賬號(hào)如何實(shí)現(xiàn)，感興趣的可以了解一下2021-12-12
JS面向?qū)ο缶幊獭狤S6 中class的繼承用法詳解
這篇文章主要介紹了JS面向?qū)ο缶幊獭狤S6 中class的繼承用法,結(jié)合實(shí)例形式詳細(xì)分析了ES6中class繼承的相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-03-03
JavaScript的null和undefined區(qū)別示例介紹
在Javascript中對(duì)于這種生命后沒有給定初始值的變量，就給他一個(gè)undefined，如果要將一個(gè)標(biāo)識(shí)符聲明稱object類型，但是暫時(shí)不給他實(shí)例，那么就可以將它先初始化為null2014-09-09