Javascript - Những khó hiểu trong câu lệnh điều kiện if và phép toán so sánh
Javascript
200
White

Nguyễn Hồng Phúc viết ngày 04/03/2016

Một số vấn đề

Theo cá nhân tôi, Javascript có lẽ là một trong những ngôn ngữ dễ học, dễ viết nhất. Một web developer mới bắt đầu có lẽ chỉ cần từ 1 đến 2 tuần để có thể học và viết được Javascript. Tuy nhiên, Javascript cũng tồn tại những điều không đơn giản.
Bạn hãy thử suy nghĩ và trả lời vài câu hỏi dưới đây (tất nhiên là đừng gõ console hay tương tự vậy nhé). Hãy trả lời kết quả của từng dòng lệnh dưới đây

  • Phần 1:

    1 == String(1);
    new String(1) == new String(1);
    new String(1) === new String(1);
    

    Đơn giản đúng không? Chúng ta cùng tiếp tục nhé:

  • Phần 2:

    0 == [];
    0 == false;
    [] == false;
    

    Hãy kiểm tra kết quả bằng console và cùng chạy đoạn lệnh sau nhé:

    if (0) 
    console.log("0 là true"); 
    else 
    console.log("0 là false");
    

    if ([]) 
    console.log("[] là true"); 
    else 
    console.log("[] là false");
    

    So sánh 2 đoạn lệnh bạn vừa chạy với kết quả ở phần 2, khó hiểu vãi đúng không. T_T.

  • Phần 3:

    0 == undefined; // kết quả là false
    0 == !!undefined; // cái này kết quả cũng là false chứ còn gì nữa
    

    Tuy nhiên, khi bạn kiểm tra lại bằng console, đây là điều khó hiểu tiếp theo. (:rofl)

Trong Javascript, một function có thể thay đổi giá trị và cả kiểu của các biến global, đi kèm với những điều khó hiểu trên, một chương trình viết bằng Javascript sẽ rất dễ xuất hiện bug. Xin được tổng kết lại một số quy tắc sử dụng if và các phép toán so sánh:

Kiểu của biến trong Javascript

Để bắt đầu, ta hãy cùng xem lại các kiểu dữ liệu của biến số trong Javascript.

  • Primitive Data Type
Kiểu Phân loại Độ lớn
String giá trị kiểu xâu bắt đầu từ chuỗi '' trở lên
Number kiểu số 64 bit
Boolean kiểu logic true/false
Null giá trị rỗng null
Undefined chưa định nghĩa giá trị undefined
  • Reference Data Type: là kiểu dữ liệu tham chiếu tới một object

Trong javascript không có sự phân biệt giữa kiểu số nguyên và số thực

Câu lệnh if trong Javascript

  • Giá trị false nằm trong các trường hợp sau

    • ''
    • 0
    • NaN
    • null
    • undefined
  • Giá trị true ngoài 5 trường hợp trên

Vì thế if ([])true còn if (0)false nhé. Mặc dù 0 == [] là true

Phép so sánh === (!==)

Nhiều người (trong đó có cả tôi) vẫn hiểu đơn giản rằng phép toán === hoặc !== ngoài so sánh giá trị thì còn so sánh kiểu của dữ liệu. Điều này đúng với cả giá trị nullundefined. Tuy nhiên với những trường hợp dưới đây sẽ không đúng:

NaN === NaN // giá trị của biểu thức này là false
new String(1) === new String(1) // mặc dù cùng là kiểu object String, có giá trị 1, tuy nhiên biểu thức này cũng cho kết quả là false

Trên thực tế, phép toán so sánh === tuân theo quy luật dưới đây:

  1. Nếu x và y khác kiểu nhau, false
  2. Nếu như cả 2 vế đều là null hoặc undefined (null === null), true (tuy nhiên điều này không đúng với NaN đâu nhé :-p)
  3. Nếu cả 2 vế đều là kiểu Number, 1 trong 2 vế, hoặc cả 2 vế là NaN, false. Còn không thì so sánh giá trị
  4. Nếu cả 2 vế đều là kiểu String, nội dung giống nhau: true, còn lại false
  5. Nếu cả 2 vế đều là kiểu Boolean, giống nhau thì là true, khác nhau là false
  6. Nếu cả 2 vế đều là kiểu Object tham chiếu, nếu cùng tham chiếu tới 1 object: true, còn lại là false

Phép so sánh == (!=)

Phép so sánh == (hoặc !=) cũng không chỉ đơn thuần chỉ so sánh giá trị của dữ liệu mà tuân theo quy luật dưới đây:

  • Nếu x và y có cùng kiểu dữ liệu, thì phép toán === (hoặc !==) sẽ được áp dụng
  • Nếu x và y khác kiểu dữ liệu, kết quả sẽ tuân theo:
  1. Nếu cả 2 vế đều là null, hoặc undefined, true
  2. Nếu một vế là giá trị kiểu Number, vế còn lại là giá trị kiểu String, String sẽ được convert sang kiểu Number và so sánh giá trị
  3. Nếu một vế là kiểu Boolean, một vế là kiểu Number, Boolean sẽ được chuyển sang kiểu Number và so sánh giá trị
  4. Nếu một vế là kiểu Boolean, một vế là kiểu String, cả 2 vế sẽ được chuyển về kiểu Number và so sánh giá trị
  5. Nếu một vế là kiểu Number, một vế là kiểu Object tham chiếu, vế Object tham chiếu sẽ được chuyển sang Number và so sánh giá trị
  6. Nếu một vế là kiểu String, một vế là kiểu Object tham chiếu, vế Object tham chiếu sẽ được chuyển sang kiểu String và so sánh nội dung
  7. Ngoài những trường hợp trên, tất cả đều là false

Một chút lưu ý là phép toán chuyển sang kiểu Number trong javascript không phải là hàm parse... (parseInt hay parseFloat) đâu nhé, mà là hàm Number(). Như đoạn lệnh dưới đây:

0 == '0a'; // kết quả là false
0 == parseInt('0a'); // kết quả là true

Bạn hãy tự kiểm tra lại với lệnh 0 == Number('0a')

Tổng kết

Trong phần này tôi đã tổng kết lại những quy tắc của câu lệnh điều kiện if, và các phép toán so sánh ===, ==. Phần tiếp tôi sẽ tổng hợp các quy tắc với các phép so sánh >, >=, <, <= để cùng đả thông sự khó hiểu dưới đây:

0 > null; // false
0 == null; //false
0 === null; // false
0 < null; // vẫn false

Tuy nhiên

0 >= null; // true
0 <= null; // true (@@)

Mời các bạn tham khảo phần 2.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Nguyễn Hồng Phúc

9 bài viết.
38 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
16 2
Mở đầu Có lẽ hầu hết những người sử dụng Linux đều biết quyền hạn của 1 file hay folder được đại diện bởi r (read), w (write), x (execute) như hìn...
Nguyễn Hồng Phúc viết gần 3 năm trước
16 2
White
16 3
Mở đầu Ở (Link), tôi đã tổng kết lại một số nguyên tắc của câu lệnh điều kiện if, phép so sánh == và ===. Chúng ta hãy cùng bắt đầu phần 2 với điề...
Nguyễn Hồng Phúc viết gần 3 năm trước
16 3
White
15 1
Có vẻ là quá thường nhưng để bắt đầu làm gì đó “to tát” thì hay bắt đầu những việc đơn giản trước. Tôi viết bài này để chia sẻ tới những người mới ...
Nguyễn Hồng Phúc viết gần 3 năm trước
15 1
Bài viết liên quan
White
39 7
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
39 7
White
21 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết hơn 2 năm trước
21 8
White
3 0
Có bao giờ bạn thắc mắc, chuyện gì thực sự diễn ra khi chúng ta gõ một địa chỉ trang web (ví dụ: (Link)) lên trình duyệt và nhấn Enter? Đầu tiên, t...
Lam Pham viết 1 tháng trước
3 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
9 bài viết.
38 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!