JavaScript中字符串连接性能分析

 JavaScript中最常见的一个问题是字符串连接的性能。与其他语言类似，JavaScript的字符串是不可变的，即它们的值不能改变。考虑下面的代码：

var  stra="abc";

stra+="def";

实际上，这段代码在幕后执行的步骤如下：
(1) 创建存储"abc"的字符串。
(2) 创建存储"def"的字符串。
(3) 创建存储连接结果的字符串。
(4) 把str的当前内容复制到结果中。
(5) 把"def"复制到结果中。
(6) 更新stra，使它指向结果。
每次完成字符串连接都会执行步骤2到6，使得这种操作非常消耗资源。如果重复这一过程几百次，甚至几千次，就会造成性能问题。解决方法是用Array对象存储字符串，然后用join()方法（参数是空字符串）创建最后的字符串。想像用下面的代码代替前面的代码：

var arr = new Array();

arr.push("abc");

arr.push("def");

var str = arr.join("");

这样，无论在数组中引入多少字符串都不成问题，因为只在调用join()方法时才会发生连接操作。此时，执行的步骤如下：
(1) 创建存储结果的字符串。
(2) 把每个字符串复制到结果中的合适位置。

 

总结: 如何程序中需要多次进行字符串连接,最好使用Array的join方法.

下面我把这个功能封成一个类

//自定义动态字串连接类，替换字串的+=操作功能
function StringBuilder()
{
    this._element_ =new Array();
}
StringBuilder.prototype.append=function(item)
{
    this._element_.push(item);
}
StringBuilder.prototype.toString=function()
{
    return this._element_.join("");
}
StringBuilder.prototype.join=function(separator)
{
    return this._element_.join(separator);
}
StringBuilder.prototype.length=function()
{
    return this._element_.length;
}