快捷導(dǎo)航

淺談JS中的三種字符串連接方式及其性能比較

更新時(shí)間：2016年09月02日 11:31:44 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談JS中的三種字符串連接方式及其性能比較。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

工作中經(jīng)常會(huì)碰到要把2個(gè)或多個(gè)字符串連接成一個(gè)字符串的問題，在JS中處理這類問題一般有三種方法，這里將它們一一列出順便也對(duì)它們的性能做個(gè)具體的比較。

第一種方法用連接符“+”把要連接的字符串連起來：

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

毫無疑問，這種方法是最便捷快速的，如果只連接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ì)象屬性來連接字符串

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 的值來調(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é)果來看，第一種方法并不比另2種方法消耗多，甚至還更有優(yōu)勢(shì)，這點(diǎn)和手冊(cè)上的說明明顯不一致。

測(cè)試系統(tǒng)：win 7旗艦

瀏覽器：chrome 52.0.2739.0 m

以上這篇淺談JS中的三種字符串連接方式及其性能比較就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: