JS 字符串连接[性能比较]


Posted in Javascript onMay 10, 2009

一、ECMAScript的字符串是不可变的,即它们的值不能改变,因此当你写出下面的代码的时候发生了什么呢?
Js代码

var str = "Hello "; 
str += "world";

执行的步骤如下:
创建存储“Hello“的字符串
创建存储”world“的字符串
创建存储连接结果的字符串
把str的当前内容复制到结果中
把“world”复制到结果中
更新str,使它指向结果
每次完成字符串的连接都会执行步骤2-6,使得这种操作非常消耗资源。想象一下重复这个过程几百次,甚至几千次,那性能如何?
二、那么再看看下面的代码,来解决这种窘况
Js代码
var arr = new Array; 
arr[0] = "Hello "; 
arr[1] = "world"; 
var str = arr.join("");

执行的步骤如下:
创建存储结果的字符串
把每个字符串复制到结果中的适当位置
这样,无论数组要引入多少字符串都不成问题,因为只有在调用join()方法时候才会发生连接操作。
三、觉得操作很复杂?代码不能确切反应它的意图?那么我们用对象的解决方式吧,使它更容易理解,用StringBuffer类来封装该功能:
Js代码
function StringBuffer() { 
this._strs = new Array; 
} 
StringBuffer.prototype.append = function (str) { 
this._strs.push(str); 
}; 
StringBuffer.prototype.toString = function() { 
this._strs.join(""); 
};

好了,感受一下吧,现在如何操作字符串呢?
Js代码
var sb = new StringBuffer(); 
sb.append("Hello "); 
sb.append("world"); 
var result = sb.toString();

四、似乎色香味俱全了,但是吃下去的功效如何?
Js代码
var tStart = new Date(); 
var str = ""; 
for(var i=0;i<10000;i++) 
{ 
str += "text" 
} 
var tEnd = new Date(); 
document.write("原始的方法加号 拼接10000个字符串 花费时间:"+(tEnd.getTime()-tStart.getTime())+"秒"); 
var oSB = new StringBuffer(); 
tStart = new Date(); 
for(var i=0;i<10000;i++) 
{ 
oSB.append("text"); 
} 
var sRst = oSB.toString(); 
tEnd = new Date(); 
document.write("<br/>StringBuffer 拼接10000个字符串 花费时间:"+(tEnd.getTime()-tStart.getTime())+"秒");

可能你已经猜到了,StringBuffer要比+快,到底快多少呢?我的测试结果:
Js代码
FF3.0.10
原始的方法加号 拼接10000个字符串 花费时间:3豪秒
StringBuffer 拼接10000个字符串 花费时间:8豪秒
IE7
原始的方法加号 拼接10000个字符串 花费时间:15豪秒
StringBuffer 拼接10000个字符串 花费时间:16豪秒
IE8
原始的方法加号 拼接10000个字符串 花费时间:15豪秒
StringBuffer 拼接10000个字符串 花费时间:16豪秒
Chrome1.0.154.46
原始的方法加号 拼接10000个字符串 花费时间:1豪秒
StringBuffer 拼接10000个字符串 花费时间:2豪秒
五、怎么回事?
恩?眼睛花了?还是测试结果贴错了?还是……?
一切都没有错!
2006年11月此书出版《JavaScript高级程序设计》在84-85页,就是我上面的内容,我的测试结果却和它的完全相反,技术的变革还是……?
我觉得是一个教训!深刻的教训!不知道哪看了这篇文章的人会有何感想。
Javascript 相关文章推荐
JS的千分位算法实现思路
Jul 31 Javascript
node.js超时timeout详解
Nov 26 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
javascript获取当前ip的代码
May 10 #Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 #Javascript
extjs fckeditor集成代码
May 10 #Javascript
一组JS创建和操作表格的函数集合
May 07 #Javascript
给Function做的OOP扩展
May 07 #Javascript
js arguments.callee的应用代码
May 07 #Javascript
javascript 有用的脚本函数
May 07 #Javascript
You might like
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP分享图片的生成方法
2018/04/25 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
围观tangram js库
2010/12/28 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
几种tab切换详解
2017/02/03 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
python django中8000端口被占用的解决
2019/12/17 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
python 6种方法实现单例模式
2020/12/15 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
售后服务经理岗位职责
2014/02/25 职场文书
保护环境倡议书500字
2014/05/19 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
统计工作个人总结
2015/03/03 职场文书
小学班主任个人总结
2015/03/03 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
Vue+Flask实现图片传输功能
2022/04/01 Vue.js