JavaScript中实现类似StringBuilder的功能

问题：字符串连接操作为何如此缓慢？
我们先来看下面这段代码：

var  str  =  'abc';
str  +=  'def';

在这段代码背后系统做了如下工作：
        1.为'abc'分配相应大小的内存区域并存入；
        2.为'def'分配相应大小的内存区域并存入；
        3.为'abcdef'分配相应大小的内存区域，并分别将'abc'及'def'从各自的内存区域复制到新的内存区域。

        看出来没有，问题的根源就在于存储字符串的内存区域不能随意的改变大小。这样每次进行字符串连接时，必须首先为结果字符串分配存储区域，然后再将各子串从各自的内存区域复制到新的内存区域，这样的繁复操作无疑会带来严重的性能问题。

基本思路
        其实很简单，就是利用Array的push()方法，将字符串中的所有子串放入一个Array中，最后通过join()方法得到最终字符串。

方法1－传统方式（执行时间：172ms）

var  str  =   "" ;
for  ( var  i  =   0 ; i  <   10000 ; i ++ )  {
    str += "abc";
}

方法2－Array方式（执行时间：62ms）

var  str  =   "" ;
var  arr  =   new  Array();
for  ( var  i  =   0 ; i  <   10000 ; i ++ )  {
    arr.push("abc");
}
str  =  arr.join('');

        可以看出，第二种方法的代码执行效率有了较大提高，仔细分析就会发现，方法2较之方法1，减少了内存分配步骤，因此性能得到了较大提升。
（注：代码执行时间均来自笔者的测试环境，视具体情况可能会有所不同。）

完整代码
1.定义StringBuilder类

// 构造函数
function  StringBuilder()  {
    this._strings = new Array();
}

// append方法定义
StringBuilder.prototype.append  =   function  (str)  {
    this._strings.push(str);
}

// toString方法定义
StringBuilder.prototype.toString  =   function  ()  {
    return this._strings.join('');
}

2.使用StringBuilder类

var  sb  =   new  StringBuilder();  // 创建StringBuilder类的实例
sb.append('abc');
sb.append('def');
alert(sb.toString());  // 输出'abcdef'

总结
      本文通过运用JavaScript中的面向对象功能模拟了.net中的StringBuilder，为了优化字符串连接性能，采用了Array方式进行操作。

转载于:https://www.cnblogs.com/Kenny-Jiang/archive/2007/08/24/868778.html