Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der drei String-Verbindungsmethoden in JS und deren Leistungsvergleich

高洛峰
Freigeben: 2017-03-12 11:29:32
Original
1214 Leute haben es durchsucht

In diesem Artikel werden die drei String-Connection--Methoden in JS und deren Leistungsvergleich ausführlich erläutert.

Bei der Arbeit stoßen wir häufig auf die Notwendigkeit, zwei oder mehr zu kombinieren Wenn es darum geht, Strings zu einem String zu verketten, gibt es im Allgemeinen drei Möglichkeiten, mit dieser Art von Problem in JS umzugehen. Hier listen wir sie einzeln auf und vergleichen auch ihre Leistung.

Die erste Methode besteht darin, den Stecker „+“ zu verwenden, um die zu verbindenden Saiten zu verbinden:

str="a";
str+="b";
Nach dem Login kopieren

Es besteht kein Zweifel, dass diese Methode die beste ist praktisch Es ist schnell, wenn Sie nur weniger als 100 Strings anschließen.

Die zweite Methode verwendet Array als Vermittler, um die Zeichenfolge mit Join zu verbinden:

var arr=new Array();
arr.push(a);
arr.push(b);
var str=arr.join("");
Nach dem Login kopieren

w3school-Website Einführung Es wird gesagt, dass diese Methode weniger Ressourcen verbraucht und schneller ist als die erste Methode. Ob dies der Fall ist, werden wir später durch Experimente überprüfen.

Die dritte Methode besteht darin, das -Objekt--Attribut zu verwenden, um die Zeichenfolge

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();
Nach dem Login kopieren

zu verbinden Vergleichen Sie mit dem folgenden Code die Leistung der drei Methoden und passen Sie die Anzahl der Verbindungszeichenfolgen an, indem Sie den Wert von c ändern:

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());
//-------------------------------------------------------
Nach dem Login kopieren

Ich passe c an, um 5000, 50000, 500000, 5000000. Jeder Wert wurde 10 Mal gemessen und die Endergebnisse sind wie folgt:

c=5000
Durchschnittlich benötigte Zeit (in Millisekunden)
Der dritte Typ 3 2 2 3 1 2 2 1 1 1 1,8
Zweiter 1 3 0 3 1 3 4 1 4 2 2. 2
Der erste Typ 0 0 0 0 0 1 1 1 1 1 1 1 0,5

c=50000

Der dritte Typ 22 12 9 14 12 13 13 13 10 17 13,5
Der zweite Typ 8 13 12 8 11 11 8 9 8 9 9,7
Der erste Typ 7 12 5 11 10 10 10 13 16 12 10,6

c=500000

Der dritte Typ 104 70 74 69 76 77 69 102 73 73 78,7
Der zweite Typ 78 100 99 99 1 00 98 96 71 94 97 93.2
Der erste Typ 90 87 83 85 85 83 84 83 88 86                                                                                                                                    2 436 787 449 432 444. 59 9.1

Der zweite Typ 568 842 593 747 417 747 719 549 573 563 631.8

Erster Typ 516 279 616 161 466 416 201 495 510 515 4 17,5

Beim Zählen von 5000000 wurden der Adressleiste zufällige Parameter hinzugefügt, wodurch die Auswirkungen von Caching vermieden werden sollten. Den Ergebnissen nach zu urteilen, verbraucht die erste Methode nicht mehr als die anderen beiden Methoden und ist sogar noch vorteilhafter. Dies steht offensichtlich im Widerspruch zu den Anweisungen im Handbuch.

Testsystem: Win 7 Flaggschiff

Browser: chrome 52.0.2739.0 m

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der drei String-Verbindungsmethoden in JS und deren Leistungsvergleich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage