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——>看到书中例题——>按照自己想法扩展书中的函数——>测试，也是在学习中的兴趣而已。希望高手指正，使我从你的言语中进步！说错的地方，不要骂我哦！ 谢谢！