Wie Sie wissen, ist JavaScript die Programmiersprache Nummer eins auf der Welt, es ist die Sprache des Webs, es ist die Sprache mobiler Hybrid-Apps (wie PhoneGap oder Appcelerator), es ist die Sprache der Serverseite (wie NodeJS oder Wakanda). Und es gibt viele andere Implementierungen. Gleichzeitig ist es für viele Anfänger auch eine Aufklärungssprache, da es nicht nur eine einfache Warnmeldung im Browser anzeigen kann, sondern auch zur Steuerung eines Roboters (mit Nodebot oder Nodruino) verwendet werden kann. Entwickler, die JavaScript beherrschen und organisierten, standardisierten und leistungseffizienten Code schreiben können, sind auf dem Talentmarkt gefragt.
Es ist zu beachten, dass die Codeausschnitte in diesem Artikel auf dem neuesten Google Chrome (Version 30) getestet wurden, das die V8-JavaScript-Engine (V8 3.20.17.15) verwendet.
1 Vergessen Sie nicht, das Schlüsselwort var zu verwenden, wenn Sie einer Variablen zum ersten Mal einen Wert zuweisen
Das Zuweisen eines Werts zu einer undefinierten Variablen führt zur Erstellung einer globalen Variablen. Vermeiden Sie globale Variablen.
2 Verwenden Sie === anstelle von ==
Der Operator == (oder !=) führt bei Bedarf automatisch Typkonvertierungen durch. Die Operation === (oder !==) führt keine Konvertierung durch. Es vergleicht Werte und Typen und gilt auch als schneller als ==.
Kopieren Sie den Codecode wie folgt:
[10] === 10 // ist falsch
[10] == 10 // ist wahr
'10' == 10 // ist wahr
'10' === 10 // ist falsch
[] == 0 // ist wahr
[] === 0 // ist falsch
'' == false // ist wahr, aber true == "a" ist falsch
'' === false // ist falsch
3 Verwenden Sie Abschlüsse, um private Variablen zu implementieren
Kopieren Sie den Codecode wie folgt:
Funktion Person(Name, Alter) {
this.getName = function() { return name };
this.setName = function(newName) { name = newName };
this.getAge = function() { return age };
this.setAge = function(newAge) { age = newAge };
//Eigenschaften wurden im Konstruktor nicht initialisiert
var Beruf;
this.getOccupation = function() { return Besetzung };
this.setOccupation = function(newOcc) { Besetzung =
newOcc; };
}
4 Verwenden Sie am Ende einer Anweisung ein Semikolon
Es empfiehlt sich, am Ende einer Anweisung ein Semikolon zu verwenden. Sie werden nicht gewarnt, wenn Sie vergessen, es zu schreiben, da der JavaScript-Interpreter in den meisten Fällen das Semikolon für Sie hinzufügt.
5 Erstellen Sie den Konstruktor des Objekts
Kopieren Sie den Code. Der Code lautet wie folgt: function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
var Saad = neue Person("Saad", "Mousliki");
6 Verwenden Sie Typ, Instanz und Konstruktor sorgfältig
Kopieren Sie den Code wie folgt: var arr = ["a", "b", "c"];
typeof arr; // „Objekt“ zurückgeben
arr-Instanz des Arrays // wahr
arr.constructor(); //[]
7 Erstellen Sie eine selbstaufrufende Funktion (selbstaufrufende Funktion)
Dies wird oft als selbstaufgerufene anonyme Funktion oder als IIFE-sofort aufgerufener Funktionsausdruck bezeichnet. Dies ist eine Funktion, die sofort nach der Erstellung automatisch ausgeführt wird, normalerweise wie folgt:
Kopieren Sie den Codecode wie folgt:
(Funktion(){
// etwas privater Code, der automatisch ausgeführt wird
})();
(Funktion(a,b){
var result = a+b;
Ergebnis zurückgeben;
})(10,20)
8- Holen Sie sich ein zufälliges Element aus einem Array
Der Kopiercode lautet wie folgt: var items = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];
var randomItem = items[Math.floor(Math.random() * items.length)];[code]
9 Holen Sie sich eine Zufallszahl innerhalb eines bestimmten Bereichs
Dieses Code-Snippet ist nützlich, wenn Sie Testdaten generieren möchten, beispielsweise einen zufälligen Gehaltswert zwischen einem Mindest- und Höchstwert.
[code]var x = Math.floor(Math.random() * (max - min + 1)) + min;
10 Erzeugen Sie ein Array mit Zahlen zwischen 0 und dem festgelegten Maximalwert
Kopieren Sie den Code wie folgt: var zahlenArray = [], max = 100;
for( var i=1; zahlenArray.push(i++) < max;); // zahlen = [0,1,2,3 ... 100]
11 Generieren Sie eine zufällige alphanumerische Zeichenfolge
Kopieren Sie den Code. Der Code lautet wie folgt: function genericRandomAlphaNum(len) {
var rdmstring = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
12 Verschlüsseln Sie eine Reihe von Zahlen
Der Kopiercode lautet wie folgt: var number = [5, 458, 120, -215, 228, 400, 122205, -85411];
zahlen = zahlen.sort(function(){ return Math.random() - 0.5});
/* Die Array-Nummern sind beispielsweise gleich [120, 5, 228, -215, 400, 458, -85411, 122205] */
13 Saitentrimmfunktion
Es gibt eine klassische Trimmfunktion in Java, C#, PHP und vielen anderen Sprachen, die zum Entfernen von Leerzeichen in Strings verwendet wird, aber in JavaScript existiert sie nicht, daher müssen wir diese Funktion dem String-Objekt hinzufügen.
Kopieren Sie den Codecode wie folgt:
String.prototype.trim = function(){return this.replace(/^/s+|/s+$/g, "");};//Entfernen Sie die führenden und nachgestellten Leerzeichen der Zeichenfolge, mit Ausnahme der internen Leerzeichen von Zeichenfolge
14 Hängen Sie ein Array an ein anderes Array an
Kopieren Sie den Code wie folgt: var array1 = [12, "foo", {name: "Joe"}, -2458];
var array2 = ["Doe", 555, 100];
Array.prototype.push.apply(array1, array2);
/* array1 ist gleich [12, „foo“, {name „Joe“}, -2458, „Doe“, 555, 100] */
// Tatsächlich kann Concat zwei Arrays direkt verbinden, sein Rückgabewert ist jedoch ein neues Array. Hier ist der direkte Wechsel zu array1
15 Konvertieren Sie das Argumentobjekt in ein Array
Kopieren Sie den Code wie folgt: var argArray = Array.prototype.slice.call(arguments);
Das Argumentobjekt ist ein Array-ähnliches Objekt, aber kein echtes Array
16 Überprüfen Sie, ob der Parameter eine Zahl (Zahl) ist.
Kopieren Sie den Code. Der Code lautet wie folgt: function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
17 Überprüfen Sie, ob der Parameter ein Array ist
Kopieren Sie den Code wie folgt: function isArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]' ;
}
Hinweis: Wenn die toString()-Methode überschrieben wird, erhalten Sie mit dieser Technik nicht die gewünschten Ergebnisse. Oder Sie können Folgendes verwenden:
Kopieren Sie den Codecode wie folgt:
Array.isArray(obj); // Dies ist eine neue Array-Methode
Wenn Sie nicht mehrere Frames verwenden, können Sie auch die Methode „instanceof“ verwenden. Wenn Sie jedoch mehrere Kontexte haben, erhalten Sie falsche Ergebnisse.
Kopieren Sie den Code wie folgt: var myFrame = document.createElement('iframe');
document.body.appendChild(myFrame);
var myArray = window.frames[window.frames.length-1].Array;
var arr = new myArray(a,b,10); // [a,b,10]
// Instanz von funktioniert nicht korrekt, myArray verliert seinen Konstruktor
// Konstruktor wird nicht von Frames gemeinsam genutzt
arr-Instanz von Array; // false
18 Ermitteln Sie den Maximal- oder Minimalwert in einem Zahlenarray
Der Kopiercode lautet wie folgt: var number = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Math, Zahlen);
var minInNumbers = Math.min.apply(Math, Zahlen);
//Anmerkung des Übersetzers: Die Methode function.prototype.apply wird hier zum Übergeben von Parametern verwendet.
19 Ein Array löschen
Kopieren Sie den Code wie folgt: var myArray = [12, 222, 1000];
myArray.length = 0; // myArray ist gleich [].
20 Verwenden Sie delete nicht, um Elemente aus einem Array zu entfernen.
Verwenden Sie splice anstelle von delete, um ein Element aus einem Array zu löschen. Durch die Verwendung von delete wird nur das ursprüngliche Element durch undefiniert ersetzt und nicht tatsächlich aus dem Array gelöscht.
Verwenden Sie dies nicht:
Kopieren Sie den Code wie folgt: var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
items.length; // return 11
Elemente löschen[3]; // true zurückgeben
items.length; // return 11
/* Elemente sind gleich [12, 548, „a“, undefiniert × 1, 5478, „foo“, 8852, undefiniert × 1, „Doe“, 2154, 119] */
Verwenden Sie stattdessen:
Kopieren Sie den Code wie folgt: var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
items.length; // return 11
items.splice(3,1);
items.length; // 10 zurückgeben
/* Elemente sind gleich [12, 548, „a“, 5478, „foo“, 8852, undefiniert × 1, „Doe“, 2154, 119] */
Die Methode delete sollte verwendet werden, um eine Eigenschaft eines Objekts zu löschen.
21 Verwenden Sie die Länge, um ein Array abzuschneiden
Ähnlich wie oben beim Löschen des Arrays verwenden wir die Längeneigenschaft, um ein Array zu kürzen.
Kopieren Sie den Code wie folgt: var myArray = [12, 222, 1000, 124, 98, 10];
myArray.length = 4; // myArray ist gleich [12, 222, 1000, 124].
Wenn Sie außerdem die Länge eines Arrays auf einen Wert festlegen, der größer als der aktuelle Wert ist, wird die Länge des Arrays geändert und zum Ausgleich werden neue undefinierte Elemente hinzugefügt. Die Länge eines Arrays ist keine schreibgeschützte Eigenschaft.
Kopieren Sie den Code wie folgt: myArray.length = 10; // die neue Array-Länge beträgt 10
myArray[myArray.length - 1]; // undefiniert
22 Verwenden Sie logisches UND/ODER, um bedingte Urteile zu fällen
Kopieren Sie den Codecode wie folgt:
var foo = 10;
foo == 10 && doSomething(); // Entspricht if (foo == 10) doSomething();
foo == 5 ||. doSomething(); // Äquivalent zu if (foo != 5) doSomething();
Logisches UND kann auch verwendet werden, um Standardwerte für Funktionsparameter festzulegen
Kopieren Sie den Codecode wie folgt:
Funktion doSomething(arg1){
Arg1 = arg1 ||. 10; // Wenn arg1 nicht gesetzt ist, wird Arg1 standardmäßig auf 10 gesetzt
}
23 Verwenden Sie die Methode „map()“, um die Elemente in einem Array zu durchlaufen
Kopieren Sie den Code. Der Code lautet wie folgt: var quadrate = [1,2,3,4].map(function (val) {
Rückgabewert * Wert;
});
// Quadrate sind gleich [1, 4, 9, 16]
24 Rundet eine Zahl auf N Dezimalstellen
Kopieren Sie den Code wie folgt: var num =2.443242342;
num = num.toFixed(4); // num wird gleich 2,4432 sein
25 Gleitkommaproblem
Kopieren Sie den Code wie folgt: 0,1 + 0,2 === 0,3 // ist falsch
9007199254740992 + 1 // ist gleich 9007199254740992
9007199254740992 + 2 // ist gleich 9007199254740994
Warum passiert das? 0,1+0,2 entspricht 0,30000000000000004. Sie müssen wissen, dass alle JavaScript-Zahlen intern als Gleitkommazahlen in 64-Bit-Binärform dargestellt werden und dem IEEE 754-Standard entsprechen. Für eine weitere Einführung können Sie diesen Blogbeitrag lesen. Sie können dieses Problem mit den Methoden toFixed() und toPrecision() lösen.
26 Achten Sie bei der Verwendung von for-in zum Durchlaufen der internen Eigenschaften eines Objekts auf die Überprüfung der Eigenschaften.
Der folgende Codeausschnitt vermeidet den Zugriff auf Prototypeigenschaften, wenn die Eigenschaften eines Objekts durchlaufen werden:
Kopieren Sie den Codecode wie folgt:
for (Var-Name im Objekt) {
if (object.hasOwnProperty(name)) {
// etwas mit dem Namen machen
}
}
27 Komma-Operator
Kopieren Sie den Codecode wie folgt:
var a = 0;
var b = ( a++, 99 );
console.log(a); // a wird gleich 1 sein
console.log(b); // b ist gleich 99
28 Zwischenspeichern von Variablen, die berechnet oder abgefragt werden müssen
Für jQuery-Selektoren sollten wir diese DOM-Elemente besser zwischenspeichern.
Kopieren Sie den Code wie folgt: var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');
29 Parameter vor dem Aufruf von isFinite() validieren
Kopieren Sie den Code wie folgt: isFinite(0/0); // false
isFinite("foo"); // false
isFinite("10"); // true
isFinite(10); // true
isFinite(undefiniert); // false
isFinite(); // false
isFinite(null); // wahr !!!
30 Vermeiden Sie negative Indizes in Arrays
Kopieren Sie den Code wie folgt: var zahlenArray = [1,2,3,4,5];
var from = zahlenArray.indexOf("foo") ; // from ist gleich -1
zahlenArray.splice(from,2); // gibt [5] zurück
Stellen Sie sicher, dass der Parameter beim Aufruf von indexOf nicht negativ ist.
31 JSON-basierte Serialisierung und Deserialisierung (Serialisierung und Deserialisierung)
Kopieren Sie den Code wie folgt: var person = {name:'Saad', Alter: 26, Abteilung: {ID: 15, Name: "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson ist gleich „{“name“: „Saad“, „age“:26, „department“:{“ID“:15, „name“: „R&D“}}“ */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString ist gleich dem Personenobjekt */
32 Vermeiden Sie die Verwendung von eval()- und Funktionskonstruktoren
Die Verwendung von Eval- und Funktionskonstruktoren ist ein sehr kostspieliger Vorgang, da sie jedes Mal die Skript-Engine aufrufen, um den Quellcode in ausführbaren Code umzuwandeln.
Kopieren Sie den Code wie folgt: var func1 = new Function(functionCode);
var func2 = eval(functionCode);
33 Vermeiden Sie die Verwendung von with()
Durch die Verwendung von with() wird eine globale Variable eingefügt. Daher werden die Werte von Variablen mit demselben Namen überschrieben und verursachen unnötige Probleme.
34 Vermeiden Sie die Verwendung von for-in zum Durchlaufen eines Arrays
Vermeiden Sie Methoden wie diese:
Kopieren Sie den Code wie folgt: var sum = 0;
for (var i in arrayNumbers) {
sum += arrayNumbers[i];
}
Ein besserer Weg ist:
Kopieren Sie den Code wie folgt: var sum = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
sum += arrayNumbers[i];
}
Der zusätzliche Vorteil besteht darin, dass die Werte der beiden Variablen i und len nur einmal ausgeführt werden, was effizienter ist als die folgende Methode:
Kopieren Sie den Code wie folgt: for (var i = 0; i < arrayNumbers.length; i++)
Warum? Weil arrayNumbers.length bei jeder Schleife berechnet wird.
35 Übergeben Sie beim Aufruf von setTimeout() und setInterval() Funktionen anstelle von Strings.
Wenn Sie eine Zeichenfolge an setTimeout() oder setInterval() übergeben, wird die Zeichenfolge so analysiert, als ob eval verwendet würde, was sehr zeitaufwändig ist.
Nicht verwenden:
Kopieren Sie den Codecode wie folgt:
setInterval('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000)
Verwenden Sie stattdessen:
Kopieren Sie den Codecode wie folgt:
setInterval(doSomethingPeriodically, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);
36 Verwenden Sie switch/case-Anweisungen anstelle langer if/else-Anweisungen
Bei der Beurteilung von mehr als zwei Situationen ist die Verwendung von switch/case effizienter und eleganter (einfacher Code zu organisieren). Verwenden Sie „switch/case“ jedoch nicht, wenn mehr als 10 Situationen zu beurteilen sind.
37 Verwenden Sie Schalter/Gehäuse, wenn Sie den Zahlenbereich beurteilen
In der folgenden Situation ist es sinnvoll, switch/case zur Bestimmung des Wertebereichs zu verwenden:
Kopieren Sie den Codecode wie folgt:
Funktion getCategory(age) {
var-Kategorie = "";
switch (wahr) {
Fall istNaN(Alter):
Kategorie = „kein Alter“;
brechen;
Fall (Alter >= 50):
Kategorie = „Alt“;
brechen;
Fall (Alter <= 20):
Kategorie = „Baby“;
brechen;
Standard:
Kategorie = „Jung“;
brechen;
};
Rückgabekategorie;
}
getCategory(5); // gibt „Baby“ zurück
//Im Allgemeinen ist es zur Beurteilung des Zahlenbereichs besser geeignet, if/else zu verwenden. Schalter/Gehäuse eignet sich besser zur Beurteilung bestimmter Werte
38 Geben Sie das Prototypobjekt für das erstellte Objekt an
Es ist möglich, eine Funktion zu schreiben, die ein Objekt mit angegebenen Parametern als Prototyp erstellt:
Kopieren Sie den Code wie folgt: function clone(object) {
function OneShotConstructor(){};
OneShotConstructor.prototype= object;
return new OneShotConstructor();
}
clone(Array).prototype; // []
39 Eine HTML-Escape-Funktion
Kopieren Sie den Code wie folgt: function escapeHTML(text) {
var replacements= {"<": "<", ">": ">", "&": "&", "/"": """};
return text.replace(/[<>&"]/g, function(character) {
return replacements[character];
});
}
40 Vermeiden Sie die Verwendung von try-catch-finally innerhalb einer Schleife
Zur Laufzeit wird jedes Mal, wenn die Catch-Klausel ausgeführt wird, das abgefangene Ausnahmeobjekt einer Variablen zugewiesen, und in der Try-Catch-finally-Struktur wird diese Variable jedes Mal erstellt.
Vermeiden Sie es, so zu schreiben:
Kopieren Sie den Code wie folgt: var object = ['foo', 'bar'], i;
for (i = 0, len = object.length; i <len; i++) {
versuchen {
// etwas tun, das eine Ausnahme auslöst
}
fangen (e) {
//Ausnahme behandeln
}
}
Verwenden Sie stattdessen:
Kopieren Sie den Code wie folgt: var object = ['foo', 'bar'], i;
versuchen {
for (i = 0, len = object.length; i <len; i++) {
// etwas tun, das eine Ausnahme auslöst
}
}
fangen (e) {
//Ausnahme behandeln
}
41 Timeout für XMLHttpRequests festlegen.
Nachdem eine XHR-Anfrage lange dauert (z. B. aufgrund von Netzwerkproblemen), müssen Sie die Anfrage möglicherweise abbrechen. Anschließend können Sie setTimeout() mit dem XHR-Aufruf verwenden.
Kopieren Sie den Code wie folgt: var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
clearTimeout(timeout);
// etwas mit Antwortdaten machen
}
}
var timeout = setTimeout( function () {
xhr.abort(); // Fehlerrückruf aufrufen
}, 60*1000 /* Timeout nach einer Minute */ );
xhr.open('GET', url, true);
xhr.send();
Darüber hinaus sollten Sie synchrone Ajax-Anfragen im Allgemeinen vollständig vermeiden.
42 Umgang mit WebSocket-Timeouts
Normalerweise unterbricht der Server Ihre Verbindung nach dem Erstellen einer WebSocket-Verbindung nach 30 Sekunden, wenn Sie inaktiv sind. Firewalls trennen sich auch nach einer gewissen Zeit der Inaktivität.
Um Zeitüberschreitungsprobleme zu vermeiden, müssen Sie möglicherweise gelegentlich leere Nachrichten an den Server senden. Dazu können Sie Ihrem Code die folgenden zwei Funktionen hinzufügen: eine zum Aufrechterhalten der Verbindung und eine zum Aufheben des Verbindungshaltens. Mit dieser Technik können Sie das Timeout-Problem kontrollieren.
Verwenden Sie eine Timer-ID:
Kopieren Sie den Code wie folgt: var timerID = 0;
Funktion keepAlive() {
var timeout = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout(keepAlive, timeout);
}
Funktion cancelKeepAlive() {
if (timerId) {
cancelTimeout(timerId);
}
}
Die keepAlive()-Methode sollte am Ende der onOpen()-Methode der webSocket-Verbindung hinzugefügt werden, und cancelKeepAlive() wird am Ende der onClose()-Methode hinzugefügt.
43 Bedenken Sie, dass primitive Operatoren immer effizienter sind als Funktionsaufrufe. Verwenden Sie VanillaJS.
Verwenden Sie beispielsweise nicht:
Kopieren Sie den Code. Der Code lautet wie folgt: var min = Math.min(a,b);
A.push(v);
Verwenden Sie stattdessen:
Kopieren Sie den Code wie folgt: var min = a < b ? ab;
A[A.length] = v;
44 Vergessen Sie nicht, beim Codieren Code-Aufräumwerkzeuge zu verwenden . Verwenden Sie JSLint und Codekomprimierungstools (Minifizierung) (z. B. JSMin), bevor Sie online gehen. „Zeitsparendes Tool: Code-Verschönerungs- und Formatierungstool“
45 JavaScript ist unglaublich.
Zusammenfassen
Ich weiß, dass es noch viele weitere Tipps, Tricks und Best Practices gibt. Wenn Sie also noch etwas hinzufügen möchten oder Feedback oder Korrekturen zu den von mir geteilten haben, lassen Sie es mich bitte in den Kommentaren wissen.