JavaScript中实现类似StringBuilder的功能

问题：字符串连接操作为何如此缓慢？
我们先来看下面这段代码：

var str = 'abc';

str += 'def';

在这段代码背后系统做了如下工作：
        1.为'abc'分配相应大小的内存区域并存入；
        2.为'def'分配相应大小的内存区域并存入；
        3.为'abcdef'分配相应大小的内存区域，并分别将'abc'及'def'从各自的内存区域复制到新的内存区域。

看出来没有，问题的根源就在于存储字符串的内存区域不能随意的改变大小。这样每次进行字符串连接时，必须首先为结果字符串分配存储区域，然后再将各子串从各自的内存区域复制到新的内存区域，这样的繁复操作无疑会带来严重的性能问题。

基本思路
其实很简单，就是利用Array的push()方法，将字符串中的所有子串放入一个Array中，最后通过join()方法得到最终字符串。

方法1－传统方式（执行时间：172ms）

var str = "";

for (var i = 0; i < 10000; i++)

{

str += "abc";

}

方法2－Array方式（执行时间：62ms）

var str = "";

var arr = new Array();

for (var i = 0; i < 10000; i++)

{

arr.push("abc");

}

str = arr.join('');

可以看出，第二种方法的代码执行效率有了较大提高，仔细分析就会发现，方法2较之方法1，减少了内存分配步骤，因此性能得到了较大提升。
（注：代码执行时间均来自笔者的测试环境，视具体情况可能会有所不同。）

完整代码
1.定义StringBuilder类

//构造函数

function StringBuilder()

{

this._strings = new Array();

}

//append方法定义

StringBuilder.prototype.append = function (str)

{

this._strings.push(str);

}

//toString方法定义

StringBuilder.prototype.toString = function ()

{

return this._strings.join('');

}

2.使用StringBuilder类

var sb = new StringBuilder(); //创建StringBuilder类的实例

sb.append('abc');

sb.append('def');

alert(sb.toString()); //输出'abcdef'

总结
本文通过运用JavaScript中的面向对象功能模拟了.net中的StringBuilder，为了优化字符串连接性能，采用了Array方式进行操作。

转载于:https://www.cnblogs.com/Kenny-Jiang/archive/2007/08/24/868778.html

JavaScript中实现类似StringBuilder的功能相关推荐

sql server 数组_如何在SQL Server中实现类似数组的功能
sql server 数组介绍 (Introduction) I was training some Oracle DBAs in T-SQL and they asked me how to cr ...
.net里面实现javascript中的 escape 和 unescape 功能
javascript 脚本,有个 escape 和 unescape ,在做URL传递等的情况下, 用的比较多到了.NET里面, 在 C# 和 VB.NET 下, 仍然有很多人想使用这种功能, 但是 ...
javascript中几个有意思的功能（目前5项） 1右键无效 2禁止网页复制 3禁止F5刷新 4新发现 5屏蔽js错误
1.右键无效 <script> document.οncοntextmenu=new Function("event.returnValue=false;"); < ...
flutter中实现类似Android OnResume功能
在Android中页面从栈里面回到前台显示有固定的生命周期方法 onReume(),虽然在flutter也有widget生命周期方法,但是功能和onResume()方法相差比较大,并不能监听路由栈 ...
Javascript中的函数重载-最佳做法
用JavaScript伪造函数重载的最佳方法是什么? 我知道不可能像其他语言一样重载Javascript中的函数. 如果我需要两个函数一起使用foo(x)和foo(x,y,z) ,这是最佳/首选方式: ...
javascript中的闭包closure详解
文章目录简介函数中的函数 Closure闭包使用闭包实现private方法闭包的Scope Chain 闭包常见的问题闭包性能的问题总结简介闭包closure是javascript中一 ...
JavaScript 中的函数式编程：函数，组合和柯里化
作者:Fernando Doglio 译者:前端小智来源:medium 移动端阅读:点这里点赞再看,微信搜索 [大迁世界] 关注这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub ht ...
javascript编写_如何在JavaScript中使用解构来编写更简洁，功能更强大的代码
javascript编写 by Ashay Mandwarya ?️?? 由Ashay Mandwarya提供吗? 如何在JavaScript中使用解构来编写更简洁,功能更强大的代码 (How to ...
帮助你更好理解javascript中easing功能的网站 - Easings.net
日期:2012-10-17 来源:GBin1.com 如果你开发过jQuery的动画效果的话,肯定接触过一个jQuery插件:jquery.easing plugin,这个插件可以帮助你生成不同类型 ...

JavaScript中实现类似StringBuilder的功能

JavaScript中实现类似StringBuilder的功能相关推荐

最新文章

热门文章