Συχνά Σφάλματα JavaScript

Αυτό το κεφάλαιο αναφέρει ορισμένα συχνά σφάλματα του JavaScript.

μη αναμενόμενη χρήση του οπτικοποιητή ανάθεσης

Αν ο προγραμματιστής χρησιμοποιεί if Η μη αναμενόμενη χρήση του οπτικοποιητή ανάθεσης στην πρόταση=）αντί για τον συγκριτικό οπτικοποιητή (=====），η πρόγραμμα JavaScript μπορεί να παράγει ορισμένα απρόβλεπτα αποτελέσματα.

αυτή if Η πρόταση επιστρέφει ψευδές（όπως αναμένεται）， επειδή το x δεν είναι ίσο με το 10：

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

Δοκιμάστε το προσωπικά

αυτή if Η πρόταση επιστρέφει αληθές（μπορεί να μην είναι όπως αναμένεται）， επειδή το 10 είναι αληθές：

var x = 0;
if (x = 10)

Δοκιμάστε το προσωπικά

αυτή if Η πρόταση επιστρέφει ψευδές（μπορεί να μην είναι όπως αναμένεται）， επειδή το 0 είναι ψευδές：

var x = 0;
if (x = 0)

Δοκιμάστε το προσωπικά

Η ανάθεση πάντα επιστρέφει την τιμή της ανάθεσης.

αναμένεται η χαλαρή σύγκριση

Στην κανονική σύγκριση, ο τύπος δεδομένων δεν είναι σημαντικός. Αυτό το if Η πρόταση επιστρέφει αληθές:

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

Δοκιμάστε το προσωπικά

Στη στενή σύγκριση, ο τύπος δεδομένων είναι σημαντικός. Αυτό το if Η πρόταση επιστρέφει ψευδές:

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

Δοκιμάστε το προσωπικά

Ένας συχνός σφάλμα είναι να ξεχνάμε να χρησιμοποιήσουμε switch Η πρόταση χρησιμοποιεί στενή σύγκριση:

αυτή switch Η πρόταση θα εμφανίσει το παράθυρο προειδοποίησης:

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

Δοκιμάστε το προσωπικά

αυτή switch Η πρόταση δεν θα εμφανίσει το παράθυρο προειδοποίησης:

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

Δοκιμάστε το προσωπικά

Ασαφής προσθήκη και κατασυγχώνευση

πρόσθεσηγια προσθήκηαριθμητικός。

κατασυγχώνευση (Concatenation)για προσθήκηαλφαριθμητικό。

Στο JavaScript, και οι δύο πράξεις χρησιμοποιούν τον ίδιο + Οπτικοποιητής.

Για αυτό, η προσθήκη αριθμών ως αριθμητικά και ως αλφαριθμητικά δημιουργεί διαφορετικά αποτελέσματα:

var x = 10 + 5;          // Το αποτέλεσμα στο x είναι 15
var x = 10 + "5";         // Το αποτέλεσμα στο x είναι "105"

Δοκιμάστε το προσωπικά

Αν προσθέσουμε δύο μεταβλητές, είναι δύσκολο να προβλέψουμε το αποτέλεσμα:

var x = 10;
var y = 5;
var z = x + y;            // Το αποτέλεσμα στο z είναι 15
var x = 10;
var y = "5";
var z = x + y;            // Το αποτέλεσμα στο z είναι "105"

Δοκιμάστε το προσωπικά

Ανακρίβεια των δεδομένων πόντιων

Όλοι οι αριθμοί στο JavaScript αποθηκεύονται ως 64-bitFloating-point numbers (Floats)。

All programming languages, including JavaScript, have difficulties in handling floating-point values:

var x = 0.1;
var y = 0.2;
var z = x + y             // The result in z will not be 0.3

Δοκιμάστε το προσωπικά

To solve the above problem, please use multiplication and division operations:

Παράδειγμα

var z = (x * 10 + y * 10) / 10;       // The result in z will be 0.3

Δοκιμάστε το προσωπικά

Line break in JavaScript strings

JavaScript allows you to split a statement into two lines:

Example 1

var x =
"Hello World!";

Δοκιμάστε το προσωπικά

But, it is not correct to break lines in the middle of a string:

Example 2

var x = "Hello
World!";

Δοκιμάστε το προσωπικά

If you have to break lines in a string, you must use the backslash:

Example 3

var x = "Hello ",
World!";

Δοκιμάστε το προσωπικά

Misplaced semicolon

Because of a misplaced semicolon, this code block will always execute regardless of the value of x:

if (x == 19);
{
     // code block
}

Δοκιμάστε το προσωπικά

Line break in return statements

Automatically closing statements at the end of a line is the default behavior of JavaScript.

That's why the following two examples return the same result:

Example 1

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

Δοκιμάστε το προσωπικά

Example 2

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

Δοκιμάστε το προσωπικά

JavaScript also allows you to split a statement into two lines.

That's why Example 3 will also return the same result:

Example 3

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

Δοκιμάστε το προσωπικά

But, if you put return What will happen if the statement is split into two lines:

Example 4

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

Δοκιμάστε το προσωπικά

This function will return undefined!

Why? Because JavaScript assumes that you mean:

Example 5

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

Δοκιμάστε το προσωπικά

Explanation

If a statement is incomplete:

var

JavaScript will complete this statement by reading the next line:

power = 10;

But because this statement is complete:

return

JavaScript will automatically close this statement:

return;

This happens because, in JavaScript, using a semicolon to close (end) a statement is optional.

JavaScript will close at the end of the line return The statement, because it is a complete statement itself.

Therefore, never do this return The statement is for line break.

Through naming index to access the array

Πολλά γλώσσες προγραμματισμού υποστηρίζουν τους πίνακες με ονομαστικές ετικέτες.

Οι πίνακες με ονομαστικές ετικέτες ονομάζονται συνδεδεμένοι πίνακες (ή χαρτοί).

JavaScript Δεν υποστηρίζονταιΠίνακες με ονομαστικές ετικέτες.

Στο JavaScript:ΠίνακαςΧρησιμοποιήστεΑριθμητικές ετικέτες:

Παράδειγμα

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 46;
var x = person.length;          // Το person.length θα επιστρέψει 3
var y = person[0];              // Το person[0] θα επιστρέψει "Bill"

Δοκιμάστε το προσωπικά

Στο JavaScript:ΆντικειμέναΧρησιμοποιήστεΟνομαστικές ετικέτες。

Αν χρησιμοποιήσετε ονομαστικές ετικέτες, τότε κατά την πρόσβαση στον πίνακα, το JavaScript θα επαναπροσδιορίσει τον πίνακα ως τυπικό αντικείμενο.

Μετά την αυτόματη επαναπροσδιορισμό, οι μεθόδοι ή οι ιδιότητες του πίνακα θα παράγουν μη ορισμένα ή μη σωστά αποτελέσματα:

Παράδειγμα

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length;         // Το person.length θα επιστρέψει 0
var y = person[0];              // Το person[0] θα επιστρέψει undefined

Δοκιμάστε το προσωπικά

Χρησιμοποιήστε τα σημεία κόμματος για να ολοκληρώσετε τη διαδρομή

Τα κενά σημεία κόμματος στη διαδρομή του αντικειμένου και του πίνακα είναι νόμιμα στην ECMAScript 5.

Παράδειγμα διαδρομής του αντικειμένου:

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

Παράδειγμα διαδρομής του πίνακα:

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

Προειδοποίηση！！

O Internet Explorer 8 θα υποκύψει.

Το JSON δεν επιτρέπει τα κενά σημεία κόμματος στο τέλος.

JSON:

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

JSON:

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

Undefined δεν είναι Null

Τα αντικείμενα, οι μεταβλητές, οι ιδιότητες και τα μέθοδοι του JavaScript μπορούν να είναι μη ορισμένα.

Επιπλέον, οι τιμές των κενών JavaScript αντικειμένων μπορούν να είναι: null。

Αυτό μπορεί να κάνει τη δοκιμή αν το αντικείμενο είναι κενό λίγο δύσκολη.

Μπορείτε να δοκιμάσετε αν ο τύπος είναι: undefinedΓια να δοκιμάσουμε αν το αντικείμενο υπάρχει:

Παράδειγμα

if (typeof myObj === "undefined")

Δοκιμάστε το προσωπικά

αλλά δεν μπορείτε να δοκιμάσετε αν το αντικείμενο είναι nullγιατί αν το αντικείμενο είναι μη ορισμένο, θα προκαλέσει σφάλμα:

Μη σωστή χρήση:

if (myObj === null)

Για να λύσετε το πρόβλημα, πρέπει να δοκιμάσετε αν το αντικείμενο είναι nullαντί για undefined.

αλλά αυτό θα προκαλέσει ακόμα σφάλμα:

Μη σωστή χρήση:

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

Άρα, πριν δοκιμάσετε αν είναι μη null, πρέπει να δοκιμάσετε αν είναι μη ορισμένο:

Καλή χρήση:

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

Δοκιμάστε το προσωπικά

προσδοκεί ορίζοντα κουτί

JavaScript Δενδημιουργεί νέο ορίζοντα για κάθε κώδικα.

Πολλά γλωσσές προγραμματισμού είναι έτσι, αλλά το JavaScript Δεν είναι έτσι。

πιστεύουν ότι αυτός ο κώδικας θα επιστρέψει undefinedείναι συχνή λάθη νέων προγραμματιστών JavaScript:

Παράδειγμα

for (var i = 0; i < 10; i++) {
  // κώδικας
}
return i;

Δοκιμάστε το προσωπικά