Javascript中的字符串链接和Array.join()方法时间效率对比-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

技术小阿哥 2017-11-14 1138浏览量

简介：

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

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，如需转载请自行联系原作者

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

分享：