`

JavaScript concat方法和join方法及性能测试

阅读更多

一. concat方法

1. String中的concat方法:
返回字符串值,该值包含了两个或更多个提供的字符串的连接。
string1.concat([string2[, string3[, . . . [, stringN]]]])
参数:
string1 ,必选项。要和所有其他指定的字符串进行连接的 String 对象或文字。
string2,. . ., stringN ,可选项。要连接到 string1 尾部的 String 对象或文字。
说明:
concat 方法的结果等于:result = string1 + string2 + string3 + … + stringN。不论源字符串或结果字符串哪一个中的值改变了都不会影响另一个字符串中的值。如果有不是字符串的参数,在被连接到 string1 之前将先被转换为字符串。
示例:
下面的示例说明了使用字符串时 concat 方法的用法:
function concatDemo()
{
   var str1 = "string1"
   var str2 = "string2";
   var s = str1.concat(str2);
   // 返回连接好的字符串为string1string2.
   return(s);
}

2.Array的concat方法

concat 方法 (Array)
返回一个新数组,这个新数组是由两个或更多数组组合而成的。
array1.concat([item1[, item2[, . . . [, itemN]]]])
参数:
array1,必选项。其他所有数组要进行连接的 Array 对象。
item1,. . ., itemN,可选项。要连接到 array1 末尾的其他项目。
说明:
concat 方法返回一个 Array 对象,其中包含了 array1 和提供的任意其他项目的连接。要加的项目(item1 … itemN)会按照从左到右的顺序添加到数组.
如果某一项为数组,那么添加其内容到 array1 的末尾。如果该项目不是数组,就将其作为单个的数组元素添加到数组的末尾。
但是要注意: concat()方法并不能递归地展开一个元素为数组的数组.
以下为从源数组复制元素到结果数组的说明:

  • .对于从正被连接到新数组的数组中复制的对象参数,复制后仍然指向相同的对象。不论新数组和源数组中哪一个有改变,都将引起另一个的改变。
  • .对于连接到新数组的数值或字符串,只复制其值。一个数组中值有改变并不影响另一个数组中的值。

示例:
下面的例子说明了使用数组时 concat 方法的用法:
var a = [1,2,3];
a.concat(4,5);  //返回 [1,2,3,4,5]
a.concat([4,5]);  //返回 [1,2,3,4,5]
a.concat([4,5],[6,7]); //返回[1,2,3,4,5,6,7]
a.concat(4,[5,[6,7]]); //返回[1,2,3,4,5,6,7]
function ConcatArrayDemo(){
   var a, b, c, d;
   a = new Array(1,2,3);
   b = "JScript";
   c = new Array(42, "VBScript);
   d = a.concat(b, c);
   // 返回数组 [1, 2, 3, "JScript", 42, "VBScript"]
   return(d);
}

二.join 方法
返回字符串值,其中包含了连接到一起的数组的所有元素,元素由指定的分隔符分隔开来。
arrayObj.join(separator)
参数:
arrayObj,必选项。Array 对象。
separator,必选项。是一个 String 对象,作为最终的 String 对象中对数组元素之间的分隔符。如果省略了这个参数,那么数组元素之间就用一个逗号来分隔。
说明:
如果数组中有元素没有定义或者为 null,将其作为空字符串处理。
示例:
下面的例子说明了 join 方法的用法。
var a = [1, 2, 3];    //用这三个元素创建一个新数组.
var s = a.join();       // s == "1,2,3"
下面的调用指定了一个分隔符,其生成的结果就有些区别:
s = a.join(", ");   // s == "1, 2, 3"
注意逗号后面的空格.

三.性能测试:

对比"+=",concat,join三种操作的性能:

测试代码如下所示:

<script type="text/javascript">
	function aa() {
	var str = "";
  var startTime =  new Date();
  for(var i = 0; i < 200000; i++){
  str += "test"; 
  //str = str.concat("test");
  }
var endTime = new Date();
  alert(endTime.getTime() - startTime.getTime());	
  }
</script>
<body>
<div class="demo" id="demo">
<input class="button" type="button" value="Go" onclick="aa()"/>
</div>
</body>

 对"+="200000次操作进行了测试后的结果(多次测试平均结果)如下: firefox3.5.8:  53ms  IE8: 172ms

 对"concat"100000次操作进行了测试后的结果(多次测试平均结果)如下: firefox3.5.8:  55ms  IE8: 266ms

在firefox下,concat的性能与"+="差不多,在IE下,"+="操作效率更高一些.

在firebug1.4.5下进行测试,测试代码如下:测试平均结果: "+=":123ms   "concat":320ms

     var str = "";
     var startTime =  new Date();
	for(var i = 0; i < 200000; i++){
	  //str += "test"; 
	  str = str.concat("test");  
	}	
	var endTime = new Date();
        console.log(endTime.getTime() -startTime.getTime()); 

 对join()方法的测试:

测试代码:

<script type="text/javascript">
	function aa() {
	var str = "";
	var startTime =  new Date();
	var array = new Array();
	for(var i = 0; i < 200000; i++){
	     array.push("test");
	}
	str = array.join("");
	var endTime = new Date();
  alert(endTime.getTime() - startTime.getTime());	
  }
	</script>
<body>
<div class="demo" id="demo">
<input class="button" type="button" value="Go" onclick="aa()"/>
</div>
</body>

 对"join"200000次操作进行了测试后的结果(多次测试平均结果)如下: firefox3.5.8:  67ms  IE8: 203ms

在friebug1.4.5 中进行测试:

测试代码: 多次测试结果平均后:  247ms

var str = "";
var startTime =  new Date();
var array = new Array();
for(var i = 0; i < 200000; i++){
     array.push("test");
}
str = array.join("");
var endTime = new Date();
console.log(endTime.getTime() - startTime.getTime());	

对在网上流行的javascript写的StringBuffer()对象进行测试:

StringBuffer对象的原码如下:

function StringBuffer() {   
  this._strings = new Array;   
}   
StringBuffer.prototype.append = function (str) {   
  this._strings.push(str);   
};   
StringBuffer.prototype.toString = function () {   
 return this._strings.join("");   
};

 这个StringBuffer对象只有两个方法,一个是增加字符串,一个是输出累加的字符串结果,原理就是使用数组暂存累加的字符串内容最后再做字符串的链接操作,这样就把String对象中的累加操作省掉了,所以大家都认为它的性能应该比较高(当然包括我自己在内,我也一直是这么认为的,并且自己写javascript代码时,也用到了这个对象),然而今天我测试了一下发现其实并非如此.

测试代码如下:(多次测试平均结果)如下: firefox3.5.8:  69ms  IE8: 375ms

<script type="text/javascript">
	function StringBuffer() {   
  this._strings = new Array;   
}   
StringBuffer.prototype.append = function (str) {   
  this._strings.push(str);   
};   
StringBuffer.prototype.toString = function () {   
 return this._strings.join("");   
};
	function aa() {
	var str = "";
	var startTime =  new Date();
	var sbf = new StringBuffer();
	for(var i = 0; i < 200000; i++){
	 sbf.append("test");
	}
  str = sbf.toString();
	var endTime = new Date();
  alert(endTime.getTime() - startTime.getTime());	
  }
	</script>
	<body>
<div class="demo" id="demo">
<input class="button" type="button" value="Go" onclick="aa()"/>
</div>
</body>

 在friebug1.4.5 中进行测试:

测试代码: 多次测试结果平均后:  331ms

function StringBuffer() {
	this._strings = new Array;
}
StringBuffer.prototype.append = function(str) {
	this._strings.push(str);
};
StringBuffer.prototype.toString = function() {
	return this._strings.join("");
};
var str = "";
var d = new Date();
console.info("Start Test");
//console.info(d.getSeconds() + " " + d.getMilliseconds());
var sbf = new StringBuffer();
for (var i = 0; i < 200000; i++) {
	sbf.append("test");
}
str = sbf.toString();
var d1 = new Date();
//console.info(d1.getSeconds() + " " + d1.getMilliseconds());
console.info(d1.getTime() - d.getTime());
console.info("End Test");

 从我上面的测试可以看出,join方法(网上到处到在说的高性能StringBuffer对象)其实并没有比"+="操作的性能高,甚至也没有比concat方法更高效,不知是我测试有误,还是其他原因.当然我的测试环境也只太单一了,应该在更多的浏览器中进行测试.

 

 

 

 

0
0
分享到:
评论

相关推荐

    (175797816)华南理工大学信号与系统Signal and Systems期末考试试卷及答案

    内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

    深圳建设施工项目安全生产奖惩管理制度.docx

    深圳建设施工项目安全生产奖惩管理制度

    离散数学课后题答案+sdut往年试卷+复习提纲资料

    离散数学课后题答案+sdut往年试卷+复习提纲资料

    自考04741计算机网络原理真题及答案及课件

    04741计算机网络原理 2018(尚德).pdf 13年试题(2套).pdf 2015年10月自考计算机网络原理04741试题及答案解析.docx 2021年4月自考04741计算机网络原理真题及答案.docx 2021年4月自考04741计算机网络原理试卷.bak.docx 计算机网络原理 课后题答案 全 李全龙版 自考04741.zip.zip 计算机网络原理课件 计算机网络原理课件.rar

    C++实现rpc,全程手写

    C++实现rpc,全程手写

    前端拿到的列表数据里id都一样的处理办法.txt

    前端拿到的列表数据里id都一样的处理办法.txt

    最新仿720云全景制作源码-krpano仿720云全景网站源码 新增微信支付+打赏+场景红包

    最新仿720云全景制作源码|krpano仿720云全景网站源码(新增微信支付+打赏+场景红包等)是一款基于php+mysql开发制作的全景在线制作网站源码,包含全景图片,全景视频等。数据存储全部存于OSS云端或本地,源码完全开源可自行二次开发。 环境要求:PHP5.5.X+MYSQL5.6.X+伪静态 熟悉linux系统推荐使用LAMP,web服务器最好使用apache,不要使用nginx(发布大全景图需要时间可能需要20多分钟, nginx超时机制不好控制)。 Windows系统推荐使用phpstudy。Liunx推荐宝塔控制面板apache 前端为HTML5开发,自适应手机版! 1、支持VR虚拟现实、全景视频、环物全景、说一说、点赞评论、重力感应、智能视频嵌入、场景切换热点、加载进度条、 地图导航、光晕flash特效、物体全景嵌入、场景自播、场景解说、雷达导航等业内前沿功能。 2、支持windows、Linux、Mac、安卓、IOS等几乎所有的系统观看。支持CDN图片转存,极大的减轻的服务器流量费用。 3、支持用户权限分配。方便会员制收费。

    YOLO算法-可乐罐子数据集-336张图像带标签-可乐.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    环境监测系统源代码全套技术资料.zip

    环境监测系统源代码全套技术资料.zip

    【编码解码】基于matlab罗利衰落信道编解码器设计【含Matlab源码 9930期】.zip

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    四轮转向系统横摆角速度控制simulink仿真模型,利用滑模控制算法,基于八自由度车辆模型,控制有比较好的效果,附参考说明

    四轮转向系统横摆角速度控制simulink仿真模型,利用滑模控制算法,基于八自由度车辆模型,控制有比较好的效果,附参考说明。

    YOLO算法-工作场所安全隐患数据集-859张图像带标签-倒下的工人-配备个人防护装备的工人-无个人防护装备的工人-火.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    自学考试02331数据结构试题及答案2021-2022

    02142数据结构导论历年真题及答案(2012-2018共13套).rar 02331数据结构历年真题共267页2009.10-2019.4.rar 24数据结构201704_8.pdf 25数据结构201710_10.pdf 26数据结构201804_11.pdf 27数据结构201810_9.pdf 全国2021年04月高等教育自学考试02331数据结构试题及答案.docx 全国2022年04月高等教育自学考试02331数据结构试题及答案.docx 数据结构-课件.rar 第l六讲.ppt 第一讲.ppt 第七讲.ppt 第三讲.ppt 第九讲.ppt 第二讲.ppt 第五讲.ppt 第八讲.ppt 第四讲.ppt

    验收确认单表格.docx

    验收确认单表格.docx

    内存搜索工具(易).rar

    内存搜索工具(易).rar

    饮食管理系统项目源代码全套技术资料.zip

    饮食管理系统项目源代码全套技术资料.zip

    计算机视觉项目:Swin-Transformer 【tiny、small、base】模型实现的图像识别项目:番茄病害图像分类

    【项目简介】 代码主干网络采用Swin-Transformer 家族系列,包括【tiny、small、base】三种模型。pretrained和freeze_layers参数为是否采用官方预训练模型和是否仅训练分类头。为了做对比消融试验,优化器采用了Adam和SGD、AdamW三种。损失函数采用多类别的交叉熵、学习率优化策略采用cos余弦退火算法 【评估网络】 评估的指标采用loss和准确率(accuracy),分别会在训练集和验证集上进行评估、输出、绘制曲线图像。同时会在训练集、验证集进行一系列评估,包含混淆矩阵、recall、precision、F1 score等等曲线图像,以及recall、precision、F1 score、特异度的输出信息等等。 【具体各类别的指标在json文件中查看】 【如果想要更换数据集训练,参考readme文件】 【本项目为8种番茄病害图片(约4k张数据),包含数据集和标签,可以一键运行】

    (177121232)windows电脑下载OpenHarmony鸿蒙命令行工具hdc-std

    windows电脑下载OpenHarmony鸿蒙命令行工具hdc_std。内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

    小程序毕业设计项目-音乐播放器

    本项目可以作为小程序毕设项目,主要功能为音乐播放器,主要功能是:可以播放歌曲(采用mp3网络连接实现)、专辑封面播放时可以旋转,能够实现开始和暂停播放,可以点击下一首歌曲,主页面实现动态轮播图

    考研学习分享-JAVA-基于Vue+SpringBoot的考研学习分享平台设计与实现(毕业论文)

    考研学习分享功能的描述可以涵盖以下几个主要模块,旨在为考研学生提供一个互动、资源共享、经验交流的平台: 1. 用户注册与个人信息管理 学生可以通过邮箱或手机号注册账户,填写个人信息,如姓名、专业、目标院校等。 用户可设置学习目标和进度,方便记录自己的学习历程。 2. 学习资料共享 用户可以上传、下载考研相关学习资料,如教材、真题、笔记、复习计划等。 提供文件分类功能,按学科、院校、难度等进行整理,方便用户查找。 支持多种文件格式,如PDF、Word、Excel、图片等。 3. 复习经验分享 学生可以发布自己的复习经验文章,分享复习方法、备考心得、时间管理技巧等。 提供文章评论和互动功能,其他学生可以点赞、评论、提问,促进经验交流。 设置专栏或专题,帮助学生快速找到自己感兴趣的复习内容。 4. 考研小组与社交功能 学生可以创建或加入学习小组,组内成员可共享资料、讨论问题、互相鼓励。 提供私信、群聊功能,方便学员在小组内进行实时讨论和交流。 支持设置小组学习目标和定期检查进度,增加学习动力。 5. 在线课程与讲座 提供考研各科目(如英语、数学、政治等)的在线课程资源,用户可以报名参加。

Global site tag (gtag.js) - Google Analytics