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 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
Vue 监听元素前后变化值实例
Jul 29 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 压缩文件夹的类代码
2009/11/05 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
Laravel下生成验证码的类
2017/11/15 PHP
php微信开发之谷歌测距
2018/06/14 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
JavaScript 继承详解(二)
2009/07/13 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
js实现秒表计时器
2019/12/16 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
python批量制作雷达图的实现方法
2016/07/26 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
Python自动化操作实现图例绘制
2020/07/09 Python
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
函数指针的定义是什么
2016/08/14 面试题
介绍一下.net和Java的特点和区别
2012/09/26 面试题
高中毕业自我鉴定范文
2013/10/02 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
音乐教学案例
2014/01/30 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS