温故知新——JavaScript中的字符串连接问题最全总结(推荐)
ecmascript 中最常见的一个问题是字符串连接的性能。与其他语言类似,ecmascript 的字符串是不可变的,即它们的值不能改变。请考虑下面的代码:
var str = "hello "; str += "world";
实际上,这段代码在幕后执行的步骤如下:
1、创建存储 "hello " 的字符串。
2、创建存储 "world" 的字符串。
3、创建存储连接结果的字符串。
4、把 str 的当前内容复制到结果中。
5、把 "world" 复制到结果中。
6、更新 str,使它指向结果。
每次完成字符串连接都会执行步骤 2 到 6,使得这种操作非常消耗资源。如果重复这一过程几百次,甚至几千次,就会造成性能问题。解决方法是用 array 对象存储字符串,然后用 join() 方法(参数是空字符串)创建最后的字符串。想象用下面的代码代替前面的代码:
var arr = new array(); arr[0] = "hello "; arr[1] = "world"; var str = arr.join("");
这样,无论数组中引入多少字符串都不成问题,因为只在调用 join() 方法时才会发生连接操作。此时,执行的步骤如下:
1、创建存储结果的字符串
2、把每个字符串复制到结果中的合适位置
虽然这种解决方案很好,但还有更好的方法。问题是,这段代码不能确切反映出它的意图。要使它更容易理解,可以用 stringbuffer 类打包该功能:
function stringbuffer () { this._strings_ = new array(); } stringbuffer.prototype.append = function(str) { this._strings_.push(str); }; stringbuffer.prototype.tostring = function() { return this._strings_.join(""); };
这段代码首先要注意的是 strings 属性,本意是私有属性。它只有两个方法,即 append() 和 tostring() 方法。append() 方法有一个参数,它把该参数附加到字符串数组中,tostring() 方法调用数组的 join 方法,返回真正连接成的字符串。要用 stringbuffer 对象连接一组字符串,可以用下面的代码:
var buffer = new stringbuffer (); buffer.append("hello "); buffer.append("world"); var result = buffer.tostring();
可用下面的代码测试 stringbuffer 对象和传统的字符串连接方法的性能:
var d1 = new date(); var str = ""; for (var i=0; i < 10000; i++) { str += "text"; } var d2 = new date(); document.write("concatenation with plus: " + (d2.gettime() - d1.gettime()) + " milliseconds"); var buffer = new stringbuffer(); d1 = new date(); for (var i=0; i < 10000; i++) { buffer.append("text"); } var result = buffer.tostring(); d2 = new date(); document.write("<br />concatenation with stringbuffer: " + (d2.gettime() - d1.gettime()) + " milliseconds");
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对的支持!
上一篇: 简单实现js上传文件功能
下一篇: Vue自定义指令使用方法详解