温故知新——JavaScript中的字符串连接问题最全总结(推荐)


Posted in Javascript onAugust 21, 2017

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");

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

Javascript 相关文章推荐
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
浅析Vue 生命周期
Jun 21 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
TypeScript 内置高级类型编程示例
Sep 23 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 #Javascript
Node.js简单入门前传
Aug 21 #Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 #Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 #Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 #jQuery
详解webpack的配置文件entry与output
Aug 21 #Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 #jQuery
You might like
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
PHP新手上路(九)
2006/10/09 PHP
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
jQuery功能函数详解
2015/02/01 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python 专题四 文件基础知识
2017/03/20 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
python列表使用实现名字管理系统
2019/01/30 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
交通事故调解协议书
2014/04/16 职场文书
2014年工人工作总结
2014/11/25 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
500字小学生检讨书
2015/02/19 职场文书
python实现简单倒计时功能
2021/04/21 Python
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js