JavaScript ist eine weltweit führende Programmiersprache, die für Webentwicklung, mobile App-Entwicklung (PhoneGap, Appcelerator), serverseitige Entwicklung (Node.js und Wakanda) und mehr verwendet werden kann. JavaScript ist auch die erste Sprache für viele Anfänger, die in die Programmierwelt einsteigen. Sie kann sowohl verwendet werden, um einfache Alert-Boxen im Browser anzuzeigen, als auch um Roboter über nodebot oder nodruino zu steuern. Entwickler, die gut strukturierten, leistungsstarken JavaScript-Code schreiben können, sind heute die begehrtesten Personen auf dem Arbeitsmarkt geworden.
In diesem Artikel teile ich einige JavaScript-Tipps, Tricks und bewährte Methoden. Mit wenigen Ausnahmen gelten sie sowohl für JavaScript-Engines in Browsern als auch für serverseitige JavaScript-Interpreter.
Der Beispielcode in diesem Artikel wurde auf der neuesten Version von Google Chrome 30 (V8 3.20.17.15) getestet.
1. Verwenden Sie immer bei der ersten Zuweisung einer Variablenvarkeyword
Wenn eine Variable zugewiesen wird, ohne deklariert zu werden, wird sie standardmäßig zu einer neuen globalen Variable. Versuchen Sie, die Verwendung globaler Variablen zu vermeiden.
2. Verwenden Sie===anstelle von==
==und!=Der Operator konvertiert bei Bedarf automatisch Datentypen. Aber===und!==nicht. Sie vergleichen sowohl den Wert als auch den Datentyp gleichzeitig, was sie auch [schneller] macht als==und!=, 0, false, NaN und leere Zeichenketten werden im booleschen Kontext alle als false ausgewertet
[10] === 10 // is false [10] == 10 // is true '10' == 10 // is true '10' === 10 // is false [] == 0 // is true [] === 0 // is false '' == false // is true but true == "a" is false '' === false // is false
3, undefined、null, 0, false, NaN und leere Zeichenketten werden im booleschen Kontext alle als false ausgewertet
4. Verwenden Sie Semikolons am Ende von Zeilen
Die Wahrheit über Semikolons in JavaScript5. Objektkonstruktoren verwenden。
5. Objektkonstruktoren verwenden
function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
var Saad = new Person("Saad", "Mousliki");
6. Seien Sie vorsichtig mittypeof、instanceofundcontructor
typeofgibt auch zurücktypeof null, die meisten Objekttypen (Array, Date usw.) geben ebenfalls zurückobject: interne Prototyp-Eigenschaft, kann durch Code überschrieben werdenobjectcontructor: JavaScript-Operator, durchsucht die Konstruktoren in der Prototypenkette und gibt zurück, wenn gefundeninstanceof, andernfalls gibt sie zurücktruefalse
var arr = ["a", "b", "c"]; typeof arr; // 返回 "object" arr instanceof Array // true arr.constructor(); //[]
7. Selbstaufrufende Funktionen verwenden
Die Funktion wird automatisch sofort nach der Erstellung ausgeführt, üblicherweise als selbstaufgerufene anonyme Funktion oder als sofort aufgerufener Funktionsausdruck (IIFE) bezeichnet. Das Format ist wie folgt:
(function(){
// 置于此处的代码将自动执行
})();
(function(a,b){
var result = a+b;
return result;
})(10,20)
8. Zufällig ein Element aus einem Array abrufen
var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119]; var randomItem = items[Math.floor(Math.random() * items.length)];
9. Eine Zufallszahl innerhalb eines angegebenen Bereichs erhalten
Diese Funktion ist besonders nützlich beim Generieren von Fake-Daten für Tests, wie etwa Gehaltszahlen innerhalb eines angegebenen Bereichs.
var x = Math.floor(Math.random() * (max - min + 1)) + min;
10. Ein Array mit Zahlen von 0 bis zu einem angegebenen Wert generieren
var numbersArray = [] , max = 100; for( var i=1; numbersArray.push(i++) < max;); // numbers = [1,2,3 ... 100]
11. Eine zufällige alphanumerische Zeichenkette generieren
function generateRandomAlphaNum(len) {
var rdmString = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
12. Die Reihenfolge eines numerischen Arrays mischen
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/* numbers 数组将类似于 [120, 5, 228, -215, 400, 458, -85411, 122205] */
Hier wird die in JavaScript integrierte Array-Sortierfunktion verwendet. Ein besserer Weg ist die Verwendung von speziellem Code (wie dem Fisher-Yates-Algorithmus). Siehe die Diskussion auf StackOverflowdiese Diskussion。
13. Leerzeichen aus einer Zeichenkette entfernen
Java, C#, PHP und andere Sprachen verfügen alle über dedizierte Funktionen zum Trimmen von Zeichenketten, aber JavaScript nicht. Sie können den folgenden Code verwenden, um fürStringdem Objekt einetrimFunktion verfolgen:
String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};
Neue JavaScript-Engines verfügen bereits übertrim()native Implementierungen von.
14. Arrays aneinander anhängen
var array1 = [12 , "foo" , {name "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 值为 [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */
15. Ein Objekt in ein Array umwandeln
var argArray = Array.prototype.slice.call(arguments);
16. Überprüfen, ob es eine Zahl ist
function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
17. Überprüfen, ob es ein Array ist
function isArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]' ;
}
Aber wenntoString()die Methode überschrieben wurde, funktioniert sie nicht. Sie können auch die folgende Methode verwenden:
Array.isArray(obj); // its a new Array method
Wenn im Browser keine Frames verwendet werden, können Sie auch verwendeninstanceof, aber wenn der Kontext zu komplex ist, kann es auch fehlschlagen.
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]
// myArray 的构造器已经丢失，instanceof 的结果将不正常
// 构造器是不能跨 frame 共享的
arr instanceof Array; // false
18. Maximal- und Minimalwerte in einem Array ermitteln
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; var maxInNumbers = Math.max.apply(Math, numbers); var minInNumbers = Math.min.apply(Math, numbers);
19. Ein Array leeren
var myArray = [12 , 222 , 1000 ]; myArray.length = 0; // myArray will be equal to [].
20. Nicht direkt aus dem Array löschendeleteoderremoveElemente
Wenn Sie direkt auf Array-Elemente anwendendelete, löscht es nicht wirklich, sondern setzt das Element aufundefined. Um Array-Elemente zu löschen, sollten Sie verwendensplice。
Niemals:
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 delete items[3]; // return true items.length; // return 11 /* items 结果为 [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
Stattdessen:
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 items.splice(3,1) ; items.length; // return 10 /* items 结果为 [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119]
Beim Löschen von Objekteigenschaften können Siedelete。
21. Verwenden Sielengthdie Eigenschaft zum Kürzen eines Arrays
Im vorherigen Beispiel hat die Verwendunglengthder Eigenschaft das Array geleert. Sie können sie auch verwenden, um das Array zu kürzen:
var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ]; myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].
Wenn Sie gleichzeitig dielengthEigenschaft vergrößern, wird die Länge des Arrays zunehmen, und es wirdundefinedverwenden, um sie als neue Elemente einzufügen.lengthist eine beschreibbare Eigenschaft.
myArray.length = 10; // the new array length is 10 myArray[myArray.length - 1] ; // undefined
22. Verwenden Sie logisches UND/ODER in Bedingungen
var foo = 10; foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();
Logisches ODER kann auch verwendet werden, um Standardwerte festzulegen, wie z. B. Standardwerte für Funktionsparameter.
function doSomething(arg1){
arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
}
23. Machen Siemap()Funktionsmethoden durchlaufen Daten
var squares = [1,2,3,4].map(function (val) {
return val * val;
});
// squares will be equal to [1, 4, 9, 16]
24. Eine bestimmte Anzahl von Dezimalstellen beibehalten
var num =2.443242342; num = num.toFixed(4); // num will be equal to 2.4432
Beachten Sie, dasstoFixec()Was zurückgegeben wird, ist eine Zeichenkette, keine Zahl.
25. Probleme bei Gleitkommaberechnungen
0.1 + 0.2 === 0.3 // is false 9007199254740992 + 1 // is equal to 9007199254740992 9007199254740992 + 2 // is equal to 9007199254740994
Warum? Weil 0.1+0.2 gleich 0.30000000000000004 ist. JavaScript-Zahlen werden nach dem IEEE 754-Standard erstellt und sind intern alle 64-Bit-Gleitkommadarstellungen. Einzelheiten finden Sie unterWie Zahlen in JavaScript kodiert werden.
Sie könnentoFixed()undtoPrecision()um dieses Problem zu lösen.
26. Objekteigenschaften mit einer for-in-Schleife prüfen
Die folgende Verwendung kann verhindern, dass die Iteration in die Prototyp-Eigenschaften des Objekts eindringt.
for (var name in object) {
if (object.hasOwnProperty(name)) {
// do something with name
}
}
27. Kommaoperator
var a = 0; var b = ( a++, 99 ); console.log(a); // a will be equal to 1 console.log(b); // b is equal to 99
28. Variablen vorübergehend für Berechnung und Nachschlagen speichern
In jQuery-Selektoren können Sie ganze DOM-Elemente vorübergehend speichern.
var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');
29. Eingehendes vorab prüfenisFinite()parameters
isFinite(0/0) ; // false
isFinite("foo"); // false
isFinite("10"); // true
isFinite(10); // true
isFinite(undefined); // false
isFinite(); // false
isFinite(null); // true，这点当特别注意
30. Vermeiden Sie die Verwendung negativer Zahlen als Indizes in Arrays
var numbersArray = [1,2,3,4,5];
var from = numbersArray.indexOf("foo") ; // from is equal to -1
numbersArray.splice(from,2); // will return [5]
Beachten Sie: Der übergebene Indexparametersplicedarf nicht negativ sein; wenn er negativ ist, werden Elemente vom Ende des Arrays gelöscht.
31. Verwenden Sie JSON für Serialisierung und Deserialisierung
var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson 结果为 "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString 的值与 person 对象相同 */
32. Verwenden Sie nichteval()oder Funktionskonstruktoren
eval()und der Funktionskonstruktor (FunctionKonstruktor) haben erheblichen Overhead; jedes Mal, wenn sie aufgerufen werden, muss die JavaScript-Engine den Quellcode in ausführbaren Code umwandeln.
var func1 = new Function(functionCode); var func2 = eval(functionCode);
33. Vermeiden Sie die Verwendung vonwith()
Verwendungwith()können Variablen zum globalen Gültigkeitsbereich hinzufügen; wenn es andere Variablen mit demselben Namen gibt, führt das zu Verwirrung und die Werte werden ebenfalls überschrieben.
34. Verwenden Sie for-in nicht für Arrays
Vermeiden:
var sum = 0;
for (var i in arrayNumbers) {
sum += arrayNumbers[i];
}
Stattdessen:
var sum = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
sum += arrayNumbers[i];
}
Ein weiterer Vorteil ist, dassiundlendie beiden Variablen sindforin der ersten Deklaration der Schleife, und beide werden nur einmal initialisiert, was schneller ist als der folgende Ansatz:
for (var i = 0; i < arrayNumbers.length; i++)
35. Übergeben ansetInterval()undsetTimeout()Verwende eine Funktion statt einer Zeichenkette, wenn
Wenn SiesetTimeout()undsetInterval()eine Zeichenkette, verwenden sie eine Methode ähnlich wieevalum sie umzuwandeln, was sicherlich langsamer ist, also verwende nicht:
setInterval('doSomethingPeriodically()', 1000);
setTimeout('doSomethingAfterFiveSeconds()', 5000);
Verwende stattdessen:
setInterval(doSomethingPeriodically, 1000); setTimeout(doSomethingAfterFiveSeconds, 5000);
36. Verwendeswitch/caseanstelle eines großen Stapels vonif/else
Wenn die Bedingung mehr als zwei Verzweigungen hat, verwendeswitch/casees ist schneller, eleganter und besser für die Codeorganisation. Wenn es jedoch mehr als 10 Verzweigungen gibt, verwenden Sie es natürlich nicht.switch/caseit.
37. Inswitch/caseverwenden Sie numerische Bereiche in
Tatsächlich,switch/casein dercaseBedingung, es kann auch so geschrieben werden:
function getCategory(age) {
var category = "";
switch (true) {
case isNaN(age):
category = "not an age";
break;
case (age >= 50):
category = "Old";
break;
case (age <= 20):
category = "Baby";
break;
default:
category = "Young";
break;
};
return category;
}
getCategory(5); // 将返回 "Baby"
38. Verwenden Sie ein Objekt als Prototyp eines anderen Objekts
Auf die folgende Weise kann ein gegebenes Objekt als Parameter übergeben werden, um ein neues Objekt mit ihm als Prototyp zu erstellen:
function clone(object) {
function OneShotConstructor(){};
OneShotConstructor.prototype = object;
return new OneShotConstructor();
}
clone(Array).prototype ; // []
39. HTML-Feldkonvertierungsfunktionen
function escapeHTML(text) {
var replacements= {"<": "<", ">": ">","&": "&", "\"": """};
return text.replace(/[<>&"]/g, function(character) {
return replacements[character];
});
}
40. Verwenden Sie try-catch-finally nicht innerhalb von Schleifen
In try-catch-finally weist der Catch-Teil die Ausnahme während der Ausführung einer Variablen zu, und diese Variable wird als neue Variable innerhalb des Laufzeitbereichs angelegt.
Vermeiden:
var object = ['foo', 'bar'], i;
for (i = 0, len = object.length; i <len; i++) {
try {
// do something that throws an exception
}
catch (e) {
// handle exception
}
}
Stattdessen:
var object = ['foo', 'bar'], i;
try {
for (i = 0, len = object.length; i <len; i++) {
// do something that throws an exception
}
}
catch (e) {
// handle exception
}
41. Achten Sie darauf, bei der Verwendung von XMLHttpRequests ein Timeout festzulegen
Wenn XMLHttpRequests ausgeführt werden und über einen längeren Zeitraum keine Antwort erhalten (z. B. wenn Netzwerkprobleme auftreten), sollte die Verbindung abgebrochen werden. Dies kann durchsetTimeout()um dies zu erreichen:
var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
clearTimeout(timeout);
// do something with response data
}
}
var timeout = setTimeout( function () {
xhr.abort(); // call error callback
}, 60*1000 /* timeout after a minute */ );
xhr.open('GET', url, true);
xhr.send();
Beachten Sie außerdem, dass Sie nicht mehrere XMLHttpRequests gleichzeitig starten sollten.
42. WebSocket-Timeouts behandeln
Normalerweise wird, nachdem eine WebSocket-Verbindung hergestellt wurde, die Verbindung vom Server wegen Zeitüberschreitung beendet, wenn 30 Sekunden lang keine Aktivität stattfindet, und Firewalls können ebenfalls Verbindungen wegen Zeitüberschreitung trennen, die innerhalb einer Zeiteinheit keine Aktivität aufweisen.
Um dies zu verhindern, können Sie in regelmäßigen Abständen eine leere Nachricht an den Server senden. Dies kann mit den folgenden zwei Funktionen erreicht werden: eine, um die Verbindung am Leben zu erhalten, und die andere speziell, um diesen Zustand zu beenden.
var timerID = 0;
function keepAlive() {
var timeout = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout(keepAlive, timeout);
}
function cancelKeepAlive() {
if (timerId) {
cancelTimeout(timerId);
}
}
keepAlive()Die Funktion kann am Ende der WebSocket-Verbindung platziert werdenonOpen()Methode,cancelKeepAlive()und an dasonClose()äußerste Ende der Methode gesetzt werden.
43. Beachten Sie stets, dass primitive Operatoren schneller als Funktionsaufrufe sind; verwenden Sie VanillaJS
Zum Beispiel sollten Sie dies im Allgemeinen nicht tun:
var min = Math.min(a,b); A.push(v);
Sie können es durch Folgendes ersetzen:
var min = a < b ? a : b; A[A.length] = v;
44. Achten Sie während der Entwicklung auf die Codestruktur und prüfen und komprimieren Sie den JavaScript-Code vor dem Livegang
Vergessen Sie nicht, beim Schreiben von Code einen Code-Beautifier zu verwenden. Verwenden Sie JSLint (ein Werkzeug zur Syntaxprüfung) und minifizieren Sie den Code vor dem Livegang (zum Beispiel mit JSMin). Hinweis: UglifyJS wird inzwischen allgemein für die Code-Minifizierung empfohlen (https://github.com/mishoo/UglifyJS2)
45. JavaScript ist umfangreich und tiefgründig; hier sind einige gute Lernressourcen
- Code Academy-Ressource: http://www.codecademy.com/tracks/javascript
- Von Marijn Haverbeke geschriebenEloquent JavaScript：http://eloquentjavascript.net/
- Von John Resig geschriebenAdvanced JavaScript：http://ejohn.org/apps/learn/
Quelle: http://www.codeceo.com/article/javascript-45-tips.html