Javascript中的字符串链接和Array.join()方法时间效率对比

最新推荐文章于 2023-04-17 15:41:42 发布
最新推荐文章于 2023-04-17 15:41:42 发布
阅读量430 收藏
点赞数
文章标签： javascript java 测试 ViewUI
原文链接：https://yq.aliyun.com/articles/412936
版权

深刻感觉写程序就是在按照一定的规则在拼接字符串。

Java和JavaScript中的String具有不可变性(immutable)，同时正是这样的不可变性成为Java的线程安全和安全机制的基石。

Java和JavaScript对象都提供了丰富的方法，这里主要对比关于字符串链接的时间效率，比如：String str="abc"; str+="def"

关于Java的String连接性能讨论参见这篇博客：

http://www.blogjava.net/javagrass/archive/2010/01/24/310650.html

Javascript的String对象提供了丰富的方法，但是由于String的不可变性，字符串发生改变的时候都会重新创建一个新的对象，使用“+”连接符来改变字符串同样是创建了新的字符串。


Array.join('')这个方法可以将数组中的对象转换为字符串。

下面通过自定义对象来实现JavaScript中的类似Java的StringBuffer对象。

实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/**
  * StringBuffer对象
  */
function  StringBuffer() {
     this ._stringbuffer_ =  new  Array();
     /**
      * 获取长度
      */
     if  ( typeof  StringBuffer.size ==  'undefined' ) {
         StringBuffer.prototype.size =  function () {
             return  this .toString().length;
         };
     }
}
StringBuffer.prototype =  new  Object();
/**
  * 转换为字符串
  */
StringBuffer.prototype.toString =  function () {
     return  this ._stringbuffer_.join( '' );
};
/**
  * 追加字符串
  *
  * @param s
  * @returns
  */
StringBuffer.prototype.append =  function (s) {
     if  ( typeof  (s) ==  'string' ) {
         this ._stringbuffer_.push(s);
     }  else  if  ( typeof  (s) ==  'number' ) {
         this ._stringbuffer_.push(s.toString(10));
     }  else  if  ( typeof  (s) ==  'boolean' ) {
         this ._stringbuffer_.push(s.toString());
     }  else  {
         ;
     }
     return  this .toString();
};
/**
  * 获取指定位置的字符
  *
  * @param i
  * @returns
  */
StringBuffer.prototype.charAt =  function (i) {
     var  sb =  this .toString();
     if  (i < 0 || i >=  this .size()) {
         return  "" ;
     }  else  {
         return  sb.charAt(i);
     }
};

下面是对StringBuffer对象拼接字符串和“+”运算符拼接字符串的时间效率进行对比。

对比图一：

143310551.png


图标说明：

  • String：指的是通过“+”运算符连接字符串

  • StringBuffer：指通过StringBuffer的append()方法连接字符串

  • 图表的纵轴：指运算的时间，单位毫秒

  • 图片的横轴：指连接字符串操作的次数

说明：上述链接的字符串都是单字符，精确度很低，仅仅作为时间效率的参考。

看到上面的图，不要惊讶，是不是和想像中的结果大相径庭，没错，这个结果的测试有问题的，相信自己，StringBuffer和"+"运算符连接字符串效率怎么会差距这么大呢？

下面是计算StringBuffer的时间：


1
2
3
4
5
6
7
start =  new  Date().getTime();
for  (  var  j = 0; j < range[i]; j++) {
     sb.append(j);
}
sb.toString();
end =  new  Date().getTime();
sbTimes.push(end - start);


这样的计算机时间是有问题的，将字符串追加的时间也计算到时间效率中去了。

下面是修正后的时间效率对比的例子：


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
< html >
< head >
< meta  charset = "UTF-8" >
< title >Insert title here</ title >
< script  type = "text/javascript"  src = "../js/jiUtil.js" ></ script >
< script  type = "text/javascript"  src = "../js/FusionCharts.js" ></ script >
< script  type = "text/javascript" >
     function calc() {
         var ups=new Array(1000,2000,3000);
         for ( var i = 0; i <  ups.length ; i++) {
             draw(ups[i], "graphicDiv"+i);
         }
     }
     function draw(up, name) {
         //测试自定义StringBuffer和字符串拼接的效率
         var  sbTimes  =  new  Array();
         var  stTimes  =  new  Array();
         var  range  =  new  Array();
         for ( var  i  =  0 ; i < 20; i++) {
             range[i] = 10000 +i* up;
         }
         for ( var  i  =  0 ; i < range.length; i++) {
             StringBuffer
             sb  =  new  StringBuffer();
             var  start  =  new  Date().getTime();
             var  st  =  "" ;
             for ( var  j  =  0 ; j < range[i]; j++) {
                 st += j;
             }
             var  end  =  new  Date().getTime();
             stTimes.push(end - start);
             for ( var  j  =  0 ; j < range[i]; j++) {
                 sb.append(j);
             }
             start  =  new  Date().getTime();
             sb.toString();
             end  =  new  Date().getTime();
             sbTimes.push(end - start);
             sb  =  null ;
         }
         StringBuffer
         xml  =  new  StringBuffer();
         xml
                 .append('<graph  caption = " string vs join() on speed"  subcaption = "For the month of Oct 2013"  divlinecolor = "F47E00"  numdivlines = "4"  showAreaBorder = "1"  areaBorderColor = "000000"   showNames = "1"  numVDivLines = "29"  vDivLineAlpha = "30"  formatNumberScale = "1"  rotateNames = "1" >');
         xml.append('< categories   numberSuffix = "ms" >');
         for ( var i = 0; i <  range.length ; i++) {
             xml.append('<category  name = "'+range[i]+'"  /> ');
         }
         xml.append('</ categories >');
         xml
                 .append('< dataset  seriesname = "String"  color = "FF5904"  showValues = "0"  areaAlpha = "50"  showAreaBorder = "1"  areaBorderThickness = "2"  areaBorderColor = "FF0000" >');
         for ( var i = 0; i <  stTimes.length ; i++) {
             xml.append('<set  value = "'+stTimes[i]+'"  />');
         }
         xml.append('</ dataset >');
         xml
                 .append('< dataset  seriesname = "StringBuffer"  color = "99cc99"  showValues = "0"  areaAlpha = "50"  showAreaBorder = "1"  areaBorderThickness = "2"  areaBorderColor = "006600" >');
         for ( var i = 0; i <  sbTimes.length ; i++) {
             xml.append('<set  value = "'+sbTimes[i]+'"  />');
         }
         xml.append('</ dataset >');
         xml.append('</ graph >');
         var dataXml = xml.toString();
         var fcf = new FusionCharts("FCF_MSArea2D.swf", "t_msa2d_" + up, 960,
                 680);
         fcf.setDataXML(dataXml);
         fcf.render(name);
     }
</ script >
</ head >
< body      <div  id = "graphicDiv0"  align = "center" ></ div >
     < div  id = "graphicDiv1"  align = "center" ></ div >
     < div  id = "graphicDiv2"  align = "center" ></ div >
</ body >
</ html >

StringBuffer的append()实现使用了数组对象的push()方法,而数组的join()方法才是正真将数组中的字符串对象连接一起成为字符串，join()方法所花费的时间和“+”连接的时间在连接次数不够大的情况下相差并不是特别显著，相反还增加了append()这一操作。

如果站在空间复杂度看待这个问题，由于String的不可变性又会使得内存开销很大，产生较多的垃圾内存需要垃圾回收机制去处理。

对于浏览器和用户来讲，时间效率显得更重要些，用户交互需要更流畅，而不是去等待。

下面三张上述示例测试的结果图：


150719863.png

150719335.png

150719859.png

从上面看，StringBuffer完成的时间随链接数量变化不是特别大，而“+”连接在连接数量达到2万5千的时候开始网上飙升。

测试的影响因素：

本机的内存，浏览器JS引擎，其他操作对其部分运算的干扰（运算过程中进行其他事情占用计算机资源）。


总结：

1.实际工作做中几乎碰不到这样大的字符串连接；

2.“+”运算符连接字符串方便便捷，因为1，所以也不会产生太多的内存垃圾；

3.抛开数组中的元素添加，Array.join()方法连接字符串显然比“+”连接字符时间效率高很多；

4.实际工作用字符串连接也是有数据来源的，不可能无缘无故的拼接一些字符串，如上面的测试用例，就是要使用到一些数据，因而采用了append(）方法；

5.“+"连接字符串过程中产生的是匿名的字符串，二次使用较为困难，而使用append()方法连接字符串，由于其内部是使用Array进行存储的因此操作方便，而且便于修改，直接解决了String的不可变性带来的不便，同事内存空间是使用率很高。

6.使用StringBuffer去操作字符串比"+"连接字符串的代码可读性好，出错肯能性小，面向对象的意思更浓。

综上种种：使用StringBuffer对象的append()方法来拼接字符串更有利些。



本文转自 secondriver 51CTO博客，原文链接：http://blog.51cto.com/aiilive/1304174，如需转载请自行联系原作者

WWWWWWWWolf
关注
一、JavaScript 时间复杂度
安浅的博客
08-09 492
一、时间复杂度 时间复杂度： 一个函数，用大O表示，比如O(1)、O(N)、O(logN)…… 定性 描述该算法的运行时间 下列图着重看谁大谁小： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4uAfjK7d-1628512161129)(/home/hi/.config/Typora/typora-user-images/image-20210809195341339.png)] 例: **时间复杂度为： ** 1、O(1): 执行一次 let i =
JS拼接字符串的效率
远行的博客
03-18 4474
JS拼接字符串的方式， 1、最常见的是+=； 2、还可以先将字符串转化为数组，然后调用Join实现字符串拼接 arr.push(str); return arr.join(""); 效率分为运行速度和内存消耗问题，网上查了相关资料，结论就是join在字符串字节很大时（百万级以上），用join会明显快于用+=实现的字符串拼接（），用+=耗时大概时10秒，用join大概是几百毫秒，当字节数很...
JS效率问题之 str+ ;array.join && arr[i]
lulalahappy123的专栏
08-21 731
请把以下用于连接字符串的JavaScript代码修改为更有效率的方式 1 2 3 4 5 6 7 8 var htmlString =     "<div class=”container”>" + "<ul id=”news-list”>"; for (var
js 关于 累加 和 变成数组 join的效率
x6587305x的专栏
09-07 1787
今天在一本书上面 看见一点内容 主要讲的 是 var x="test1"; x+="test2"; 这样的语句 的执行过程是： 1.创建存储的“test1”的字符串 2.创建存储的“test2”的字符串 3.创建存储链接结果的字符串 4.把x的当前内容复制到结果中 5.把“world”复制到结果中。 6.更新str，使她指向结果。 每次完成链接都要做很多操作 浪费性能。 所有这
Javascript中字符串相加和Array.join的性能对比
kacakong
05-04 232
  网上的文章，有的说字符串相加快，有的说用Array.join做一个模拟的StringBuffer快，还是实际写个实例试试把   function CompareTime(){ var d1=new Date(); var str=""; var i; for(i=0;i&lt;1000000;i++) { str+="t...
使用JavaScript实现node.js中的path.join方法
10-18
在JavaScript中，`path.join`方法是Node.js的内置模块`path`提供的功能，用于将多个路径片段合并成一个单一的、规范化的路径。在Node.js环境中，这个方法非常实用，因为它可以处理Windows和Unix风格的路径，并确保...
javascript中数组（Array)对象和字符串（String)对象的常用方法总结
10-20
在JavaScript中，数组和字符串是两种基本的数据类型，它们各自具有一系列的方法来执行各种操作。正确理解和掌握这些方法对于编写高效和优雅的代码至关重要。 首先，让我们来看看字符串（String）对象的方法。 1. ...
JavaScript字符串String和Array操作的有趣方法
10-27
JavaScript中的字符串(String)和数组(Array)是编程中最基础的数据结构，它们在处理数据时起着至关重要的作用。在JavaScript中，这两个类型被视为基本类型，但同时也具有对象的一些特性，提供了丰富的内置方法，使得...
详解JavaScript数组和字符串中去除重复值的方法
10-22
在JavaScript中，数组和字符串去重是一个常见的操作，尤其在处理数据时，我们经常需要去除数组或字符串中的重复元素，以避免数据冗余或者在逻辑上保持唯一性。针对这一需求，JavaScript提供了一些内置的方法和技巧来...
join方法 js 单字符串会报错_Javascript中的字符串链接和Array.join()方法时间效率对比...
weixin_35317737的博客
12-30 110
深刻感觉写程序就是在按照一定的规则在拼接字符串。Java和JavaScript中的String具有不可变性(immutable)，同时正是这样的不可变性成为Java的线程安全和安全机制的基石。Java和JavaScript对象都提供了丰富的方法，这里主要对比关于字符串链接的时间效率，比如：String str="abc"; str+="def"关于Java的String连接性能讨论参见这篇博客：J...
join方法 js 单字符串会报错_JavaScript性能优化小知识总结(转)
weixin_39832875的博客
12-21 254
JavaScript的性能问题不容小觑，这就需要我们开发人员在编写JavaScript程序时多注意一些细节，本文非常详细的介绍了一下前言一直在学习javascript，也有看过《犀利开发Jquery内核详解与实践》，对这本书的评价只有两个字犀利，可能是对javascript理解的还不够透彻异或是自己太笨，更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解。鉴于想让自己有一个提升...
js数组API的时间复杂度大全
weixin_49035434的博客
04-17 2264
为了避免最坏情况，可以使用一些优化措施，例如在排序前随机打乱数组的顺序，或者使用基于归并排序（mergesort）或堆排序（heapsort）的算法，这些算法的时间复杂度为稳定的 O(n log n)。迭代器对象会按顺序遍历数组中的每一项，并返回一个包含键（索引）和值的键值对，每次迭代都只需要访问数组中的一个元素，因此时间复杂度为 O(1)。因此，时间复杂度为 O(n)。，其中 n 是数组的长度，但是最坏情况下的时间复杂度为 O(n^2)，如果数组本身已经有序（升序或降序），则可能会产生最坏情况，导致。
各种数据结构的时间复杂度分析
热门推荐
chao2016的博客
09-05 3万+
对于同一个数据结构来说，底层实现的不同往往会呈现出不同的时间复杂度。以数组为例： . 普通数组实现 顺序数组实现 二分搜索树（平衡） 插入 O(1) O(n) O(logn) 查找 O(n) O(logn) O(logn) 删除 O(n) O(n) O(logn) 1. 动态数组 对于一个基于Jav...
sql join 算法 时间复杂度
stevewong的专栏
08-26 8203
参考stackoverflow笔记sql语句如下：SELECT T1.name, T2.date FROM T1, T2 WHERE T1.id=T2.id AND T1.color='red' AND T2.type='CAR'假设T1有m行，T2有n行，那么，普通情况下，应该要遍历T1的每一行的id（m），然后在遍历T2（n）中找出T2.id = T1
js array 转字符串 和 字符串拼接哪种效率高
-霄-的博客
03-17 387
每次进行字符串拼接时，JavaScript 都需要创建一个新的字符串，并将原始字符串和要添加的内容都复制到新的字符串中，这样的过程会占用大量的内存和处理时间，尤其是对于大型数组和循环操作。但是需要注意的是，对于小型数组和简单操作，差异可能不明显，而且在某些情况下，字符串拼接可能会更方便和直观，因此应该根据具体的需求和情况选择最适合的方法。相比之下，join() 方法只需要遍历一次数组，将数组元素插入到已有的字符串中，并且不会创建任何新的字符串，因此它的效率通常更高。
前端性能优化：使用Array.prototype.join代替字符串连接
GBin1.com
07-03 684
日期：2013-7-3  来源：GBin1.com 有一种非常简单的客户端优化方式，就是用Array.prototype.join代替原有的基本的字符连接的写法。在这个系列的第一篇中，我在代码中使用了基本字符连接： htmlStr += '' + item.text + ''; 但是下面这段代码中，我用了优化： var items = []; ajaxResult.items.
除了JavaScript 中的 .join() 方法将数组转换为字符串还有其他方法吗
最新发布
09-04
### 回答1： 是的，除了使用 JavaScript 中的 .join() 方法，还可以使用以下方法将数组转换为字符串： 1. 使用 toString() 方法： ``` let arr = [1, 2, 3]; let str = arr.toString(); console.log(str); // 输出 "1,2,3" ``` 2. 使用 Array.prototype.join() 方法： ``` let arr = [1, 2, 3]; let str = arr.join(); console.log(str); // 输出 "1,2,3" ``` 3. 使用 + 运算符： ``` let arr = [1, 2, 3]; let str = arr[0] + ',' + arr[1] + ',' + arr[2]; console.log(str); // 输出 "1,2,3" ``` 4. 使用模板字符串： ``` let arr = [1, 2, 3]; let str = `${arr[0]},${arr[1]},${arr[2]}`; console.log(str); // 输出 "1,2,3" ``` ### 回答2： 除了JavaScript中的.join()方法，还有其他方法将数组转换为字符串。 1. toString()方法：将数组转换为由数组元素组成的字符串。例如：[1, 2, 3].toString() 将返回 "1,2,3"。 2. concat()方法：将数组的所有元素连接起来，并返回一个新的字符串。该方法不会改变原数组。例如：[1, 2, 3].concat().join('') 将返回 "123"。 3. reduce()方法：使用指定的回调函数对数组元素进行累加器操作，将数组转换为一个值。然后可以使用字符串拼接操作将该值转换为字符串。例如：[1, 2, 3].reduce((accumulator, currentValue) => accumulator + currentValue, '').toString() 将返回 "6"。 4. map()方法和join()方法的组合：使用map()方法将数组的每个元素转为字符串，并返回一个新的数组。然后使用.join()方法将新数组转换为字符串。例如：[1, 2, 3].map(String).join('') 将返回 "123"。 这些方法都可以将数组转换为字符串，可以根据不同的需求选择合适的方法来使用。 ### 回答3： 除了JavaScript中的.join()方法将数组转换为字符串，还有以下几种方法： 1. toString()方法：使用toString()方法可以将数组转换为以逗号分隔的字符串。例如： ```javascript let array = [1, 2, 3]; let str = array.toString(); console.log(str); // 输出：1,2,3 ``` 2. concat()方法：使用concat()方法可以将数组连接为一个字符串。例如： ```javascript let array = [1, 2, 3]; let str = array.concat().join(""); console.log(str); // 输出：123 ``` 3. reduce()方法：使用reduce()方法可以将数组中的每个元素合并为一个字符串。例如： ```javascript let array = [1, 2, 3]; let str = array.reduce((a, b) => a + b.toString(), ""); console.log(str); // 输出：123 ``` 4. map()方法 + join()方法：使用map()方法对数组的每个元素进行处理，然后使用join()方法将处理后的元素连接为字符串。例如： ```javascript let array = [1, 2, 3]; let str = array.map(String).join(""); console.log(str); // 输出：123 ``` 总结：除了.join()方法，还可以使用.toString()方法、.concat()方法、.reduce()方法，或者结合.map()方法和.join()方法将数组转换为字符串。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值