Javascript三种字符串连接方式及性能比较

2024-10-11 15:15:04

第一种：用连接符“+”连接字符串

str="a";
str+="b";

这种方法相对以下两种，最便捷快速。建议100字符以下的连接使用这种连接方式。

第二种：以数组作为中介，使用jion函数进行连接

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

第三种：利用对象属性连接字符串

function stringConnect(){
  this._str_=new Array();
}
stringConnect.prototype.append=function(a){
  this._str_.push(a);
}
stringConnect.prototype.toString=function(){
  return this._str_.join();
}
  var mystr=new stringConnect;
  mystr.append("a");
  var str=mystr.toString();

利用下面代码对三种方法性能进行比较，通过更改 c 的值来调整连接字符串的个数：

var str="";
var d1,d2;
var c=5000;//连接字符串的个数
//------------------------测试第三种方法耗费时间-------
 d1=new Date();
function stringConnect(){
  this._str_=new Array();
}
stringConnect.prototype.append=function(a){
  this._str_.push(a);
}
stringConnect.prototype.toString=function(){
  return this._str_.join("");
}
  var mystr=new stringConnect;

  for(var i=0;i<c;i++){
    mystr.append("a");
  }
str=mystr.toString();
 d2=new Date();
 console.log(d2.getTime()-d1.getTime());
//-----------------------------------------------------

//------------------------测试第二种方法耗费时间-------
d1=new Date();
  var arr=new Array();
for(var i=0;i<c;i++){
  arr.push("a");
}
str=arr.join("");
  d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------
//------------------------测试第一种方法耗费时间-------
d1=new Date();for(var i=0;i<c;i++){
  str+="a";
}
d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

我调整 c 分别等于5000、50000、500000、5000000，每个数值分别测了10次，最后结果如下：

c=5000
平均耗时（单位毫秒）

第三种   3   2   2   3   1   2 2 1   1   1                              1.8
第二种   1   3   0   3   1   3 4 1   4   2                              2.2
第一种   0   0   0   0   0   1 1 1   1   1                              0.5

c=50000

第三种   22 12     9   14    12   13   13   13   10   17          13.5
第二种   8    13   12     8    11   11     8     9     8    9          9.7
第一种   7    12     5    11   10   10   10    13   16 12          10.6

c=500000

第三种 104 70 74 69 76 77 69 102 73 73                            78.7
第二种 78 100 99 99 100 98 96 71 94 97                             93.2
第一种 90 87 83 85 85 83 84 83 88 86                                 85.4

c=5000000

第三种 651 871 465 444 1012 436 787 449 432 444             599.1
第二种 568 842 593 747 417 747 719 549 573 563               631.8
第一种 516 279 616 161 466 416 201 495 510 515               417.5

统计5000000的时候在地址栏加入了随机参数，应该是避免了缓存的影响的。从结果来看，第一种方法并不比另2种方法消耗多，甚至还更有优势，这点和手册上的说明明显不一致。

测试系统：win 7旗舰

浏览器：chrome 52.0.2739.0 m

总结

以上所述是小编给大家介绍的Javascript三种字符串连接方式及性能比较，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

JS ES6多行字符串与连接字符串的表示方法

本文实例讲述了JS ES6多行字符串与连接字符串的表示方法.分享给大家供大家参考,具体如下: 1. 以前,js多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用` ... `表示: 旧版写法 alert("你好,\n 我叫\n Olive"); 新版写法 alert(`你好我叫 olive`);//注意这里的两个点是键盘上数字键1左边的按键,而不是单引号哦 2. 以前,把多个字符串连接起来,可以用+号连接 var name ="olive
你必须知道的JavaScript 中字符串连接的性能的一些问题

而JavaScript的核心是ECMAScript .与其他语言类似,ECMAScript 的字符串是不可变的,即它们的值不能改变. 请考虑下面的代码: 复制代码代码如下: var str = "hello ";str += "world";实际上,这段代码在幕后执行的步骤如下: 1.创建存储 "hello " 的字符串.2.创建存储 "world" 的字符串.3.创建存储连接结果的字符串.4.把 str 的当前内容复制到结
数组方法解决JS字符串连接性能问题有争议

1.传统上,字符串连接一直是js中性能最低的操作之一. var text="Hello"; text+=" World!"; 早期浏览器没有对这种运算进行优化. 由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果.频繁地在后台创建和销毁字符串导制性能异常低下. 2.发现这一点后,开发者们利用数组对象进行优化. var buffer=[],i=0; buffer[i++]="Hello";//通过相应索引值添加元素比push方法快 bu
javascript之大字符串的连接的StringBuffer 类

大字符串的连接最好使用数组,把每个子串放入数组元素,再执行join()连接起来,其效率比+＝有明显的提高. 因此,可以由此原理写一个简单的 StringBuffer 类,在遇到大字符串连接时可以派上用场. //by misshjn function StringBuffer(){ this.data = []; } StringBuffer.prototype.append = function(){ this.data.push(arguments[0]); return t
JS 字符串连接[性能比较]

一.ECMAScript的字符串是不可变的,即它们的值不能改变,因此当你写出下面的代码的时候发生了什么呢? Js代码复制代码代码如下: var str = "Hello "; str += "world"; 执行的步骤如下: 创建存储"Hello"的字符串创建存储"world"的字符串创建存储连接结果的字符串把str的当前内容复制到结果中把"world"复制到结果中更新str,使它指向结果每
浅谈JS中的三种字符串连接方式及其性能比较

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

本文实例讲述了JavaScript实现将数组中所有元素连接成一个字符串的方法.分享给大家供大家参考.具体如下: 下面的代码演示了JS中如何通过数组对象的join方法将数组元素连接成一个字符串输出 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to join the array elements into a string. </p> <butto
Javascript三种字符串连接方式及性能比较

第一种:用连接符"+"连接字符串 str="a"; str+="b"; 这种方法相对以下两种,最便捷快速.建议100字符以下的连接使用这种连接方式. 第二种:以数组作为中介,使用jion函数进行连接 var arr=new Array(); arr.push(a); arr.push(b); var str=arr.join(""); 第三种:利用对象属性连接字符串 function stringConnect(){ this
VMware WorkStation的三种网络连接方式详解

一. 首先贴出本人在网络上找到与VMware网络连接相关的知识安装完虚拟机后,默认安装了两个虚拟网卡,VMnet1和VMnet8,其他的未安装(当然也可以手动安装其他的).其中VMnet1是host网卡,用于host方式连接网络的.VMnet8是NAT网卡,用于NAT方式连接网络的.它们的IP地址是随机生成的,如果要用虚拟机做实验的话,最好将VMnet1到VMnet8的IP地址改掉.习惯上把VMware虚拟网卡使用的网段"固定",使用如下原则:VMnet1对应的网段是192.168.
VMware的三种网络连接方式区别

关于VMware的三种网络连接方式,NAT,Bridged,Host-Only ,在刚接触的时候通常会遇到主机Ping不通虚拟机而虚拟机能Ping得通主机:主机与虚拟机互不相通等等网络问题.本文就这三种连接方式作一一说明,也方便以后翻阅当参考用. 首先,要注意安装完VMware后,控制面板\网络和 Internet\网络连接会多出两块虚拟网卡VMnet1.VMnet2,两个网卡各有用途. 基本拓扑 NAT(网络地址转换) 依靠物理主机的VMnet8网卡上网.虚拟机可以互Ping通,前提是物理主机
Java HashMap三种循环遍历方式及其性能对比实例分析

本文实例讲述了Java HashMap三种循环遍历方式及其性能对比.分享给大家供大家参考,具体如下: HashMap的三种遍历方式 (1)for each map.entrySet() Map<String, String> map = new HashMap<String, String>(); for (Entry<String, String> entry : map.entrySet()) { entry.getKey(); entry.getValue();
javascript 三种编解码方式

1. 传递参数时需要使用encodeURIComponent,这样组合的url才不会被#等特殊字符截断. 例如:<script language="javascript">document.write('<a href="http://passport.baidu.com/?logout&aid=7&u='+encodeURIComponent("http://cang.baidu.com/bruce42")+'"
总结JavaScript三种数据存储方式之间的区别

sessionStorage .localStorage 和 cookie 之间的共同点: 都是保存在浏览器端,且同源的. sessionStorage .localStorage 和 cookie 之间的区别: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下. 存
python字符串连接方式汇总

在python中有很多字符串连接方式,今天就在这里具体总结一下: ①.最原始的字符串连接方式:str1 + str2 ②.python 新字符串连接语法:str1, str2 ③.奇怪的字符串方式:str1 str2 ④.% 连接字符串:'name:%s; sex: ' % ('tom', 'male') ⑤.字符串列表连接:str.join(some_list) 下面具体分析一下: 第一种,想必只要是有编程经验的人,估计都知道,直接用 "+" 来连接两个字符串: 'Jim' + 'G
深入浅析JavaScript中对事件的三种监听方式

事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 第一种监听方式,也是最普遍使用的方式,是直接在代码上加载事件,产生效果: <table> <tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>
JS常用的几种数组遍历方式以及性能分析对比实例详解

本文实例讲述了JS常用的几种数组遍历方式以及性能分析对比.分享给大家供大家参考,具体如下: 前言这一篇与上一篇 JS几种变量交换方式以及性能分析对比属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比起由在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,于是抽取了核心逻辑,封装成了模板,打算拓展成一个系列,本文则是系列中的第二篇,JS数组遍历方式的分析对比 JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,fo

Javascript三种字符串连接方式及性能比较

相关推荐

随机推荐