javascript中字符串连接时用Array.join,替换 string += "xx",换来几十倍的速度提升?

1.在你打算讲array中的元素全部拼接成一个字符串的时候,Array#join可以接受一个分割符作为参数,并将分割符加在array的每个元素之间,而且最后一个元素后面不会出现分割符,real for human~

举个例子:

data = [’1′, ‘2′, ‘3′]

s = ‘ ‘

data.each { |x| s << x << ‘ and a ‘ }

s # => “1 and a 2 and a 3 and a”

data.join(’ and a ‘) # => “1 and a 2 and a 3″

我们自己也可以模拟Array#join的效果:

s = “”

data.each_with_index { |x,i| s << x; s << ” and a ” if i < data.length - 1 }

s # => “1 and a 2 and a 3″

2.下面的二个函数compute1()和compute1(),都是将50000个字符串连接起来,

直接用+=连接耗时17547毫秒,

使用Array.join()耗时234毫秒,比前者快了近75倍!

而且使用+=操作的话,随着循环次数的增加,耗用时间是nn倍的上升,循环30000次时近60秒,

而用Array.join循环50000次才是843毫秒。

javascript的string是固定内存的,每次对字符串的修改操作都会导致重新分配内存,速度当然慢了。

c#中的string也是固定分配内存的,所以在做多字符串连接时一定要记得StringBuilder哦.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Untitled Page</title>

</head>

<body>

<input type="button" value="直接连接" onclick="compute1();"/>

开始时间:<input type="text" /> 结束时间:<input type="text" />

耗时:<input type="text" /><br />

<br />

<input type="button" value="StringBuilder" onclick="compute2();"/>开始时间:<input type="text" />结束时间:<input type="text" />

耗时:

<input type="text" />

</body>

</html>

<script language=javascript>

function compute1()

{

var start = new Date();

window.document.all.Text1.value =start.getSeconds() * 1000 + start.getMilliseconds();

str = "";

for( i=0; i<20000; i++)

{

str += "wuchang@guet.edu.cn";

}

var end = new Date();

window.document.all.Text2.value =end.getSeconds() * 1000 + end.getMilliseconds();

window.document.all.Text3.value = Number(window.document.all.Text2.value) -Number(window.document.all.Text1.value);

}

function compute2()

{

var start = new Date();

window.document.all.Text4.value =start.getSeconds() * 1000 + start.getMilliseconds();

str = new StringBuilder();

for( i=0; i<200000; i++)

{

str.Append("wuchang@guet.edu.cn");

}

var end = new Date();

window.document.all.Text5.value =end.getSeconds() * 1000 + end.getMilliseconds();

window.document.all.Text6.value = Number(window.document.all.Text5.value) -Number(window.document.all.Text4.value);

}

function StringBuilder(str)

{

this.tmp = new Array();

}

StringBuilder.prototype.Append= function(value)

{

this.tmp.push(value);

return this;

}

StringBuilder.prototype.Clear = function()

{

tmp.length=1;

}

StringBuilder.prototype.toString = function()

{

return this.tmp.join('');

}

</script>