`

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

JavaScriptprototypeVBScriptIEGo
阅读更多

一. 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" onclick="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" onclick="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" onclick="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方法更高效，不知是我测试有误，还是其他原因．当然我的测试环境也只太单一了，应该在更多的浏览器中进行测试．

 

 

 

 

0
顶
0
踩
分享到：
| hibernate 一对一(One-to-One)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript 数组操作实用技巧

    1、concat方法 [作用] 将多个数组联合起来，这个方法不会改变现存的数组，它只返回了所结合数组的一份拷贝。 [语法] arrayObj.concat(array1,array2,…) [实例] [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 2...

    JavaScript王者归来part.1 总数2

    　8.2.3.4 concat()方法　 　8.2.3.5 slice()方法　 　8.2.3.6 splice()方法　 　8.2.3.7 toSgring()方法和toLocaleString()方法　 　8.3 哈希表　 　8.3.1 什么是哈希表　 　8.3.2 哈希表的构造　 　8.3.3 实现一个...

    javascript语言参考+教程 CHM

    join 方法; lastIndexOf 方法; lbound 方法; link 方法; localeCompare 方法; log 方法; match 方法; max 方法; min 方法; moveFirst 方法; moveNext 方法; parse 方法; parseFloat 方法; parseInt ...

    微软JavaScript手册

    join 方法 返回一个由数组中的所有元素连接在一起的 String 对象。 Labeled 语句 给语句提供一个标识符。 lastIndex 属性 返回在字符串中找到的最后一个成功匹配的字符位置。 lastIndexOf 方法 返回在 String ...

    JavaScript程序设计课件：Array对象.pptx

    JavaScript程序设计 Array对象 6.4.5 Array对象 1、创建Array对象 Array用于创建数组对象及对数组进行处理操作。 创建Array对象的方式有三种： var arr1 = new Array(); //创建空数组 var arr2 = new Array(4); //...

    javascript文档

    join 方法 返回一个由数组中的所有元素连接在一起的 String 对象。 Labeled 语句 给语句提供一个标识符。 lastIndex 属性 返回在字符串中找到的最后一个成功匹配的字符位置。 lastIndexOf 方法 返回在 String ...

    JAVASCRIPT.doc

    javascript导入方法，变量，运算符，逻辑结构switch,if,for，数据类型，数组定义以及数组相关方法（Array,length,Concat,join,pop,push,reverse,shift,ubshift,sort,splice,valueOf），js计算器的简单实现。

    javascript中数组array及string的方法总结

    concat,join,slice(start,end) 记住这3个是返回新数组，其他的会改变原来的数组 二、Sting的方法总结 不对原始值做改变，都是返回一个新的String或者其他的值。 1、需要记住的是string.match(regexp不带g)与reg

    JavaScript权威指南

    JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...

    JavaScript基础进阶之数组方法总结(推荐)

    2个数组转换为字符串的方法：join（）、toString（） 6个增删数组元素的方法：pop（）、push（）、shift（）、unshift（）、slice（）、splice（） 2个数组排序方法：reverse（）、sort（） 连接数组的方法： 1、...

    JavaScript笔记

    JavaScript：定义行为和动作 (基于对象和事件驱动的客户端脚本语言；也是一种广泛应用于客户端Web开发的脚本语言) 基于对象：网页中的一切元素都是假象！不需要new，即可直接使用 事件驱动：JavaScript的执行都是...

    JavaScript常用数组操作方法,包含ES6方法

    concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本。 var arr1 = [1,2,3]; var arr2 = [4,5]; var arr3 = arr1.concat(arr2); console.log(arr1); //[1, 2, 3] ...

    javascript 学习笔记（八）javascript对象

    1、javascript中的内置对象 javascript中除了本身的内置对象，如以下我们所熟悉的对象： •Array •Date •Math •String •RegExp •…… 各个对象都有自己的属性及方法，比如我们经常使用属性及方法 属性：string...

    javascript数组克隆简单实现方法

    本文实例讲述了javascript数组克隆简单实现方法。分享给大家供大家参考，具体如下： &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;title&gt;新建...

    JavaScript基础知识之方法汇总结

    数组的方法： array.concat 一个数组去连接另一个数组，返回一个合成数组。var arrC=arrA.concat(arrB,’asd’,’sad’,true,1.5); array.join 将数组用指定符号连接为一个字符串，并返回这个字符串。比用+快很多。...

    Javascript对象属性方法汇总

    方法： sort(function):在未指定排序号的情况下,按照元素的字母顺序排列,如果不是字符串类型则转换成字符串,在排序; reverse():颠倒数组中元素的顺序； concat(array1,arrayn):用于将N个数组合并到array1数组中； ...

    JScript内置对象Array中元素的删除方法

    Array对象除了提供了constructor、length和prototype外，还默认提供了13个方法：concat、join、pop、push、reverse、shift、slice、sort、splice、toLocaleString、toString 、unshift和valueOf，可是没有提供...

    JavaScript Array对象详解

    2. 实例方法：介绍 Array 对象的实例方法：concat、every、filter、forEach、indexOf、join、lastIndexOf、map、pop、push、reverse、shift、slice、sort、splice、toString、tounshift等。 3. 静态方法：介绍 Array...

    107个常用javascript语句

    若要指定自定义的分隔符，请使用 Array.join() 方法。 可用性：ActionScript 1.0；Flash Player 5 返回 String - 一个字符串。 示例 下面的示例创建 my_array，并将其转换为字符串。 var my_array:Array = new ...

    ES6转JavaScriptesnext.zip

    console.log(join.apply(null, ['-'].concat($__Array$prototype$slice.call([415, 555, 1212])))); 使用方法： var transpiler = require('es6-module-transpiler'); var Container = transpiler....

Magicbox
Global site tag (gtag.js) - Google Analytics