连接数组、字符串方法总结

电玩女神 2022-06-06 14:23 231阅读 0赞

## 一、 连接数组 ##

**1、concat()**

concat()可以基于当前数组的所有项创建一个新数组。具体来说，它会创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。  
如果传递给concat()方法的是一或多个数组，则该方法会将这些数组中的每一项添加到结果数组中。如果传递的值不是数组，这些值就会被简单地添加到结果数组末尾。

var  colors=['red','yellow','blue'];
    var colors2=colors.concat('yellow',['black','brown']);
    
    console.log(colors);//["red", "yellow", "blue"]
    console.log(colors2);//["red", "yellow", "blue", "yellow", "black", "brown"]

ps：该方法不会改变现有数组，会创建一个新数组。我们要为新创建的数组分配内存空间，为其赋值，有一点点资源的消耗。

**2、\[\].push.apply**

var arr1= [1,2,3]; 
    arr1.push.apply(arr1,[4,5]);

ps：巧妙的运用了apply方法的特性，这样arr1仍然是arr1，只是内存进行了重写。

## 二、连接字符串 ##

**字符串的特点：**

> ECMAScript中的**字符串是不可变的**，也就是说，字符串一旦创建，他们的值就不能改变。要改变某个变量的保存的的字符串，首先要销毁原来的字符串，然后再用另外一个包含新值的字符串填充该变量，例如：

**1、“+”连接符**

var lang = "Java";
    lang = lang + "Script";

ps：早期浏览器没有对这种运算进行优化。由于字符串是不可变的，这意味着**要创建中间字符串来存储连接的结果**。频繁地在后台创建和销毁字符串导制性能异常低下。  
操作的过程：首先创建一个能容纳10个字符的新字符串，然后在这个字符串中填充“Java”和“Script”,最后一步是销毁原来的字符串“Java”和“Script”,因为这两个字符串已经没用了。但是在低版本的浏览器(如IE6)中，字符串拼接速度是很消耗一个性能的过程。

**2、以数组作为中介，用join()连接数组**

var arr=new Array();
    arr.push(a);
    arr.push(b);
    var str=arr.join("");

ps：在早期的浏览器中，没有创建和销毁中间字符串，在**大量字符串连接情况下**，这技术已被证明远快于使用加法方式。

**3、concat()**

var str1 = new String( "This is string one" );
    var str2 = new String( "This is string two" );
    var str3 = str1.concat( str2 );

ps：  
如今浏览器对字符串的优化已经改变了字符串相连的局面。Safari、Opera、Chrome、Firefox和IE8都在使用加法运算符上表现出了更好的性能。但是，IE8之前的版本没有优化，因此数组方法依然有效。这并不意味着字符串相连时我们要进行浏览器检测。  
**在决定如何连接时要考虑的是字符串的大小和数量。**  
**当字符串相对较小（小于20字符）且连接数量也较小时(小于1000个），所有的浏览器使用加法运算符都能在不到1毫秒内轻松完成连接。**增加字符串数量或大小时，IE7中性能会明显下降。字符串大小增加时，Firefox中加法运算符和数组成技巧性能差异会变小。字符串数量增加时，Safari中加法运算符和数组成技巧性能差异会变小。改变字符串数量或大小时，Chrome和Opera中加法运算符一直保持领先优势。所以，由于在各浏览器下性能不一致，**选用技术取决于实际情况和面对的浏览器。**  
**大多数情况下，加法运算符是首选；如果用户主要使用IE6或7，并且字符串大小较大或数量较多时，那么数组技术就很值得。**

一般情况下，**如果是语义性的字符串，不应该使用Array**，比如：

'Hello, my name is ' + name;

**如果字符串是”相似情况的重复”的话，建议使用Array**，比如：

var array = []; 
    for (i = 0; i < length; i++) { 
    array[i] = '<li>' + list[i] + '</li'>; 
    } 
    document.getElementById('somewhere').innerHTML = array.join('\n');