一. 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方法更高效，不知是我测试有误，还是其他原因．当然我的测试环境也只太单一了，应该在更多的浏览器中进行测试．
分享到：
相关推荐
JavaScript 常用方法总结 JavaScript 是一种广泛应用于 Web 开发的编程语言，提供了许多实用的方法来操作字符串和数组。下面将对 JavaScript 中常用的字符串和数组方法进行总结。 字符串方法 1. `charAt()`: 返回...
在JavaScript中，可以使用多种方法实现字符串的拼接，其中concat()方法是常用的一种。 concat()方法是JavaScript中的内置字符串方法，它用于将一个或多个字符串连接起来，形成一个新的字符串。这个方法不会改变现有...
在JavaScript中，数组可以使用concat()方法来连接，而字符串则可以利用+运算符或join()方法进行拼接。通过分析这个文件，读者可以加深对JavaScript数组和字符串操作的理解。 总的来说，这篇博客会为初学者提供一个...
JavaScript提供了丰富的数组操作方法，如push、pop、shift、unshift、slice、splice、concat、join、split等。此外，ES6引入了Set和Map，它们提供了更高效的数据存储和检索方式，特别是对唯一元素的处理。 五、事件...
- 数组方法：熟练运用push、pop、shift、unshift、slice、splice、concat、join等数组方法。 - map、filter、reduce等高阶函数：学习如何利用它们进行数据处理。 5. **闭包** - 闭包的概念：理解闭包的形成条件...
数组是有序的数据集合，JavaScript提供了数组方法，如push、pop、shift、unshift、slice、splice、concat、join等，方便操作数组元素。从ES6开始，还引入了新的数组特性，如Set和Map，以及扩展运算符。 字符串是不...
4. **数组与集合方法**：JavaScript中的Array对象提供了很多实用的方法，如push、pop、shift、unshift、splice、slice、concat、join、map、filter、reduce等，这些在处理数据时非常常用。 5. **事件处理**：...
5. **数组方法**：如`push`, `pop`, `shift`, `unshift`, `slice`, `splice`, `concat`, `join`, `map`, `filter`, `reduce`等，这些方法大大增强了处理数组的能力。 6. **事件与DOM操作**：JavaScript可以监听和...
JavaScript中的数组操作方法是编程中不可或缺的部分，它们提供了丰富的功能，帮助我们高效地处理和操作数据。以下是对标题和描述中提到的一些JavaScript数组操作方法的详细说明： 1. **concat()**： `concat()` ...
JavaScript提供了丰富的数组方法，如push、pop、shift、unshift、slice、splice、concat、join、map、filter、reduce等，用于操作和处理数组。 6. **事件和DOM操作** 在网页中，JavaScript通过事件监听和处理与...
10. **字符串函数**：JavaScript中的字符串是不可变的，但提供了大量处理字符串的方法，如substring、indexOf、trim、concat、split、join等，以及模板字符串（ES6引入）和字符串的replace方法支持正则表达式，提高...
从给定的文件信息来看，虽然标题和描述都是重复的"JavaScript JavaScript JavaScript"，但这实际上是在强调JavaScript这一主题。在IT行业中，JavaScript是一种广泛使用的、功能丰富的编程语言，尤其在前端开发领域...
JavaScript是一种广泛应用于网页和网络应用的编程语言，它在客户端浏览器上运行，为用户提供动态、交互式的用户体验。JavaScript方法是JavaScript...不断学习和掌握JavaScript方法，能让你在前端开发中更加得心应手。
JavaScript 5还包含了数组的方法，如push、pop、shift、unshift、slice、splice、concat、join、indexOf、lastIndexOf等，以及Map和Set这两种新的数据结构，它们在处理键值对和集合操作时非常有用。此外，还有Array....
5. 数组方法：JavaScript数组拥有很多实用的方法，如push、pop、shift、unshift、splice、slice、concat、join、indexOf、lastIndexOf、forEach、map、filter、reduce等，用于操作和处理数组元素。 6. 字符串方法：...
3. **数组方法**：包括push、pop、shift、unshift、slice、splice、concat、join、indexOf、lastIndexOf、forEach、map、filter、reduce等，这些方法极大地增强了对数组数据的操作能力。 4. **DOM操作**：...
JavaScript的数组对象提供了许多内置方法，如`push`, `pop`, `shift`, `unshift`, `slice`, `concat`, `join`, `forEach`, `map`, `filter`, `reduce`, `find`, `findIndex`等，这些方法在处理数组数据时非常实用。...
### JavaScript对象方法实例集锦 #### 一、JavaScript数组API详解 数组是JavaScript中最基本的数据结构之一，提供了丰富的内置方法来帮助我们操作数组。以下是一些常用的数组方法及其使用示例： 1. **定义数组** ...
本文将详细介绍JavaScript中常用的数组操作方法，帮助您更好地理解和应用这些方法。 #### 二、concat() `concat()` 方法用于连接两个或多个数组，生成一个新的数组，而不会改变原有的数组。这对于动态创建数组非常...
文档"Javascript数组操作整理.doc"可能包含了对数组常见操作的详细总结，如遍历方法（`for`循环、`forEach`、`map`等）、查找方法（`indexOf`、`find`、`filter`等）、排序方法（`sort`）、转换方法（`concat`、`...