12 Sehr praktische JavaScript -Tipps [Empfohlen]

In diesem Artikel werden wir Ihnen 12 Tipps zu JavaScript mit Ihnen teilen. Diese Tipps können Ihnen helfen, einige Probleme in Ihrer tatsächlichen Arbeit zu lösen.

Verwenden Sie das !! Betreiber um den Booleschen Wert umzuwandeln

Manchmal müssen wir überprüfen, ob eine Variable existiert, oder prüfen, ob der Wert einen gültigen Wert hat, und ob sie existiert, gibt sie True zurück. Um eine solche Überprüfung durchzuführen, können wir das verwenden !! Der Bediener ist sehr bequem und einfach. Für Variablen können Sie eine Variable zur Erkennung verwenden. Solange der Wert der Variablen: 0, Null, "", undefined oder Nan lautet, gibt er falsche zurück, sonst gibt es wahr. Zum Beispiel das folgende Beispiel:

 Funktionskonto (Cash) {this.cash = Cash; this.hasmoney = !! bar;} var Account = neues Konto (100,50); console.log (Account.cash); // 100.50console.log (Account.hasmoney); // truevar leseAccount = neues Konto (0); console.log (leerAccount.cash); // 0console.log (leereAccount.hasmoney); // FALSCH

In diesem Beispiel, solange der Wert des Kontos größer als 0 ist, ist der von Konto zurückgegebene Wert. Hasmoney ist wahr.

Verwenden Sie +, um Strings in Zahlen umzuwandeln

Dieser Trick ist sehr nützlich. Es ist sehr einfach und kann durch Überschneiden von String -Daten in Zahlen umgewandelt werden. Es ist jedoch nur für Zeichenfolgendaten geeignet, andernfalls wird die NAN zurückgegeben, z. B. das folgende Beispiel:

 Funktion Tonumber (Strnumber) {return +strnumber;} console.log (tonumber ("1234"); // 1234Console.log (Tonumber ("ACB")); // nan

Dies funktioniert auch für das Datum, in diesem Fall wird eine Zeitstempelummer zurückgegeben:

 console.log (+neues Datum ()) // 1461288164385

und bedingt

Wenn Sie einen solchen Code haben:

 if (conctected) {login ();}

Sie können auch Variablen abkürzen und && sie zusammenfügen und zusammenordnen. Zum Beispiel kann das obige Beispiel wie folgt abgekürzt werden:

 conctected && login ();

Wenn in einem Objekt einige Eigenschaften oder Funktionen vorhanden sind, können Sie auch die Erkennung durchführen, wie im folgenden Code gezeigt:

 user && user.login ();

Verwenden Sie || Operator

Es gibt eine Standardparameterfunktion in ES6. Um diese Funktion in älteren Browsern zu simulieren, ist das || Der Bediener kann verwendet werden und der Standardwert wird als zweiter Parameter übergeben. Wenn der vom erste Parameter zurückgegebene Wert falsch ist, wird der zweite Wert als Standardwert angesehen. Wie im folgenden Beispiel:

 Funktion Benutzer (Name, Alter) {this.name = name || "Oliver Queen"; this.age = Alter || 27;} var user1 = new user (); console.log (user1.name); // Oliver Queenconsole.log (user1.age); // 27var user2 = neuer Benutzer ("Barry Allen", 25); console.log (user2.name); // Barry Allenconsole.log (user2.age); // 25

Cache Array.length in der Schleife

Dieser Trick ist sehr einfach, und dies hat einen sehr großen Einfluss auf die Leistung im Umgang mit einer großen Array -Schleife. Grundsätzlich wird jeder eine Reihe von synchronen Iterationen wie diesen schreiben:

 für (var i = 0; i <array.length; i ++) {console.log (Array [i]);}

Wenn es sich um ein kleines Array handelt, ist dies großartig. Wenn Sie mit einem großen Array zu tun haben, berechnen dieser Code die Array -Größe bei jeder Iteration neu, was zu einer Verzögerung führt. Um dieses Phänomen zu vermeiden, kann Array.length als Cache verwendet werden:

 var länge = array.length; für (var i = 0; i <länge; i ++) {console.log (Array [i]);}

Sie können es auch so schreiben:

 für (var i = 0, länge = array.length; i <länge; i ++) {console.log (Array [i]);}

Eigenschaften in Objekten erkennen

Dieser Trick ist nützlich, wenn Sie feststellen müssen, ob einige Eigenschaften existieren, und nicht definierte Funktionen oder Eigenschaften ausführen zu können. Wenn Sie vorhaben, einen cross-kompatiblen Browsercode anzupassen, können Sie diesen Tipp auch verwenden. Sie möchten beispielsweise document.querySelector () verwenden, um eine ID auszuwählen und sie mit IE6 -Browsern kompatibel zu machen, aber diese Funktion existiert nicht in IE6 -Browsern. Daher ist es sehr nützlich, diesen Bediener zu erkennen, ob diese Funktion existiert, z. B. das folgende Beispiel:

 if ('querySelector' in document) {document.querySelector ("#id");} else {document.getElementById ("id");}

In diesem Beispiel wird das Dokument aufgerufen, wenn die Funktion querySelector nicht im Dokument vorhanden ist.

Holen Sie sich das letzte Element im Array

Array.Prototype.slice (Beginn, Ende) wird verwendet, um die Array -Elemente zwischen Beginn und Ende zu erhalten. Wenn Sie den Endparameter nicht festlegen, wird der Standardlängenwert des Arrays als Endwert angesehen. Einige Schüler wissen jedoch möglicherweise nicht, dass diese Funktion auch negative Werte als Parameter akzeptieren kann. Wenn Sie einen negativen Wert als Wert von Beginn festlegen, können Sie das letzte Element des Arrays erhalten. wie:

 var array = [1,2,3,4,5,6]; console.log (array.slice (-1)); // [6] console.log (array.slice (-2)); // [5,6] console.log (array.slice (-3)); // [4,5,6]

Array -Kürzung

Dieser Trick wird hauptsächlich zur Sperrung der Größe des Arrays verwendet und ist sehr nützlich, wenn es verwendet wird, um einige Elemente im Array zu löschen. Zum Beispiel hat Ihr Array 10 Elemente, aber Sie möchten nur nur die ersten fünf Elemente haben, dann können Sie das Array mit Array abschneiden. Length = 5. Wie im folgenden Beispiel:

 var array = [1,2,3,4,5,6]; console.log (array.length); // 6Array.length = 3; console.log (array.length); // 3console.log (Array); // [1,2,3]

Alles ersetzen

Mit der Funktion String.Replace () können Sie Zeichenfolgen oder reguläre Ausdrücke zum Ersetzen von Zeichenfolgen verwenden. Diese Funktion selbst ersetzt nur die erste Zeichenfolge. Sie können jedoch in regulären Ausdrücken /g die Funktion ersendlich () verwenden:

 var String = "John John"; console.log (String.Replace (/hn/, "Ana")); // "Joana John" console.log (String.Replace (/hn/g, "ana")); // "Joana Joana"

Arrays zusammenführen

Wenn Sie zwei Arrays zusammenführen möchten, verwenden Sie normalerweise die Funktion von Array.concat ():

 var array1 = [1,2,3]; var array2 = [4,5,6]; console.log (array1.concat (array2)); // [1,2,3,4,5,6];

Diese Funktion ist dann nicht für die Zusammenführung von zwei großen Arrays geeignet, da sie viel Speicher zum Speichern neu erstellter Arrays verbraucht. In diesem Fall können Sie Array.pus () verwenden (arr1, arr2), um stattdessen ein neues Array zu erstellen. Diese Methode wird nicht zum Erstellen eines Neuarrays verwendet, sondern kombiniert nur die ersten und zweiten Zahlen, während die Speicherverwendung reduziert wird:

 var array1 = [1,2,3]; var array2 = [4,5,6]; console.log (Array1.push.Apply (Array1, Array2)); // [1,2,3,4,5,6];

Konvertieren Sie Nodelist in ein Array

Wenn Sie die Funktion des document.querySelectorall ("P") ausführen, kann es ein Array von DOM -Elementen zurückgeben, dh das Nodelist -Objekt. Dieses Objekt verfügt jedoch nicht über die Funktionsfunktionen von Arrays wie Sort (), Reduzierung (), MAP (), Filter () usw. Um diese nativen Array -Funktionsfunktionen für sie zu verwenden, muss die Knotenliste in ein Array konvertiert werden. Sie können [] .lice.call (Elemente) verwenden, um zu implementieren:

 var Elements = document.querySelectorAll ("P"); // nodelistvar arrayelements = [] .lice.call (Elemente); // Jetzt ist der Nodelist ein Arrayvar -Arrayelements = Array.from (Elemente); // Dies ist eine weitere Möglichkeit, Nodelist in Array zu konvertieren

Schrumpfung von Array -Elementen

Für das Mischen von Array -Elementen müssen keine externen Bibliotheken wie Lodash verwendet werden, sondern nur:

 var list = [1,2,3]; console.log (list.sort (function () {math.random () - 0.5})); // [2,1,3]

Zusammenfassen

Jetzt haben Sie einige nützliche JavaScript -Tipps gelernt. Ich hoffe, diese Tipps können Ihnen helfen, einige Probleme bei der Arbeit zu lösen, oder dieser Artikel wird Ihnen hilfreich sein. Wenn Sie einige hervorragende JavaScript -Tipps haben, teilen Sie sie uns bitte in den Kommentaren mit.

Die oben genannten 12 sehr praktischen JavaScript -Tipps [empfohlen] sind alle Inhalte, die ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.