温故知新——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 Archive Network 集合
May 12 Javascript
select组合框option的捕捉实例代码
Sep 30 Javascript
js checkbox(复选框) 使用集锦
Apr 28 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
JavaScript更改class和id的方法
2008/10/10 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
微信小程序实现吸顶特效
2020/01/08 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
浅谈Python协程
2020/06/17 Python
Python 操作 MySQL数据库
2020/09/18 Python
技术副厂长岗位职责
2013/12/26 职场文书
安全生产月演讲稿
2014/05/09 职场文书
组工干部对照检查材料
2014/08/25 职场文书
手机销售员岗位职责
2015/04/11 职场文书
离婚案件答辩状
2015/05/22 职场文书
高考1977观后感
2015/06/04 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
新学期开学寄语2016
2015/12/04 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
Python中else的三种使用场景
2021/06/16 Python
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技