javascript使用Array、join做字符存儲和直接使用+號拼接字符串的執行效率比較

因為最近在學習asp.net,其中也穿插着看點javascript.在學習過程也遇到一些問題和疑惑，就把當時的一些想法和測試結果記錄下。如有不對之處還請各位大俠指正。謝謝！

在學習javascript時看了一本書（還沒有看完）。而《javascript高級編程》這本書中說“使用Array做為StringBuffer，代替字符串拼接的操作。然后使用Array中的join方式處理要比直接進行字符串拼接效率要高。”然后下面就給出了相關例子。

其代碼如下（函數名忘了什么，但是這樣寫的）：

<script type="text/javascript">
function StringBuilder() {
    this.strings = new Array();
}
StringBuilder.prototype.Append = function (str) {
    this.strings.push(str);
};
StringBuilder.prototype.ToString = function () {
    return this.strings.join("");
};
</script>

經過測試代碼的確可用並且感覺用着還不錯，頗有C#中StringBuilder的感覺。但執行速度並未進行測試！

var str = new StringBuilder();
            str.Append("你好");
            str.Append("Hello")
           str.ToString();

由於用着比較好用，就想試着增加點其他功能。讓它像C#中StringBuilder的一樣多好，之后就增加了點方法。由於是新手,很多內容也不知道如何處理，最終以失敗而告終。所添加的方法全部按數組進行操作（插入，移除等），並沒有字符的一些特性（由於沒有達到自己想要的效果，代碼就不貼了）。

      第二天，不甘失敗又重新修改下代碼達到了自己想要的結果。但代碼看上去不倫不類，有點多此幾舉的感覺。執行應該效率應該是不行的。不管執行效率是否如何，由想到實現也是一點進步吧！對《javascript高級編程》提到的函數進行擴展（上面代碼也給出），於是乎出現代碼如下：

/*
* javascript數組模擬C#中的StringBuilder
* QQ:909507090
* http://www.qhjsw.net
*
* Copyright (c) 2012 www.qhjsw.net
*
* Date: 2012-02-10 14:25:16
*
*/
function StringBuilder() {
    this.strings = new Array();
}
StringBuilder.prototype.Append = function (str) {
    this.strings.push(str);
};
StringBuilder.prototype.ToString = function () {
    return this.strings.join("");
};
StringBuilder.prototype.Remove = function (value) {
    if (this.strings.length >= 1) {
        this.strings = this.strings.join("").split("");
        for (var i = 0; i < this.strings.length; i++) {
            if (this.strings[i] == value) {
                for (var j = i; j < (this.strings.length - 1); j++) {
                    this.strings[j] = this.strings[j + 1];
                }
                this.strings.length--;
                this.strings[this.strings.length] = null;
                this.strings.length--;
                break;
            }
        }
    }
    else {
        this.strings.length = 0;
    }
};
StringBuilder.prototype.Insert = function (value, index) {
    if (index < 0) { index = 0; }
    this.strings = this.strings.join("").split("");
    if ((this.strings.length >= 1) && (index <= this.strings.length)) {
        for (var i = this.strings.length; i > index; i--) {
            this.strings[i] = this.strings[i - 1];
        }
        this.strings[index] = value;
        this.strings.length++;
    }
    else {
        this.strings[0] = value;
    }
};
StringBuilder.prototype.Exist = function (value) {
    if (this.strings.length > 1) {
        if (this.strings.join("").indexOf(value) != -1) {
            return true;
        }
    }
    return false;
};
StringBuilder.prototype.Clear = function () {
       this.strings.length = 0;    //感謝“啊蔡” 的建議 ，他的方法的確精簡經典
};
StringBuilder.prototype.Length = function () {
    return this.strings.join("").length;  感謝“啊蔡” 的建議
   };

自己想做的東西出來了，現在卻想測試一下執行效率如何。測試下執行效率是否入書中所說。測試是使用firefox+firebug,測試所用時間使用firebug控制台自帶計時。在要測試代碼前后加入console.time()和console.timeEnd().使用三種方式做測試比較，測試代碼如下：

console.time("直接原始Array");
        var str = new Array();
        for (var i = 0; i < 10000; i++) {
            str.push(i);
        }
        var msg = str.join("");
        console.timeEnd("直接原始Array");
        console.time("使用書中提到的方法");
        var str1 = new StringBuilder();
        for (var i = 0; i < 10000; i++) {
            str1.Append(i);
        }
        str1.ToString();
        console.timeEnd("使用書中提到的方法");
        console.time("使用字符拼接+");
        var str2 = "";
        for (var i = 0; i < 10000; i++) {
            str2=str2+i;
        }

        console.timeEnd("使用字符拼接+");

進行多次測試。其測試代碼內容無太大變化，主要更改循環的長度。測試結果如下表所示：

 

測試名稱	10000次	100000次	1000000次	10000000次
直接原始Array	4ms	38ms	410ms	4419ms
使用書中提到的方法	9ms	86ms	940ms	9625ms
使用字符拼接+	5ms	52ms	629ms	17724ms
測試截圖

有以上測試結果可以很明顯的看出用“直接原始Array和join”的執行效率是最快的，用書中提到到這個函數形式在 <=1000000的時候是最慢的。使用字符串拼接（+）的執行效率並不慢，在某些情況是可以忽略不計的。要說書中說的有誤，也是不對的。書中的確說:“使用Array做為StringBuffer，代替字符串拼接的操作。然后使用Array中的join方式處理要比直接進行字符串拼接效率要高。".而書中給點函數的執行效率卻不佳。很多程序時應該很少可以達到第三個測試點的循環次數！本來還想再加個測試，奈何瀏覽器不給力。測試到此結束！

現在自己感覺自己做了點無用功，做了擴展但以后卻不想用了。1.效率問題的確是一點。2。對自己的擴展不滿意（本想繼續更改，但看到上面執行效率來看就不再做無用功了）

由學習javascript——>看到書中例題——>按照自己想法擴展書中的函數——>測試，也是在學習中的興趣而已。希望高手指正，使我從你的言語中進步！說錯的地方，不要罵我哦！ 謝謝！