Explication détaillée de trois méthodes de connexion de chaînes dans JS et comparaison de leurs performances

Cet article explique en détail les trois méthodes de connexion de chaînes dans JS et leur comparaison de performances

Au travail, nous rencontrons souvent le besoin d'en combiner deux ou plus Lorsqu'il s'agit de concaténer des chaînes en une seule chaîne, il existe généralement trois façons de résoudre ce type de problème dans JS. Nous les listons ici une par une et effectuons également une comparaison spécifique de leurs performances.

La première méthode consiste à utiliser le connecteur " " pour connecter les chaînes à connecter :

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

Il ne fait aucun doute que cette méthode est la plus pratique et la plus rapide Oui, si vous ne connectez que moins de 100 chaînes, il est recommandé d'utiliser cette méthode car elle est la plus pratique.

La deuxième méthode utilise le array comme intermédiaire pour connecter la chaîne avec join :

var arr=new Array();
arr.push(a);
arr.push(b);
var str=arr.join("");

site web de w3school introduction On dit que cette méthode consomme moins de ressources et est plus rapide que la première méthode. Nous vérifierons plus tard si c'est le cas par des expérimentations.

La troisième méthode consiste à utiliser l'attribut objet pour connecter la chaîne

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

en utilisant le code suivant Comparez les performances des trois méthodes et ajustez le nombre de chaînes de connexion en modifiant la valeur de c :

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

J'ajuste c pour qu'il soit égal à 5000, 50000, 500000, 5000000 respectivement. Chaque valeur a été mesurée 10 fois, et les résultats finaux sont les suivants :

c=5000
Temps moyen pris (en millisecondes)
Le troisième type 3. 2 2 3 1 2 2 1 1 1 1.8
Deuxième 1 3 0 3 1 3 4 1 4 2 2. 2
Le premier type 0 0 0 0 0 1 1 1 1 1 1 1 0.5

c=50000

Le troisième type 22 12 9 14 12 13 13 13 10 17 13,5
Le deuxième type 8 13 12 8 11 11 8 9 8 9 9,7
Le premier type 7 12 5 11 10 10 10 13 16 12 10.6

c=500000

Le troisième type 104 70 74 69 76 77 69 102 73 73 78.7
Le deuxième type 78 100 99 99 10 0 98 96 71 94 97 93.2
Le premier type 90 87 83 85 85 83 84 83 88 86                                                                                                                                                            2 436 787 449 432 444 599. 1

Le deuxième type 568 842 593 747 417 747 719 549 573 563 631.8

Premier type 516 279 616 161 466 416 201 495 510 515 4 17.5

Des paramètres aléatoires ont été ajoutés à la barre d'adresse en comptant 5 000 000, ce qui devrait éviter l'impact de la mise en cache. A en juger par les résultats, la première méthode ne consomme pas plus que les deux autres méthodes, et est encore plus avantageuse. Ceci est évidemment incompatible avec les instructions du manuel.

Système de test : win 7 phare

Navigateur : chrome 52.0.2739.0 m

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!