JavaScript 字符串连接性能分析与优化方案

+= 运算符的性能陷阱

一、最常用 += 运算符

通常认为这种方式效率最低，原因在于其背后的执行过程。

var str = "hello";

str += "world";

（1）创建存储 "hello" 的字符串对象。

（2）创建存储 "world" 的字符串对象。

（3）创建用于存储连接结果的新字符串对象。

（4）将 str 的当前内容复制到新结果字符串中。

（5）将 "world" 复制到新结果字符串中。

（6）更新 str 变量，使其指向新的结果字符串。

每次执行字符串连接都会重复步骤 2 到 6，这一过程极其消耗资源。若重复执行数百甚至数千次，将引发严重的性能瓶颈。因此，在需要频繁连接字符串的场景中，应尽量避免使用此方法。

 
//按钮调用
function JoinFn() {
var arr = new Array;
arr[0] = "张三";
arr[1] = "李四";
alert(arr.join(""));
} 

其执行步骤如下：

（1）创建存储最终结果的字符串。

（2）将数组中的每个字符串复制到结果字符串的相应位置。

这种方法比第一种方式效率更高。

自定义 StringBuilder 类的实现

JavaScript 中没有类似 C# 的 StringBuilder 类，但我们可以利用上一篇提到的“混合的构造函数/原型方式”自定义一个 StringBuilder 类。

 
//自定义一个StringBuilder类，用来连接字符串
function StringBuilder() {
this._strings = new Array();
} 
StringBuilder.prototype.append = function(str) {
this._strings.push(str);
}; 
StringBuilder.prototype.toString = function() {
return this._strings.join("");
}; 
//按钮调用
function MyConnectClassFn() {
var sb = new StringBuilder();
sb.append("张三");
sb.append("李四");
var strResult = sb.toString();
alert(strResult);
} 

三种方法的性能实测与结论

总结

最后比较以上三种方法，书中指出最后一种速度最快。然而经过实际测试，join() 方法似乎是最快的，而第三种（自定义类）反而最慢。这是否意味着我的自定义 StringBuilder 类存在逻辑问题？