52. Κοινά λάθη JavaScript

JS Mistakes


Αυτό το κεφάλαιο επισημαίνει μερικά κοινά λάθη JavaScript.


Τυχαία χρήση του χειριστή εκχώρησης

Τα προγράμματα JavaScript ενδέχεται να παράγουν απροσδόκητα αποτελέσματα αν ένας προγραμματιστής χρησιμοποιεί τυχαία έναν τελεστή εκχώρησης ( = ), αντί για έναν χειριστή σύγκρισης ( == ) σε μια εντολή if.

Αυτή η if δήλωση επιστρέφει false (όπως αναμένεται) επειδή το x δεν είναι ίσο με 10:

Αυτή η if δήλωση επιστρέφει true (ίσως όχι όπως αναμένεται), επειδή το 10 είναι αληθές:

Αυτή η if δήλωση επιστρέφει false (ίσως όχι όπως αναμένεται), επειδή το 0 είναι ψευδές:

Μια εκχώρηση επιστρέφει πάντα την τιμή της εκχώρησης.


Αναμονή χαλαρής σύγκρισης

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

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

Δοκιμάστε τον εαυτό σας »

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

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

Δοκιμάστε τον εαυτό σας »

Είναι ένα συνηθισμένο λάθος να ξεχνάμε ότι οι switch δηλώσεις χρησιμοποιούν αυστηρή σύγκριση:

Αυτό case switchθα εμφανίσει μια ειδοποίηση:

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

Δοκιμάστε τον εαυτό σας »

Αυτό case switch δεν θα εμφανίσει μια ειδοποίηση:

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

Δοκιμάστε τον εαυτό σας »


Μπερδεμένη πρόσθεση & Συνένωση

Η πρόσθεση αφορά την πρόσθεση αριθμών .

Η συνένωση αφορά την πρόσθεση συμβολοσειρών .

Στη JavaScript και οι δύο λειτουργίες χρησιμοποιούν τον ίδιο + τελεστή.

Εξαιτίας αυτού, η πρόσθεση ενός αριθμού ως αριθμού θα έχει διαφορετικό αποτέλεσμα από την πρόσθεση ενός αριθμού ως συμβολοσειράς:

var x = 10 + 5;          // the result in x is 15
var x = 10 + "5";        // the result in x is "105"

Δοκιμάστε τον εαυτό σας »

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

var x = 10;
var y = 5;
var z = x + y;           // the result in z is 15

var x = 10;
var y = "5";
var z = x + y;           // the result in z is "105"

Δοκιμάστε τον εαυτό σας »


Misunderstanding Floats

Όλοι οι αριθμοί στη Javascript αποθηκεύονται ως αριθμοί κινητής υποδιαστολής 64-bit (Floats).

Όλες οι γλώσσες προγραμματισμού, συμπεριλαμβανομένου της JavaScript, έχουν δυσκολίες με την ακρίβεια τιμών κινητής υποδιαστολής:

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

Δοκιμάστε τον εαυτό σας »

Για να λύσουμε το παραπάνω πρόβλημα, βοηθάει να πολλαπλασιάσουμε και να διαιρέσουμε:

Παράδειγμα

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

Δοκιμάστε τον εαυτό σας »


Αλλαγή γραμμής σε μια συμβολοσειρά JavaScript

Η JavaScript θα σας επιτρέψει να σπάσετε μια δήλωση σε δύο γραμμές:

Παράδειγμα 1

var x =
"Hello World!";

Δοκιμάστε τον εαυτό σας »

Αλλά, σπάσιμο μιας δήλωσης στη μέση μιας συμβολοσειράς δεν θα λειτουργήσει:

Παράδειγμα 2

var x = "Hello
World!";

Δοκιμάστε τον εαυτό σας »

Πρέπει να χρησιμοποιήσετε μια “αντίστροφη κάθετο” εάν πρέπει να σπάσετε μια δήλωση σε μια συμβολοσειρά:

Παράδειγμα 3

var x = "Hello \
World!";

Δοκιμάστε τον εαυτό σας »


Λάθος τοποθέτηση ερωτηματικού

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

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

Δοκιμάστε τον εαυτό σας »


Αλλαγή γραμμής σε δήλωση επιστροφής

Είναι μια προεπιλεγμένη συμπεριφορά JavaScript για να κλείνει αυτόματα μια δήλωση στο τέλος μιας γραμμής.

Εξαιτίας αυτού, αυτά τα δύο παραδείγματα θα επιστρέψουν το ίδιο αποτέλεσμα:

Παράδειγμα 1

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

Δοκιμάστε τον εαυτό σας »

Παράδειγμα 2

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

Δοκιμάστε τον εαυτό σας »

Η JavaScript θα σας επιτρέψει επίσης να σπάσετε μια δήλωση σε δύο γραμμές.

Εξαιτίας αυτού, το παράδειγμα 3 θα επιστρέψει επίσης το ίδιο αποτέλεσμα:

Παράδειγμα 3

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

Δοκιμάστε τον εαυτό σας »

Αλλά τι θα συμβεί αν σπάσετε τη δήλωση επιστροφής σε δύο γραμμές όπως αυτό:

Παράδειγμα 4

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

Δοκιμάστε τον εαυτό σας »

Η συνάρτηση θα επιστρέψει undefined!

Γιατί; Επειδή η JavaScript νόμιζε ότι σήμαινε:

Παράδειγμα 5

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

Δοκιμάστε τον εαυτό σας »


Εξήγηση

Εάν μια δήλωση είναι ατελής όπως:

var

Η JavaScript θα προσπαθήσει να ολοκληρώσει τη δήλωση διαβάζοντας την επόμενη γραμμή:

power = 10;

Αλλά δεδομένου ότι η δήλωση αυτή είναι πλήρης:

return

Η JavaScript θα κλείσει αυτόματα όπως παρακάτω:

return;

Αυτό συμβαίνει επειδή οι εντολές κλεισίματος (λήξης) με ερωτηματικό είναι προαιρετικές στη JavaScript.

Η JavaScript θα κλείσει τη δήλωση επιστροφής στο τέλος της γραμμής, επειδή είναι μια πλήρη δήλωση.

Ποτέ μην σπάτε μια δήλωση επιστροφής.


Πρόσβαση σε πίνακες με ονομασμένους δείκτες

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

Οι πίνακες με ονόματα δεικτών καλούνται συσσωματικές συστοιχίες (ή hashes).

Η JavaScript δεν υποστηρίζει πίνακες με όνομα στους δείκτες.

Στη JavaScript, οι πίνακες χρησιμοποιούν αριθμημένα ευρετήρια :  

Παράδειγμα

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;       // person.length will return 3
var y = person[0];           // person[0] will return "John"

Δοκιμάστε τον εαυτό σας »

Στη JavaScript, τα αντικείμενα χρησιμοποιούν ονόματα ευρετηρίων .

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

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

Παράδειγμα:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;      // person.length will return 0
var y = person[0];          // person[0] will return undefined

Δοκιμάστε τον εαυτό σας »


Τερματισμός ορισμών με ένα κόμμα

Τα τελικά κόμματα στον ορισμό αντικειμένων και συστοιχιών είναι νόμιμα στο ECMAScript 5.

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

person = {firstName:"John", lastName:"Doe", age:46,}

Παράδειγμα πίνακα:

points = [40, 100, 1, 5, 25, 10,];

ΠΡΟΕΙΔΟΠΟΙΗΣΗ!

Ο Internet Explorer 8 θα καταρρεύσει.

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

JSON:

person = {"firstName":"John", "lastName":"Doe", "age":46}

JSON:

points = [40, 100, 1, 5, 25, 10];

Το μη ορισμένο δεν είναι Null

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

Επιπλέον, κενά αντικείμενα JavaScript μπορούν να έχουν την τιμή null.

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

Μπορείτε να ελέγξετε εάν υπάρχει ένα αντικείμενο εξετάζοντας εάν ο τύπος είναι undefined:

Παράδειγμα:

if (typeof myObj === "undefined") 

Δοκιμάστε τον εαυτό σας »

Αλλά δεν μπορείτε να ελέγξετε εάν υπάρχει ένα αντικείμενο null, επειδή αυτό θα προκαλέσει σφάλμα αν το αντικείμενο είναι undefined:

Λανθασμένο:

if (myObj === null) 

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

Αλλά αυτό μπορεί ακόμα να ρίξει ένα σφάλμα:

Λανθασμένο:

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

Εξαιτίας αυτού, θα πρέπει να εξετάσετε για όχι undefined πριν να μπορέσετε να εξετάσετε για όχι null:

Σωστό:

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

Δοκιμάστε τον εαυτό σας »


Days
Hours
Minutes

52. Κοινά λάθη JavaScript

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: