你必须知道的JavaScript 中字符串连接的性能的一些问题_基础知识

而JavaScript的核心是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 对象和传统的字符串连接方法的性能,在chrome控制台输入一下代码并运行:

复制代码 代码如下:

var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
    str += "text";
}
var d2 = new Date();

console.log("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();

console.log("Concatenation with StringBuffer: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");

这段代码对字符串连接进行两个测试,第一个使用加号,第二个使用 StringBuffer 类。每个操作都连接 10000 个字符串。日期值 d1 和 d2 用于判断完成操作需要的时间。请注意,创建 Date 对象时,如果没有参数,赋予对象的是当前的日期和时间。要计算连接操作历经多少时间,把日期的毫秒表示(用 getTime() 方法的返回值)相减即可。这是衡量 JavaScript 性能的常见方法。该测试的结果可以帮助您比较使用 StringBuffer 类与使用加号的效率差异。

上例运行结果如下:


那么有人也许会说JavaScript的String对象中不是也封装一个concat()方法么,我们在下面也来用concat()方法来做同样的事情,在consoel输入以下代码:

复制代码 代码如下:

var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
    str.concat("text");
}
var d2 = new Date();

console.log("Concatenation with plus: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");

我们可以看到做10000次字符窜连接它的耗时是:

由此可以得出结论,当涉及到一定数量的字符串连接时,我们在Javascript中封装一个类似Java中的StringBuffer对象(函数)来进行操作会在性能上得到提升。

时间: 2024-11-02 04:31:22

你必须知道的JavaScript 中字符串连接的性能的一些问题_基础知识的相关文章

JavaScript中Array 对象相关的几个方法_基础知识

push 方法将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1 [item2 [. . . [itemN ]]]]) 参数arrayObj 必选项.一个 Array 对象. item, item2,. . . itemN 可选项.该 Array 的新元素. 说明push 方法将以新元素出现的顺序添加这些元素.如果参数之一为数组,那么该数组将作为单个元素添加到数组中.如果要合并两个或多个数组中的元素,请使用 concat 方法. 示例 <script ty

javascript中对Date类型的常用操作小结_基础知识

javascript中对Date类型的常用操作小结 /** 3. * 日期时间脚本库方法列表: 4. * (1)Date.isValiDate:日期合法性验证 5. * (2)Date.isValiTime:时间合法性验证 6. * (3)Date.isValiDateTime:日期和时间合法性验证 7. * (4)Date.prototype.isLeapYear:判断是否闰年 8. * (5)Date.prototype.format:日期格式化 9. * (6)Date.stringToD

探讨JavaScript中的Rest参数和参数默认值_基础知识

Rest 参数 通常,我们需要创建一个可变参数的函数,可变参数是指函数可以接受任意数量的参数.例如,String.prototype.concat 可以接受任何数量的字符串作为参数.使用 Rest 参数,ES6 为我们提供一种新的方式来创建可变参数的函数. 我们来实现一个示例函数 containsAll,用于检查一个字符串中是否包含某些子字符串.例如,containsAll("banana", "b", "nan") 将返回true,contai

javascript中call apply 与 bind方法详解_基础知识

在JavaScript中,call.apply和bind是Function对象自带的三个方法,本文将通过几个场景的应用,来详细理解三个方法. call() call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. 当调用一个函数时,可以赋值一个不同的 this 对象.this 引用当前对象,即 call 方法的第一个参数. 通过 call 方法,你可以在一个对象上借用另一个对象上的方法,比如Object.prototype.toString.call([]),

Javascript中Date类型和Math类型详解_基础知识

Date类型 ECMASCript中的Date类型是在早期中Java中的java.util.Date类基础上构建的.为此Date类型使用自UTC(国际协调时间)1970年1月1日午夜(0时)开始经过的毫秒数来保存日期. 创建日期对象 1.创建当前日期.不需要传入参数 2.创建指定日期.需要传入参数,必须传入表示该日期的毫秒数(即从1970年1月1日午夜起至该日期止经过的毫秒数).为了简化这一计算过程,ECMAScript提供了两个方法:Date.parse()和Date.UTC(). var n

Javascript中eval函数的使用方法与示例_基础知识

定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句. 返回值 通过计算 string 得到的值(如果有的话). 说明 该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回.因此请不要为 eval() 函数传递 String 对象来作为参数. 如果试图覆盖 eval

Javascript中的几种继承方式对比分析_基础知识

开篇从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究过javascript的继承方式,故特撰此文以供交流. 为何需要利用javascript实现继

详解JavaScript中|单竖杠运算符的使用方法_基础知识

js运算符单竖杠"|"的作用 在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注: 1. Math.ceil()用作向上取整. 2. Math.floor()用作向下取整. 3. Math.round() 我们数学中常用到的四舍五入取整. console.log(0.6|0)//0 console.log(1.1|0)//1 console.log(3.65555|0)//3 console.

javascript中有趣的反柯里化深入分析_基础知识

写在前面的话:国内对前端的研究在某些方面也不逊色于国外,这篇文章虽然看不太懂,但我很欣赏这种深入研究的精神! 反科里化的话题来自javascript之父Brendan Eich去年的一段twitter. 近几天研究了一下,觉得这个东东非常有意思,分享一下.先忘记它的名字,看下它能做什么. 不要小看这个功能,试想下,我们在写一个库的时候,时常会写这样的代码,拿webQQ的Jx库举例. 我们想要的,其实只是借用Array原型链上的一些函数.并没有必要去显式的构造一个新的函数来改变它们的参数并且重新运