Pendant le travail, vous rencontrez souvent le problème de la concaténation de 2 chaînes ou plus en une seule chaîne. Il existe généralement trois façons de faire face à ce type de problème dans JS. Voici la liste d'entre eux un par un et faites une comparaison spécifique de leurs performances.
La première méthode utilise le connecteur "+" pour connecter la chaîne à connecter:
str = "a"; str + = "b";
Il ne fait aucun doute que cette méthode est la plus pratique et le plus rapide. Si vous ne connectez que moins de 100 chaînes, il est recommandé d'utiliser cette méthode.
La deuxième méthode utilise un tableau comme intermédiaire pour connecter la chaîne à join:
var arr = new Array (); arr.push (a); arr.push (b); var str = arr.join ("");Le site Web W3School présente que cette méthode consomme moins de ressources que la première et est plus rapide. Nous vérifierons plus tard si c'est le cas par le biais d'expériences.
La troisième méthode utilise les propriétés d'objet pour connecter les chaînes
fonction StringConnect () {this._str_ = new Array ();} stringConnect.prototype.append = function (a) {this._str_.push (a);} stringConnect.protype.tostring = function () {return this._str_.join ();} var mystr = new StringConnect; mystr.append ("a"); var str = mystr.toString ();Utilisez le code suivant pour comparer les performances des trois méthodes et ajuster le nombre de chaînes de connexion en modifiant la valeur de C:
var str = ""; var d1, d2; var c = 5000; // nombre de connexions Strings // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- mystr.append ("a"); } str = mystr.toString (); d2 = new Date (); console.log(d2.getTime()-d1.getTime());//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Date();console.log(d2.getTime()-d1.getTime());//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------J'ai ajusté C pour être égal à 5000, 50000, 500000 et 50000000, respectivement. Chaque valeur a été mesurée 10 fois respectivement et le résultat final était le suivant:
C = 5000
Temps moyen en millisecondes
Le troisième type 3 2 2 3 1 2 2 1 1 1 1 1 1.8
Le deuxième type 1 3 0 3 1 3 4 1 4 2 2.2
Le premier type 0 0 0 0 0 0 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 10 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 100 98 96 71 94 97 93.2
Le premier type 90 87 83 85 85 83 84 83 88 86 85.4
C = 5000000
Le troisième type 651 871 465 444 1012 436 787 449 432 444 599.1
Le deuxième type 568 842 593 747 417 747 719 549 573 563 631.8
Le premier type 516 279 616 161 466 416 201 495 510 515 417.5
Lors du comptage de 5000000, des paramètres aléatoires sont ajoutés à la barre d'adresse, ce qui devrait éviter l'impact du cache. À en juger par les résultats, la première méthode ne consomme pas plus que les deux autres méthodes, et elle est encore plus avantageuse, ce qui est évidemment incompatible avec les instructions du manuel.
Système de test: gagner 7 phares
Navigateur: Chrome 52.0.2739.0 m
L'article ci-dessus discute brièvement des trois méthodes de connexion à trois chaînes et des comparaisons de performances dans JS sont tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.