JavaScript concat方法和join方法及性能测试

最新推荐文章于 2022-06-20 10:24:15 发布

xx510long

最新推荐文章于 2022-06-20 10:24:15 发布

阅读量1k

点赞数

分类专栏： JQuery&JScript 文章标签： JavaScript prototype VBScript IE Go ViewUI

JQuery&JScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一. concat方法

1. String中的concat方法:
返回字符串值，该值包含了两个或更多个提供的字符串的连接。
string1.concat([string2[, string3[, . . . [, stringN]]]])
参数:
string1 ,必选项。要和所有其他指定的字符串进行连接的 String 对象或文字。
string2,. . ., stringN ,可选项。要连接到 string1 尾部的 String 对象或文字。
说明:
concat 方法的结果等于：result = string1 + string2 + string3 + … + stringN。不论源字符串或结果字符串哪一个中的值改变了都不会影响另一个字符串中的值。如果有不是字符串的参数，在被连接到 string1 之前将先被转换为字符串。
示例:
下面的示例说明了使用字符串时 concat 方法的用法：
function concatDemo()
{
   var str1 = "string1"
   var str2 = "string2";
   var s = str1.concat(str2);
   // 返回连接好的字符串为string1string2.
   return(s);
}

2.Array的concat方法

concat 方法 (Array)
返回一个新数组，这个新数组是由两个或更多数组组合而成的。
array1.concat([item1[, item2[, . . . [, itemN]]]])
参数:
array1,必选项。其他所有数组要进行连接的 Array 对象。
item1,. . ., itemN,可选项。要连接到 array1 末尾的其他项目。
说明:
concat 方法返回一个 Array 对象，其中包含了 array1 和提供的任意其他项目的连接。要加的项目（item1 … itemN）会按照从左到右的顺序添加到数组.
如果某一项为数组，那么添加其内容到 array1 的末尾。如果该项目不是数组，就将其作为单个的数组元素添加到数组的末尾。
但是要注意: concat()方法并不能递归地展开一个元素为数组的数组.
以下为从源数组复制元素到结果数组的说明：

.对于从正被连接到新数组的数组中复制的对象参数，复制后仍然指向相同的对象。不论新数组和源数组中哪一个有改变，都将引起另一个的改变。

.对于连接到新数组的数值或字符串，只复制其值。一个数组中值有改变并不影响另一个数组中的值。

示例:
下面的例子说明了使用数组时 concat 方法的用法:
var a = [1,2,3];
a.concat(4,5); //返回 [1,2,3,4,5]
a.concat([4,5]); //返回 [1,2,3,4,5]
a.concat([4,5],[6,7]); //返回[1,2,3,4,5,6,7]
a.concat(4,[5,[6,7]]); //返回[1,2,3,4,5,6,7]
function ConcatArrayDemo(){
   var a, b, c, d;
   a = new Array(1,2,3);
   b = "JScript";
   c = new Array(42, "VBScript);
   d = a.concat(b, c);
   // 返回数组 [1, 2, 3, "JScript", 42, "VBScript"]
   return(d);
}

二.join 方法
返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔符分隔开来。
arrayObj.join(separator)
参数:
arrayObj,必选项。Array 对象。
separator,必选项。是一个 String 对象，作为最终的 String 对象中对数组元素之间的分隔符。如果省略了这个参数，那么数组元素之间就用一个逗号来分隔。
说明:
如果数组中有元素没有定义或者为 null，将其作为空字符串处理。
示例:
下面的例子说明了 join 方法的用法。
var a = [1, 2, 3];    //用这三个元素创建一个新数组.
var s = a.join();       // s == "1,2,3"
下面的调用指定了一个分隔符,其生成的结果就有些区别:
s = a.join(", ");   // s == "1, 2, 3"
注意逗号后面的空格.

三.性能测试:

对比"+=",concat,join三种操作的性能:

测试代码如下所示:

<script type="text/javascript">
	function aa() {
	var str = "";
  var startTime =  new Date();
  for(var i = 0; i < 200000; i++){
  str += "test"; 
  //str = str.concat("test");
  }
var endTime = new Date();
  alert(endTime.getTime() - startTime.getTime());	
  }
</script>
<body>
<div class="demo" id="demo">
<input class="button" type="button" value="Go" οnclick="aa()"/>
</div>
</body>

对"+="200000次操作进行了测试后的结果(多次测试平均结果)如下：　firefox3.5.8: 53ms IE8: 172ms

对"concat"100000次操作进行了测试后的结果(多次测试平均结果)如下：　firefox3.5.8: 55ms IE8: 266ms

在firefox下，concat的性能与"+="差不多，在IE下，"+="操作效率更高一些．

在firebug1.4.5下进行测试，测试代码如下：测试平均结果：　"＋＝":123ms "concat":320ms

     var str = "";
     var startTime =  new Date();
	for(var i = 0; i < 200000; i++){
	  //str += "test"; 
	  str = str.concat("test");  
	}	
	var endTime = new Date();
        console.log(endTime.getTime() -startTime.getTime());

对join()方法的测试：

测试代码：

<script type="text/javascript">
	function aa() {
	var str = "";
	var startTime =  new Date();
	var array = new Array();
	for(var i = 0; i < 200000; i++){
	     array.push("test");
	}
	str = array.join("");
	var endTime = new Date();
  alert(endTime.getTime() - startTime.getTime());	
  }
	</script>
<body>
<div class="demo" id="demo">
<input class="button" type="button" value="Go" οnclick="aa()"/>
</div>
</body>

对"join"200000次操作进行了测试后的结果(多次测试平均结果)如下：　firefox3.5.8: 67ms IE8: 203ms

在friebug1.4.5 中进行测试：

测试代码：　多次测试结果平均后： 247ms

var str = "";
var startTime =  new Date();
var array = new Array();
for(var i = 0; i < 200000; i++){
     array.push("test");
}
str = array.join("");
var endTime = new Date();
console.log(endTime.getTime() - startTime.getTime());

对在网上流行的javascript写的StringBuffer()对象进行测试：

StringBuffer对象的原码如下：

function StringBuffer() {   
  this._strings = new Array;   
}   
StringBuffer.prototype.append = function (str) {   
  this._strings.push(str);   
};   
StringBuffer.prototype.toString = function () {   
 return this._strings.join("");   
};

这个StringBuffer对象只有两个方法，一个是增加字符串，一个是输出累加的字符串结果，原理就是使用数组暂存累加的字符串内容最后再做字符串的链接操作，这样就把String对象中的累加操作省掉了，所以大家都认为它的性能应该比较高（当然包括我自己在内，我也一直是这么认为的，并且自己写javascript代码时，也用到了这个对象），然而今天我测试了一下发现其实并非如此．

测试代码如下：(多次测试平均结果)如下：　firefox3.5.8: 69ms IE8: 375ms

<script type="text/javascript">
	function StringBuffer() {   
  this._strings = new Array;   
}   
StringBuffer.prototype.append = function (str) {   
  this._strings.push(str);   
};   
StringBuffer.prototype.toString = function () {   
 return this._strings.join("");   
};
	function aa() {
	var str = "";
	var startTime =  new Date();
	var sbf = new StringBuffer();
	for(var i = 0; i < 200000; i++){
	 sbf.append("test");
	}
  str = sbf.toString();
	var endTime = new Date();
  alert(endTime.getTime() - startTime.getTime());	
  }
	</script>
	<body>
<div class="demo" id="demo">
<input class="button" type="button" value="Go" οnclick="aa()"/>
</div>
</body>

在friebug1.4.5 中进行测试：

测试代码：　多次测试结果平均后： 331ms

function StringBuffer() {
	this._strings = new Array;
}
StringBuffer.prototype.append = function(str) {
	this._strings.push(str);
};
StringBuffer.prototype.toString = function() {
	return this._strings.join("");
};
var str = "";
var d = new Date();
console.info("Start Test");
//console.info(d.getSeconds() + " " + d.getMilliseconds());
var sbf = new StringBuffer();
for (var i = 0; i < 200000; i++) {
	sbf.append("test");
}
str = sbf.toString();
var d1 = new Date();
//console.info(d1.getSeconds() + " " + d1.getMilliseconds());
console.info(d1.getTime() - d.getTime());
console.info("End Test");

从我上面的测试可以看出，join方法（网上到处到在说的高性能StringBuffer对象）其实并没有比"+="操作的性能高，甚至也没有比concat方法更高效，不知是我测试有误，还是其他原因．当然我的测试环境也只太单一了，应该在更多的浏览器中进行测试．

xx510long

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript concat方法和join方法及性能测试

一. concat方法1. String中的concat方法:返回字符串值，该值包含了两个或更多个提供的字符串的连接。string1.concat([string2[, string3[, . . . [, stringN]]]])参数:string1 ,必选项。要和所有其他指定的字符串进行连接的 String 对象或文字。string2,. . ., stringN ...
复制链接

扫一扫

专栏目录