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

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";

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("");

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();

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());
//-------------------------------------------------------

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!