淺談JS中的三種字符串連接方式及其性能比較
工作中經(jīng)常會(huì)碰到要把2個(gè)或多個(gè)字符串連接成一個(gè)字符串的問題，在JS中處理這類問題一般有三種方法，這里將它們一一列出順便也對(duì)它們的性能做個(gè)具體的比較。
第一種方法 用連接符“+”把要連接的字符串連起來(lái)：
str="a"; str+="b";
毫無(wú)疑問，這種方法是最便捷快速的，如果只連接100個(gè)以下的字符串建議用這種方法最方便。
第二種方法 以數(shù)組作為中介用 join 連接字符串：
var arr=new Array();
arr.push(a);
arr.push(b);
var str=arr.join("");
w3school 網(wǎng)站介紹說這種方法要比第一種消耗更少的資源，速度也更快，后面我們通過實(shí)驗(yàn)再驗(yàn)證是否是這樣。
第三種方法 利用對(duì)象屬性來(lái)連接字符串
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();
利用下面代碼對(duì)三種方法性能進(jìn)行比較，通過更改 c 的值來(lái)調(diào)整連接字符串的個(gè)數(shù)：
var str="";
var d1,d2;
var c=5000;//連接字符串的個(gè)數(shù)
//------------------------測(cè)試第三種方法耗費(fèi)時(shí)間-------
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());
//-----------------------------------------------------
//------------------------測(cè)試第二種方法耗費(fèi)時(shí)間-------
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());
//-------------------------------------------------------
//------------------------測(cè)試第一種方法耗費(fèi)時(shí)間-------
d1=new Date();for(var i=0;i<c;i++){
str+="a";
}
d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------
我調(diào)整 c 分別等于5000、50000、500000、5000000，每個(gè)數(shù)值分別測(cè)了10次，最后結(jié)果如下：
c=5000
平均耗時(shí)（單位毫秒）
第三種 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
統(tǒng)計(jì)5000000的時(shí)候在地址欄加入了隨機(jī)參數(shù)，應(yīng)該是避免了緩存的影響的。從結(jié)果來(lái)看，第一種方法并不比另2種方法消耗多，甚至還更有優(yōu)勢(shì)，這點(diǎn)和手冊(cè)上的說明明顯不一致。
測(cè)試系統(tǒng)：win 7旗艦
瀏覽器：chrome 52.0.2739.0 m
以上這篇淺談JS中的三種字符串連接方式及其性能比較就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- javascript中比較字符串是否相等的方法
- js去字符串前后空格5種實(shí)現(xiàn)方法及比較
- javascript 兩個(gè)字符串比較函數(shù)
- js處理json以及字符串的比較等常用操作
- JavaScript 解析Json字符串的性能比較分析代碼
- javascript的字符串按引用復(fù)制和傳遞,按值來(lái)比較介紹與應(yīng)用
- js字符串截取函數(shù)slice、substring和substr的比較
- JS實(shí)現(xiàn)的用來(lái)對(duì)比兩個(gè)用指定分隔符分割的字符串是否相同
- JS實(shí)現(xiàn)快速比較兩個(gè)字符串中包含有相同數(shù)字的方法
相關(guān)文章
js實(shí)現(xiàn)輪播圖效果 z-index實(shí)現(xiàn)輪播圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
今天小編就為大家分享一篇layui的table中顯示圖片方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-08-08
淺談JavaScript的push(),pop(),concat()方法
下面小編就為大家?guī)?lái)一篇淺談JavaScript的push(),pop(),concat()方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-06-06
IE和Firefox之間在JavaScript語(yǔ)法上的差異
這篇文章主要為大家詳細(xì)介紹了IE和Firefox之間在JavaScript語(yǔ)法上的差異，在JavaScript語(yǔ)法上不同的7個(gè)方面，感興趣的小伙伴們可以參考一下2016-04-04
js動(dòng)態(tài)創(chuàng)建及移除div的方法
這篇文章主要介紹了js動(dòng)態(tài)創(chuàng)建及移除div的方法,涉及javascript針對(duì)頁(yè)面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-06-06
js判斷undefined類型，可以使用typeof方法，typeof 返回的是字符串,其中就有一個(gè)是undefined2014-07-07
這篇文章主要為大家介紹了uniapp解決軟鍵盤彈出問題方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
BOM系列第二篇之定時(shí)器requestAnimationFrame
這篇文章主要介紹了BOM系列第二篇之定時(shí)器requestAnimationFrame 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了JavaScript 接口原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript 接口原理、優(yōu)缺點(diǎn)、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
JavaScript中的立即執(zhí)行函數(shù)表達(dá)式介紹
這篇文章主要介紹了JavaScript中的立即執(zhí)行函數(shù)表達(dá)式介紹,本文著重講解了什么是立即調(diào)用函數(shù)表達(dá)式,需要的朋友可以參考下2015-03-03