在w3school 的 ECMAScript 定义类或对象 中举了个例子来说明javascript中字符串连接的性能问题
ECMAScript 中最常见的一个问题是字符串连接的性能。与其他语言类似,ECMAScript 的字符串是不可变的,即它们的值不能改变。请考虑下面的代码:
var str = "hello "; str += "world";
实际上,这段代码在幕后执行的步骤如下:
- 创建存储 "hello " 的字符串。
- 创建存储 "world" 的字符串。
- 创建存储连接结果的字符串。
- 把 str 的当前内容复制到结果中。
- 把 "world" 复制到结果中。
- 更新 str,使它指向结果。
每次完成字符串连接都会执行步骤 2 到 6,使得这种操作非常消耗资源。如果重复这一过程几百次,甚至几千次,就会造成性能问题。解决方法是用 Array 对象存储字符串,然后用 join() 方法(参数是空字符串)创建最后的字符串。想象用下面的代码代替前面的代码:
var arr = new Array(); arr[0] = "hello "; arr[1] = "world"; var str = arr.join("");
这样,无论数组中引入多少字符串都不成问题,因为只在调用 join() 方法时才会发生连接操作。此时,执行的步骤如下:
- 创建存储结果的字符串
- 把每个字符串复制到结果中的合适位置
然后举了一个代码例子,来说明性能。
function StringBuffer () { this._strings_ = new Array(); } StringBuffer.prototype.append = function(str) { this._strings_.push(str); }; StringBuffer.prototype.toString = function() { return this._strings_.join(""); }; var d1 = new Date(); var str = ""; for (var i=0; i < 100000; i++) { str += "text"; } var d2 = new Date(); console.log(d2.getTime() - d1.getTime()); var buffer = new StringBuffer(); d1 = new Date(); for (var i=0; i < 100000; i++) { buffer.append("text"); } var result = buffer.toString(); d2 = new Date(); console.log(d2.getTime() - d1.getTime());
我机器上的结果是
75
125
直接拼接的性能好于使用数组,一个可能的解释是创建对象也要消耗较多的时间。
欢迎评论啊,:-D