JavaScript-Beste-Praktiken

请避免全局变量、new、===、eval()

避免全局变量

请尽量少地使用全局变量。

它包括所有的数据类型、对象和函数。

全局变量和函数可被其他脚本覆盖。

请使用局部变量替代，并学习如何使用闭包。

始终声明局部变量

所有在函数中使用的变量应该被声明为局部变量。

局部变量必须通过 var 使用关键词声明，否则它们将变成全局变量。

严格模式不允许未声明的变量。

在顶部声明

一项好的编码习惯是将所有声明放在每段脚本或函数的顶部。

Der Vorteil davon ist:

  • 获得更整洁的代码
  • 提供了查找局部变量的好位置
  • 更容易避免不需要的全局变量
  • 减少不必要的重新声明的可能性
// 在顶部声明
var firstName, lastName, price, discount, fullPrice;
// 稍后使用
firstName = "Bill";
lastName = "Gates";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;

也可以用于循环变量：

// 在顶部声明
var i;
// 稍后使用
for (i = 0; i < 5; i++)  {

默认情况下，JavaScript 会将所有声明移至顶部（JavaScript hoisting）。

初始化变量

Die Initialisierung von Variablen bei ihrer Erklärung ist eine gute Angewohnheit.

Der Vorteil davon ist:

  • Klarerer Code
  • Initialisieren Sie Variablen an separaten Positionen
  • Vermeiden Sie undefinierte Werte
// Erklärung und Initialisierung am Anfang durchführen
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

Variable Initialisierung ermöglicht es uns, den erwarteten Gebrauch und den erwarteten Datentyp zu verstehen.

Erklären Sie keine numerischen, zeichenfolgen oder booleschen Objekte

Seien Sie immer数值、Zeichenfolgen oder boolesche Werte als ursprüngliche Werte und nicht als Objekte.

Wenn Sie diese Typdeklarationen als Objekte verwenden, kann dies die Ausführungszeit verlangsamen und lästige Nebenwirkungen verursachen:

Beispiel

var x = "Bill";             
var y = new String("Bill");
(x === y) // Das Ergebnis ist false, weil x ein String ist und y ein Objekt.

Probieren Sie es selbst aus

oder noch schlimmer:

Beispiel

var x = new String("Bill");             
var y = new String("Bill");
(x == y) // Das Ergebnis ist false, weil Sie Objekte nicht vergleichen können.

Probieren Sie es selbst aus

Verwenden Sie nicht new Object()

  • Verwenden Sie {} anstelle von new Object()
  • Verwenden Sie "" anstelle von new String()
  • Verwenden Sie 0 anstelle von new Number()
  • Verwenden Sie false anstelle von new Boolean()
  • Verwenden Sie [] anstelle von new Array()
  • Verwenden Sie /()/ anstelle von new RegExp()
  • Verwenden Sie function (){} anstelle von new Function()

Beispiel

var x1 = {};           // Neues Objekt
var x2 = "";           // Neuer ursprünglicher Zeichenfolgenwert
var x3 = 0;            // Neuer ursprünglicher numerischer Wert
var x4 = false;        // Neuer ursprünglicher boolescher Wert
var x5 = [];           // Neues Arrayobjekt
var x6 = /()/;         // Neues reguläres Ausdrucksobjekt
var x7 = function(){}; // Neuer Funktionselement

Probieren Sie es selbst aus

seien Sie sich bewusst von automatischen Typumwandlungen

Seien Sie sich bewusst, dass Werte unerwartet in Zeichenfolgen umgewandelt werden können oder NaN(Not a Number).

JavaScript ist eine lose Typenprägung. Variablen können verschiedene Datentypen enthalten und können ihren Datentyp ändern:

Beispiel

var x = "Hello";     // typeof x ist String
x = 5;               // ändern Sie typeof x in numerisch

Probieren Sie es selbst aus

Wenn mathematische Operationen durchgeführt werden, kann JavaScript numerische Werte in Strings umwandeln:

Beispiel

var x = 5 + 7;       // x.valueOf() ist 12, typeof x ist numerisch
var x = 5 + "7";     // x.valueOf() ist 57, typeof x ist String
var x = "5" + 7;     // x.valueOf() ist 57, typeof x ist String
var x = 5 - 7;       // x.valueOf() ist -2, typeof x ist numerisch
var x = 5 - "7";     // x.valueOf() ist -2, typeof x ist numerisch
var x = "5" - 7;     // x.valueOf() ist -2, typeof x ist numerisch
var x = 5 - "x";     // x.valueOf() ist NaN, typeof x ist numerisch

Probieren Sie es selbst aus

Wenn Sie Strings voneinander subtrahieren, wird kein Fehler aufgetreten, sondern NaN（Not a Number）：

Beispiel

"Hello" - "Dolly"    // gibt NaN zurück

Probieren Sie es selbst aus

Verwenden Sie === zum Vergleichen

== Die Vergleichsoperatoren führen immer eine Typumwandlung durch, bevor sie verglichen werden (um die Typen zu matchen).

=== Der Operator führt eine erzwingende Vergleich der Werte und Typen durch:

Beispiel

0 == "";        // true
1 == "1";       // true
1 == true;      // true
0 === "";       // false
1 === "1";      // false
1 === true;     // false

Probieren Sie es selbst aus

Verwenden Sie Parameter-Standardwerte

Wenn ein Parameter bei der Aufrufung der Funktion fehlt, wird der Wert dieses fehlenden Parameters auf undefined。

undefined Der Wert könnte Ihren Code zerstören. Es ist eine gute Gewohnheit, Standardwerte für Parameter zu setzen.

Beispiel

function myFunction(x, y) {
    if (y === undefined) {
        y = 0;
    }
}

Probieren Sie es selbst aus

Bitte lesen SieFunktionseigenschaftenDieses Kapitel weiter lesen, um mehr über Funktionseigenschaften zu erfahren.

Verwenden Sie default, um den switch abzuschließen

Verwenden Sie Standard um Ihre switch Anweisungen. Selbst wenn Sie glauben, dass dies nicht erforderlich ist.

Beispiel

switch (new Date().getDay()) {
    Fall 0:
        day = "Sonntag";
        break;
    Fall 1:
        day = "Montag";
         break;
    Fall 2:
        day = "Dienstag";
         break;
    Fall 3:
        day = "Mittwoch";
         break;
    Fall 4:
        day = "Donnerstag";
         break;
    Fall 5:
        day = "Freitag";
         break;
    Fall 6:
        day = "Samstag";
         break;
    Standard:
        day = "Unbekannt";
}

Probieren Sie es selbst aus

Vermeiden Sie die Verwendung von eval()

eval() Funktionen dienen dazu, Text als Code zuzulassen. In fast allen Fällen ist dies nicht erforderlich.

Da es erlaubt ist, beliebigen Code auszuführen, bedeutet das gleichzeitig auch Sicherheitsprobleme.