Những lỗi thường gặp về JavaScript
Chương này chỉ ra một số lỗi JavaScript phổ biến.
Vô tình sử dụng toán tử chuyển nhượng
Các chương trình JavaScript có thể tạo ra kết quả không mong muốn nếu một lập trình viên vô tình sử dụng toán tử gán ( =), thay vì toán tử so sánh ( ==) trong câu lệnh if.
Câu iflệnh này trả về false(như mong đợi) vì x không bằng 10:
let x = 0;
if (x == 10)
Câu iflệnh này trả về true(có thể không như mong đợi), vì 10 là true:
let x = 0;
if (x = 10)
Câu iflệnh này trả về false(có thể không như mong đợi), vì 0 là sai:
let x = 0;
if (x = 0)
Một phép gán luôn trả về giá trị của phép gán.
Kỳ vọng so sánh lỏng lẻo
Trong so sánh thông thường, kiểu dữ liệu không quan trọng. Câu iflệnh này trả về true:
let x = 10;
let y = "10";
if (x == y)
Khi so sánh chặt chẽ, kiểu dữ liệu có ý nghĩa quan trọng. Câu iflệnh này trả về false:
let x = 10;
let y = "10";
if (x === y)
Một sai lầm phổ biến khi quên rằng các switchcâu lệnh sử dụng phép so sánh chặt chẽ:
Điều này case switchsẽ hiển thị một cảnh báo:
let x = 10;
switch(x) {
case 10: alert("Hello");
}
Điều này case switchsẽ không hiển thị một cảnh báo:
let x = 10;
switch(x) {
case "10": alert("Hello");
}
Phép cộng & kết nối khó hiểu
Phép cộng là thêm các số .
Kết nối là về việc thêm các chuỗi .
Trong JavaScript, cả hai thao tác đều sử dụng cùng một +toán tử.
Do đó, việc thêm một số dưới dạng một số sẽ tạo ra một kết quả khác với việc thêm một số dưới dạng một chuỗi:
let x = 10;
x = 10 + 5; //
Now x is 15
let y = 10;
y += "5";
// Now y is "105"
Khi thêm hai biến, có thể khó lường trước kết quả:
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"
Hiểu nhầm Floats
Tất cả các số trong JavaScript được lưu trữ dưới dạng 64-bit Số dấu chấm động (Floats).
Tất cả các ngôn ngữ lập trình, bao gồm JavaScript, đều gặp khó khăn với các giá trị dấu phẩy động chính xác:
let x = 0.1;
let y = 0.2;
let z = x + y
// the result in z will not be 0.3
Để giải quyết vấn đề trên, nó sẽ giúp nhân và chia:
Thí dụ
let z = (x * 10 + y * 10) / 10; // z will be 0.3
Phá vỡ chuỗi JavaScript
JavaScript sẽ cho phép bạn chia một câu lệnh thành hai dòng:
ví dụ 1
let x =
"Hello World!";
Tuy nhiên, ngắt một câu lệnh ở giữa một chuỗi sẽ không hoạt động:
Ví dụ 2
let x = "Hello
World!";
Bạn phải sử dụng "dấu gạch chéo ngược" nếu bạn phải ngắt một câu lệnh trong một chuỗi:
Ví dụ 3
let x = "Hello \
World!";
Đặt sai dấu chấm phẩy
Do dấu chấm phẩy đặt sai vị trí, khối mã này sẽ thực thi bất kể giá trị của x:
if (x == 19);
{
// code block
}
Phá vỡ một tuyên bố trở lại
Đây là một hành vi JavaScript mặc định để đóng một câu lệnh tự động ở cuối dòng.
Do đó, hai ví dụ này sẽ trả về cùng một kết quả:
ví dụ 1
function myFunction(a) {
let power = 10
return a * power
}
Ví dụ 2
function myFunction(a) {
let power = 10;
return a * power;
}
JavaScript cũng sẽ cho phép bạn ngắt một câu lệnh thành hai dòng.
Do đó, ví dụ 3 cũng sẽ trả về cùng một kết quả:
Ví dụ 3
function myFunction(a) {
let
power = 10;
return a * power;
}
Tuy nhiên, điều gì sẽ xảy ra nếu bạn ngắt câu lệnh return thành hai dòng như sau:
Ví dụ 4
function myFunction(a) {
let
power = 10;
return
a * power;
}
Chức năng sẽ trở lại undefined!
Tại sao? Bởi vì JavaScript nghĩ rằng bạn muốn nói:
Ví dụ 5
function myFunction(a) {
let
power = 10;
return;
a * power;
}
Giải trình
Nếu một câu lệnh không đầy đủ như:
let
JavaScript sẽ cố gắng hoàn thành câu lệnh bằng cách đọc dòng tiếp theo:
power = 10;
Nhưng vì câu lệnh này đã hoàn thành:
return
JavaScript sẽ tự động đóng nó như thế này:
return;
Điều này xảy ra vì các câu lệnh đóng (kết thúc) bằng dấu chấm phẩy là tùy chọn trong JavaScript.
JavaScript sẽ đóng câu lệnh trả về ở cuối dòng, vì nó là một câu lệnh hoàn chỉnh.
Không bao giờ phá vỡ một câu lệnh trả lại.
Truy cập Mảng có Chỉ mục được Đặt tên
Nhiều ngôn ngữ lập trình hỗ trợ mảng với các chỉ mục được đặt tên.
Mảng có chỉ mục được đặt tên được gọi là mảng kết hợp (hoặc băm).
JavaScript không hỗ trợ mảng có chỉ mục được đặt tên.
Trong JavaScript, mảng sử dụng các chỉ mục được đánh số :
Thí dụ
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"
Trong JavaScript, các đối tượng sử dụng các chỉ mục được đặt tên .
Nếu bạn sử dụng một chỉ mục được đặt tên, khi truy cập vào một mảng, JavaScript sẽ xác định lại mảng đó thành một đối tượng chuẩn.
Sau khi xác định lại tự động, các phương thức và thuộc tính mảng sẽ tạo ra kết quả không xác định hoặc không chính xác:
Thí dụ:
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
Kết thúc định nghĩa bằng dấu phẩy
Dấu phẩy ở cuối trong định nghĩa đối tượng và mảng là hợp pháp trong ECMAScript 5.
Ví dụ về đối tượng:
person = {firstName:"John", lastName:"Doe", age:46,}
Ví dụ về mảng:
points = [40, 100, 1, 5, 25, 10,];
CẢNH BÁO !!
Internet Explorer 8 sẽ gặp sự cố.
JSON không cho phép dấu phẩy ở cuối.
JSON:
person = {"firstName":"John", "lastName":"Doe", "age":46}
JSON:
points = [40, 100, 1, 5, 25, 10];
Undefined is Not Null
Các đối tượng, biến, thuộc tính và phương thức JavaScript có thể là undefined.
Ngoài ra, các đối tượng JavaScript trống có thể có giá trị null.
Điều này có thể gây ra một chút khó khăn để kiểm tra xem một đối tượng có trống không.
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)