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

JavaScript中实现类似StringBuilder的功能var str = 'abc';
JavaScript中实现类似StringBuilder的功能str 
+= 'def';


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

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

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

方法1-传统方式(执行时间:172ms

JavaScript中实现类似StringBuilder的功能var str = "";
}


方法2-Array方式(执行时间:62ms

JavaScript中实现类似StringBuilder的功能var str = "";
JavaScript中实现类似StringBuilder的功能
var arr = new Array();
 arr.join('');


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

完整代码
1.定义StringBuilder类

JavaScript中实现类似StringBuilder的功能//构造函数
}


2.使用StringBuilder类

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

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

相关文章: