Typowe błędy JavaScript
Ten rozdział wskazuje na kilka typowych błędów JavaScript.
Przypadkowe użycie operatora przypisania
Programy JavaScript mogą generować nieoczekiwane wyniki, jeśli programista przypadkowo użyje operatora przypisania ( =) zamiast operatora porównania ( ==) w instrukcji if.
Ta ifinstrukcja zwraca false(zgodnie z oczekiwaniami), ponieważ x nie jest równe 10:
let x = 0;
if (x == 10)
Ta ifinstrukcja zwraca true(może nie zgodnie z oczekiwaniami), ponieważ 10 jest prawdziwe:
let x = 0;
if (x = 10)
Ta ifinstrukcja zwraca false(może nie zgodnie z oczekiwaniami), ponieważ 0 jest fałszywe:
let x = 0;
if (x = 0)
Przypisanie zawsze zwraca wartość przypisania.
Spodziewam się luźnego porównania
W zwykłym porównaniu typ danych nie ma znaczenia. To ifstwierdzenie zwraca prawdę:
let x = 10;
let y = "10";
if (x == y)
W ścisłym porównaniu typ danych ma znaczenie. To ifstwierdzenie zwraca fałsz:
let x = 10;
let y = "10";
if (x === y)
Częstym błędem jest zapominanie, że w switchwypowiedziach stosuje się ścisłe porównania:
Spowoduje case switchto wyświetlenie alertu:
let x = 10;
switch(x) {
case 10: alert("Hello");
}
Nie case switchspowoduje to wyświetlenia alertu:
let x = 10;
switch(x) {
case "10": alert("Hello");
}
Mylące dodawanie i łączenie
Dodawanie polega na dodawaniu liczb .
Konkatenacja polega na dodawaniu ciągów .
W JavaScript obie operacje używają tego samego +operatora.
Z tego powodu dodanie liczby jako liczby da inny wynik niż dodanie liczby jako ciągu:
let x = 10;
x = 10 + 5; //
Now x is 15
let y = 10;
y += "5";
// Now y is "105"
Po dodaniu dwóch zmiennych przewidzenie wyniku może być trudne:
let x = 10;
let y = 5;
let z = x + y; // Now z is 15
let x = 10;
let y = "5";
let z = x + y; // Now z is "105"
Niezrozumienie pływaków
Wszystkie liczby w JavaScript są przechowywane jako 64-bitowe liczby zmiennoprzecinkowe (Floats).
Wszystkie języki programowania, w tym JavaScript, mają trudności z precyzyjnymi wartościami zmiennoprzecinkowymi:
let x = 0.1;
let y = 0.2;
let z = x + y
// the result in z will not be 0.3
Aby rozwiązać powyższy problem, warto mnożyć i dzielić:
Przykład
let z = (x * 10 + y * 10) / 10; // z will be 0.3
Łamanie ciągu JavaScript
JavaScript pozwoli Ci podzielić instrukcję na dwie linie:
Przykład 1
let x =
"Hello World!";
Ale złamanie instrukcji w środku ciągu nie zadziała:
Przykład 2
let x = "Hello
World!";
Musisz użyć „odwrotnego ukośnika”, jeśli musisz złamać instrukcję w ciągu:
Przykład 3
let x = "Hello \
World!";
Błędny średnik
Z powodu niewłaściwie umieszczonego średnika ten blok kodu zostanie wykonany niezależnie od wartości x:
if (x == 19);
{
// code block
}
Łamanie deklaracji zwrotu
Domyślnym zachowaniem JavaScript jest automatyczne zamykanie instrukcji na końcu linii.
Z tego powodu te dwa przykłady zwrócą ten sam wynik:
Przykład 1
function myFunction(a) {
let power = 10
return a * power
}
Przykład 2
function myFunction(a) {
let power = 10;
return a * power;
}
JavaScript pozwoli Ci również podzielić instrukcję na dwie linie.
Z tego powodu przykład 3 również zwróci ten sam wynik:
Przykład 3
function myFunction(a) {
let
power = 10;
return a * power;
}
Ale co się stanie, jeśli podzielisz instrukcję return na dwie linie w ten sposób:
Przykład 4
function myFunction(a) {
let
power = 10;
return
a * power;
}
Funkcja zwróci undefined!
Czemu? Ponieważ JavaScript myślał, że masz na myśli:
Przykład 5
function myFunction(a) {
let
power = 10;
return;
a * power;
}
Wyjaśnienie
Jeśli oświadczenie jest niekompletne, takie jak:
let
JavaScript spróbuje uzupełnić instrukcję, czytając następną linię:
power = 10;
Ale ponieważ to stwierdzenie jest kompletne:
return
JavaScript automatycznie zamknie to w ten sposób:
return;
Dzieje się tak, ponieważ zamykanie (kończenie) instrukcji średnikiem jest opcjonalne w JavaScript.
JavaScript zamknie instrukcję return na końcu linii, ponieważ jest to instrukcja kompletna.
Nigdy nie łam oświadczenia zwrotu.
Uzyskiwanie dostępu do tablic za pomocą nazwanych indeksów
Wiele języków programowania obsługuje tablice z nazwanymi indeksami.
Tablice z nazwanymi indeksami nazywane są tablicami asocjacyjnymi (lub skrótami).
JavaScript nie obsługuje tablic z nazwanymi indeksami.
W JavaScript tablice używają indeksów numerowanych :
Przykład
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;
// person.length will return 3
person[0];
// person[0] will return "John"
W JavaScript obiekty używają nazwanych indeksów .
Jeśli używasz nazwanego indeksu, podczas uzyskiwania dostępu do tablicy JavaScript przedefiniuje tablicę do standardowego obiektu.
Po automatycznej redefinicji metody i właściwości tablicowe dadzą niezdefiniowane lub nieprawidłowe wyniki:
Przykład:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // person.length will
return 0
person[0];
// person[0] will return undefined
Zakończ definicje przecinkiem
Przecinki końcowe w definicji obiektu i tablicy są dozwolone w ECMAScript 5.
Przykład obiektu:
person = {firstName:"John", lastName:"Doe", age:46,}
Przykład tablicy:
points = [40, 100, 1, 5, 25, 10,];
OSTRZEŻENIE !!
Internet Explorer 8 ulegnie awarii.
JSON nie zezwala na końcowe przecinki.
JSON:
person = {"firstName":"John", "lastName":"Doe", "age":46}
JSON:
points = [40, 100, 1, 5, 25, 10];
Nieokreślone nie jest puste
Obiekty JavaScript, zmienne, właściwości i metody mogą być undefined.
Ponadto puste obiekty JavaScript mogą mieć wartość null.
Może to utrudnić sprawdzenie, czy obiekt jest pusty.
You can test if an object exists by testing if the type is undefined:
Example:
if (typeof myObj === "undefined")
But you cannot test if an object is null, because this will throw an error if the
object is undefined:
Incorrect:
if (myObj === null)
To solve this problem, you must test if an object is not null,
and not undefined.
But this can still throw an error:
Incorrect:
if (myObj !== null && typeof myObj
!== "undefined")
Because of this, you must test for not undefined before you can
test for not null:
Correct:
if (typeof myObj !== "undefined" && myObj !== null)