探讨js字符串数组拼接的性能问题

我们知道，在js中，字符串连接是性能最低的操作之一。
例如：

代码如下:

var text="Hello"; 
text+=" World!";

早期浏览器没有对这种运算进行优化。
由于字符串是不可变的，这意味着要创建中间字符串来存储连接的结果。频繁地在后台创建和销毁字符串导制性能异常低下。

因此，可以利用数组对象进行优化。
例如：

var buffer=[],i=0;
buffer[i++]="Hello";  //通过相应索引值添加元素比push方法快
buffer[i++]=" World!";
var text=buffer.join("");

在早期的浏览器中，没有创建和销毁中间字符串，在大量字符串连接情况下，这技术已被证明远快于使用加法方式。
 
如今浏览器对字符串的优化已经改变了字符串相连的局面。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');

有关js字符串数组连接的性能比较，就介绍到这里了，希望对大家有所帮助。

赞 (0)

相关推荐

  • js求数组中全部数字可拼接出的最大整数示例代码

    前言 最近在工作碰到一个问题,就是用javascript求数组中所有数字能拼接出的最大整数,数组的每一项为单独的拼接项,不能再拆开,例如[2,34]中2和34分别为要被拼接的数字,而不是说34还能继续拆分为3和4. 具体需求为,将[7,321,35,4]拼接为7435321.下面话不多说了,来一起看看详细的实现方法吧. 我设计的算法如下: function insertSort(arr) { let res = [arr[0]]; for (let i = 1, len = arr.length

  • php利用嵌套数组拼接与解析json的方法

    利用嵌套数组   拼接混合json -包含对象数组 <?php // 自 PHP 5.4 起 $array = [ "status" => "0", "message" => "ok", "arr"=> [] ]; class Person { public $name; public $age; //定义一个构造方法初始化赋值 public function __construct

  • 探讨js字符串数组拼接的性能问题

    我们知道,在js中,字符串连接是性能最低的操作之一. 例如: 复制代码 代码如下: var text="Hello";  text+=" World!"; 早期浏览器没有对这种运算进行优化. 由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果.频繁地在后台创建和销毁字符串导制性能异常低下. 因此,可以利用数组对象进行优化. 例如: var buffer=[],i=0; buffer[i++]="Hello"; //通过相应索引值添加元

  • 浅谈JS中的三种字符串连接方式及其性能比较

    工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方法,这里将它们一一列出顺便也对它们的性能做个具体的比较. 第一种方法 用连接符"+"把要连接的字符串连起来: str="a"; str+="b"; 毫无疑问,这种方法是最便捷快速的,如果只连接100个以下的字符串建议用这种方法最方便. 第二种方法 以数组作为中介用 join 连接字符串: var arr=new Array(); arr.push(a);

  • JS往数组中添加项性能分析

    比较了4种可以向数组添加项的方法之间的性能: 使用索引器添加 复制代码 代码如下: console.time("index"); var a = []; for (var i = 0, l = times; i < l; i++) {     a[i] = i; } console.timeEnd("index"); 使用push方法 复制代码 代码如下: console.time("push"); var a = []; for (var

  • js两种拼接字符串的简单方法(必看)

    如下所示: function(msgArr) { var len = msgArr.length; var n = 0 ; var htmlSpan = ""; for (var j = 0; j < len - 1; j++) { htmlSpan += '<span>·</span>'; } htmlSpan += '<span class="on">·</span>'; var imgs = []; var

  • js采用concat和sort将N个数组拼接起来的方法

    js采用concat和sort将N个数组拼接起来的方法

    本文实例分析了js采用concat和sort将N个数组拼接起来的方法.分享给大家供大家参考,具体如下: 这是某个大型企业的面试题扩展得来的,只是一种解法,但是无法确定是否高效,不过效果确实是实现了! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

  • JS中数组实现代码(倒序遍历数组,数组连接字符串)

    Js中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性. 具体代码如下所示: // =================== 求最大值===================================== <script> var arr = [10,35,765,21345,678,89]; var max = arr [0]; for (var i=0;i< arr.length;i++) { if (max<arr[i]){ max = arr [i]; } }

  • JS 清除字符串数组中,重复元素的实现方法

    JS 清除字符串数组中,重复元素的实现方法 <script language="JavaScript"> <!-- var arrData=new Array(); for(var i=0; i<1000; i++) { arrData[arrData.length] = String.fromCharCode(Math.floor(Math.random()*26)+97); } //document.write(arrData+"<br/&g

  • js判断数组是否包含某个字符串变量的实例

    最近碰到一个这样的现象,后台返回的数据中,数组里面有一些有变量值,有一些没有变量值. 举个例子,比如后台返回的例子是这样的: var arr=[ { "status":"success", "activerUserData": [ {"activeUser":"张珊","activeUserMobile":"15542175311","countNum&qu

  • JS实现的字符串数组去重功能小结

    JS实现的字符串数组去重功能小结

    本文实例讲述了JS实现的字符串数组去重功能.分享给大家供大家参考,具体如下: 这里只考虑最简单字符串的数组去重,暂不考虑,对象,函数,NaN等情况,这种用正则实现起来就吃力不讨好了. 非正则实现:ES6实现 <script> let str_arr=["b","c",1,"a", 3,"v", "2","e", "6","g", &qu

  • js字符串类型String常用操作实例总结

    本文实例讲述了js字符串类型String常用操作.分享给大家供大家参考,具体如下: 字符串是不可变的. 对字符串的所有操作都会返回一个新字符串,原字符串不变 在 ie 6-7 时,' abc ' + ' cdf '  如果两个大量的字符串拼接,性能很低,原因是需要开辟新内存 和 创建新变量,导致性能低下,而在ie8 后得到大幅改善. 字符串常用方法 // 创建字符串 var a = new String('123') var a = '123' a.length // => 3, length属

随机推荐