Częste błędy w JavaScript

Rozdział ten omawia kilka powszechnych błędów JavaScript.

niespodziewane użycie operatora przypisania

Jeśli programista używa if Niespodziewane użycie operatora przypisania w=）zamiast operatora porównania (====）， program JavaScript może generować niektóre nieprzewidywalne wyniki.

To if Zdanie zwraca false（jak można się spodziewać）， ponieważ x nie jest równe 10:

var x = 0;
if (x == 10)

Spróbuj sam

To if Zdanie zwraca true（może nie tak, jak można się spodziewać）， ponieważ 10 jest prawdą:

var x = 0;
if (x = 10)

Spróbuj sam

To if Zdanie zwraca false（może nie tak, jak można się spodziewać）， ponieważ 0 jest fałszem:

var x = 0;
if (x = 0)

Spróbuj sam

Przypisanie zawsze zwraca wartość przypisania.

Oczekiwane rozluźnione porównanie

W tradycyjnym porównaniu typ danych nie jest ważny. To if Zdanie zwraca true:

var x = 10;
var y = "10";
if (x == y)

Spróbuj sam

W rygorystycznym porównaniu typ danych jest rzeczywiście ważny. To if Zdanie zwraca false:

var x = 10;
var y = "10";
if (x === y)

Spróbuj sam

Jednym z powszechnych błędów jest zapomnienie o switch Zdanie używa rygorystycznego porównania:

To switch Zdanie wyświetli okno dialogowe:

var x = 10;
switch(x) {
    case 10: alert("Hello");
}

Spróbuj sam

To switch Zdanie nie wyświetli okna dialogowego:

var x = 10;
switch(x) {
    case "10": alert("Hello");
}

Spróbuj sam

Zdezorientujące dodawanie i kaskadowość

Dodaćdo dodawaniaLiczby。

Kaskadowe (Concatenation)do dodawaniaCiąg znaków。

W JavaScript oba operatory są używane w ten sam sposób + Operator.

Dlatego dodawanie liczb jako liczb do dodawania liczb jako ciągów znaków generuje różne wyniki:

var x = 10 + 5;          // wynik w x wynosi 15
var x = 10 + "5";         // wynik w x wynosi "105"

Spróbuj sam

Jeśli dodajemy dwie zmienne, trudno przewidzieć wynik:

var x = 10;
var y = 5;
var z = x + y;            // wynik w z wynosi 15
var x = 10;
var y = "5";
var z = x + y;            // wynik w z wynosi "105"

Spróbuj sam

Zrozumiałe liczby zmiennoprzestrzenne

W JavaScript liczby są zawsze przechowywane jako 64-bitoweLiczby zmiennoprzestrzenne (Floats)。

Wszystkie języki programowania, w tym JavaScript, mają trudności z obsługą wartości zmiennoprzestrzennych:

var x = 0.1;
var y = 0.2;
var z = x + y             // wynik w z nie będzie 0.3

Spróbuj sam

Aby rozwiązać powyższy problem, użyj operacji mnożenia i dzielenia:

Przykład

var z = (x * 10 + y * 10) / 10;       // wynik w z będzie 0.3

Spróbuj sam

Zmiana wiersza w ciągu znaków JavaScript

JavaScript pozwala na dzielenie jednego polecenia na dwa wiersze:

Przykład 1

var x =
"Hello World!";

Spróbuj sam

Ale wprowadzenie wiersza w ciągu ciągu znaków jest niewłaściwe:

Przykład 2

var x = "Hello
World!";

Spróbuj sam

Przykład 3

var x = "Hello \",
World!";

Spróbuj sam

Złe umiejscowienie średnika

Z powodu błędnego średnika, ten blok kodu będzie wykonywany niezależnie od wartości x:

if (x == 19);
{
     // blok kodu
}

Spróbuj sam

Zmiana wiersza polecenia return

Automatyczne zamknięcie wiersza na końcu to domyślne zachowanie JavaScript.

Dlatego te dwa przykłady zwracają ten sam wynik:

Przykład 1

function myFunction(a) {
    var power = 10  
    return a * power
}

Spróbuj sam

Przykład 2

function myFunction(a) {
    var power = 10;
    return a * power;
}

Spróbuj sam

JavaScript pozwala również na dzielenie jednego polecenia na dwa wiersze.

Dlatego przykład 3 również zwróci ten sam wynik:

Przykład 3

function myFunction(a) {
    var
    power = 10;  
    return a * power;
}

Spróbuj sam

Ale jeśli return Co się stanie, jeśli wiersz polecenia zostanie podzielony na dwa wiersze?

Przykład 4

function myFunction(a) {
    var
    power = 10;  
    return
    a * power;
}

Spróbuj sam

Ta funkcja zwróci undefined!

Dlaczego? Ponieważ JavaScript uważa, że masz na myśli:

Przykład 5

function myFunction(a) {
     var
    power = 10;  
    return;
    a * power;
}

Spróbuj sam

Wyjaśnienie

Jeśli polecenie jest niekompletne:

var

JavaScript dokończy to polecenie czytając następny wiersz:

power = 10;

Ale ponieważ to polecenie jest pełne:

return

JavaScript automatycznie zamknie to polecenie:

return;

Dzieje się tak, ponieważ w JavaScript, zamknięcie polecenia (koniec) za pomocą średnika jest opcjonalne.

JavaScript zamknie wiersz na końcu return została, ponieważ jest to pełne polecenie.

Nigdy nie używaj return Zmiana wiersza na nowy.

Dostęp do tablicy poprzez indeksowanie nazwanym

Wiele języków programowania obsługuje tablice z nazwanymi indeksami.

Tablice z nazwanymi indeksami są nazywane tablicami związonymi (lub haszami).

JavaScript NieobsługiwaneTablica z nazwanymi indeksami.

W JavaScript,TablicaUżywajNumerowe indeksy:

Przykład

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 46;
var x = person.length;          // person.length zwróci 3
var y = person[0];              // person[0] zwróci "Bill"

Spróbuj sam

W JavaScript,ObiektUżywajNazwane indeksy。

Jeśli używasz nazwanych indeksów, JavaScript będzie przedefiniowywał tablicę jako standardowy obiekt przy dostępie do tablicy.

Po automatycznym przedefiniowaniu, metody lub atrybuty tablicy mogą generować wyniki niezdefiniowane lub niepoprawne:

Przykład

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length;         // person.length zwróci 0
var y = person[0];              // person[0] zwróci undefined

Spróbuj sam

Używaj przecinków, aby zakończyć definicję

Przecinki końcowe w definicji obiektu i tablicy są dozwolone w ECMAScript 5.

Przykład obiektu:

person = {firstName:"Bill", lastName:"Gates", age:62,}

Przykład tablicy:

points = [35, 450, 2, 7, 30, 16,];

Ostrzeżenie!!!

Internet Explorer 8 może się zawiesić.

JSON nie pozwala na użycie przecinków końcowych.

JSON:

person = {firstName:"Bill", lastName:"Gates", age:62}

JSON:

points = [35, 450, 2, 7, 30, 16];

Undefined nie jest Null

Obiekt JavaScript, zmienna, atrybut i metoda mogą być niezdefiniowane.

W szczególności, wartość pustego obiektu JavaScript może być: null。

To może uczynić zbadanie, czy obiekt jest pusty, nieco trudnym zadaniem.

Możesz sprawdzić, czy typ jest: undefinedTestować, czy obiekt istnieje:

Przykład

if (typeof myObj === "undefined")

Spróbuj sam

ale nie możesz sprawdzić, czy obiekt jest nullponieważ, jeśli obiekt jest undefined, wywoła błąd:

Niepoprawne:

if (myObj === null)

Aby rozwiązać ten problem, musisz sprawdzić, czy obiekt jest nullzamiast undefined.

ale nadal wywoła błąd:

Niepoprawne:

if (myObj !== null && typeof myObj !== "undefined")

Dlatego, zanim przetestujesz, że nie jest null, musisz najpierw sprawdzić, czy nie jest undefined:

Poprawne:

if (typeof myObj !== "undefined" && myObj !== null)

Spróbuj sam

oczekuje zasięgu blokowego

JavaScript nietworzy nowy zasięg dla każdego bloku kodu.

Wiele języków programowania działa w ten sposób, ale JavaScript Nie jest to prawda。

myśli, że ten kod zwróci undefinedto częsty błąd nowego dewelopera JavaScript:

Przykład

for (var i = 0; i < 10; i++) {
  // Blok kodu
}
return i;

Spróbuj sam