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

最新推荐文章于 2023-04-17 15:41:42 发布
最新推荐文章于 2023-04-17 15:41:42 发布
阅读量91 收藏
点赞数
文章标签： javascript java 测试 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34049948/article/details/85119249
版权

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

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对象。

实现：

/**
 * 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的时间：


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);


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

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


<!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()方法来拼接字符串更有利些。




weixin_34049948
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三种字符串连接方法的效率比较
navygong的专栏
06-02 975
在python下测试三种进行字符串连接（+、%s格式化、join()）方法的效率：  1 #!/usr/bin/env python  2 """Test string connect efficiency in diffrent methods"""  3   4 def test_add(stra, strb):  5     """Use + to connect"""  6     s
java语言实现数组的拼接
ytl1427698367的博客
11-05 1883
/实现数组的拼接 public class Arrayjoin{ public static int[] arrayjoin(int[]a,int[]b){ if(a==null||b == null){ throw new IllegalArgumentException("a or b must be not null."); } int len = a.lengt...
js数组API的时间复杂度大全
weixin_49035434的博客
04-17 2067
为了避免最坏情况，可以使用一些优化措施，例如在排序前随机打乱数组的顺序，或者使用基于归并排序（mergesort）或堆排序（heapsort）的算法，这些算法的时间复杂度为稳定的 O(n log n)。迭代器对象会按顺序遍历数组中的每一项，并返回一个包含键（索引）和值的键值对，每次迭代都只需要访问数组中的一个元素，因此时间复杂度为 O(1)。因此，时间复杂度为 O(n)。，其中 n 是数组的长度，但是最坏情况下的时间复杂度为 O(n^2)，如果数组本身已经有序（升序或降序），则可能会产生最坏情况，导致。
java join array,Java, String.join, Arrays.asList的用法实例
weixin_33962326的博客
03-19 397
package com.main;import java.util.Arrays;import java.util.List;public class Main {public static void main(String[] args) {String tableNameStr = "table1,table2,table3";String[] tableNameArray = tableNa...
JavaScript字符串String和Array操作的有趣方法
10-27
JavaScript中的字符串(String)和数组(Array)是编程中最基础的数据结构，它们在处理数据时起着至关重要的作用。在JavaScript中，这两个类型被视为基本类型，但同时也具有对象的一些特性，提供了丰富的内置方法，使得...
使用JavaScript实现node.js中的path.join方法
10-18
在JavaScript中，`path.join`方法是Node.js的内置模块`path`提供的功能，用于将多个路径片段合并成一个单一的、规范化的路径。在Node.js环境中，这个方法非常实用，因为它可以处理Windows和Unix风格的路径，并确保...
javascript操作字符串的原生方法
01-19
join([分隔符])数组元素组合为字符串 toString()以字符串表示数组 reverse()数组反转–改变原数组本身 valueOf()返回数组值 代码如下: <html> <head> [removed] var fruits= [“苹果”,”鸭梨”,”...
JavaScript实现将数组中所有元素连接成一个字符串的方法
01-21
本文实例讲述了JavaScript实现将数组中所有元素连接成一个字符串的方法。分享给大家供大家参考。具体如下： 下面的代码演示了JS中如何通过数组对象的join方法将数组元素连接成一个字符串输出 <!DOCTYPE html> &...
node.js中的path.join方法使用说明
01-20
在Node.js中，`path.join()` 是一个非常实用的方法，用于将多个路径片段组合成一个完整的路径字符串。这个方法属于内置的 `path` 模块，所以在使用它之前，我们需要先通过 `require('path')` 来引入 `path` 模块。 ...
String字符串拼接join()和+效率问题和Python计时器计算函数消耗时间
E.W的博客
12-30 5263
1、使用操作符+连接字符串 当用操作符+连接字符串的时候，由于字符串是不可变对象，其工作原理实际上是这样的： 如果要连接如下字符串：S1+S2+S3+…+SN，执行一次+操作便会在内存中申请一块新的内存空间， 并将上一次操作的结果和本次操作的右操作数复制到新申请的内存空间，即当执行S1+S2的时候会申请一块内存， 并将S1、S2复制到该内存中，依次类推，如图1所示。 因此，在N个字符串连接的过程中...
Python_字符串（字符串拼接：join() 与 +拼接符两种方法效率对比）
Kryser的博客
09-03 830
#字符串拼接_join()和+的效率计算 import time time1 = time.time() a = '' for i in range(1000000): a += 'ypw'#依次新加字符串'ypw' time2 = time.time() print('运算时长：'+str(time2-time1)) time3 = time.time() li = [] for i in range(1000000): li.append('ypw')#依次在列表中加入字符串'yp.
python字符串连接的三种方法及其效率、适用场景详解
weixin_30577801的博客
08-05 284
python字符串连接的方法，一般有以下三种:方法1：直接通过加号(+)操作符连接website=& 39;python& 39;+& 39;tab& 39;+& 39; com& 39;方法2 python字符串连接的方法，一般有以下三种: 方法1：直接通过加号(+)操作符连接 1 website...
sql join 算法 时间复杂度
stevewong的专栏
08-26 8109
参考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
字符串拼接‘+’和join性能对比
weixin_38180316的博客
08-22 292
'+’和join均可用于字符串的拼接，当遇到数量级（超过10万次交换时）的拼接时需要使用join import time time1=time.time() a='' for i in range(100000): a+='fire' time2=time.time() print(time1-time2) # 使用join拼接 time1=time.time() li=[] for i in range(100000): li.append('fire') a="".join(li) ti
python_对字符串操作.join() 效率 比 + 效率高
07-11 369
将列表中的字符拼接成字符串时，有两种方式 方式1：使用join()方法，将列表转为字符串 方式2：使用+运算符，循环遍历 1 import time 2 str1 = ['a','b','c','d','e','f','g']*100000 3 4 start_time = time.time() 5 output1 = '' 6 for v in st...
golang的拼接字符串方法，strings.Join()比"+"效率更高
热门推荐
果冻先生的专栏
01-02 3万+
package main import "strings" func main(){ a := "hahaha" b := "hehehe" c := strings.Join([]string{a,b},",") println(c) } 主要结论 在已有字符串数组的场合，使用 strings.Join() 能有比较好的性能 在一些性能要求较高的场合，尽量使用 buffer....
除了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、付费专栏及课程。

余额充值