Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Toán Tử So Sánh Và Logic Trong Javascript

Toán Tử So Sánh Và Logic Trong Javascript


Ngày 28 Tháng 4 Năm 2020

Hôm nay bạn hãy cùng mình sẽ đi tìm hiểu khái niệm cũng như cách sử dụng toán tử so sánh và logic của ngôn ngữ lập trình Javascript trong trang web nhé.

Toán Tử So Sánh Trong Javascript

Toán tử so sánh giúp chúng ta so sánh giá trị giữa các biến hay giá trị trong Javascript. Sau đây mình sẽ có một bảng liệt kê các toán tử so sánh hay sử dụng trong Javascript, bạn có thể xem ở bên dưới nhé:

Toán Tử So SánhÝ nghĩa
<nhỏ hơn
>lớn hơn
<=nhỏ hơn hoặc bằng
>=lớn hơn hoặc bằng
==bằng
!=không bằng

Toán Tử So Sánh Trả Về Giá Trị Boolean:

Khi chúng ta thực hiện biểu thức với toán tử so sánh thì giá trị trả về là Boolean với hai giá trị là true(đúng) và false(sai). Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 console.log(2 > 1); /*kết quả: true (đúng)*/
console.log(3 == 4); /* Kết quả false (sai)*/
console.log(3 != 4); /* Kết quả: true (đúng)*/

Kết quả của toán tử, chúng ta cũng có thể gán nó vào biến như ví dụ ở dưới đây nhé:

 let ketQua = 5 < 6; 
console.log(ketQua); // Kết quả: true

So sánh Chuỗi

Cách thực hiện so sánh chuỗi là Javascript sẽ đi so sánh từng thành phần của hai chuỗi với nhau. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 console.log('N' > 'A'); /* Kết quả: true*/
console.log('Xin' > 'Xe');/* Kết quả: true*/
console.log('Bee' > 'Be'); /* Kết quả: true*/

Mình sẽ giải thích cách so sánh chuỗi như sau:

  • So sánh kí tự đầu tiên của hai chuỗi với nhau.
  • Nếu kí tự đầu tiên của chuỗi thứ nhất lớn hơn hay nhỏ hơn ký tự đầu tiên của chuỗi thứ hai trong bảng mã ký tự, thì nó sẽ quyết định là chuỗi thứ nhất sẽ lớn hơn hay nhỏ hơn chuỗi thứ hai. Toán tử so sánh chuỗi đến đây là xong. Bạn nhấp vào nút phía dưới để xem bảng mã ký tự nhé.

    3264@96`128160 192À224à
    33!65A97a129161¡193Á225á
    34"66B98b130162¢194Â226â
    35#67C99c131ƒ163£195Ã227ã
    36$68D100d132164¤196Ä228ä
    37%69E101e133165¥197Å229å
    38&70F102f134166¦198Æ230æ
    39'71G103g135167§199Ç231ç
    40(72H104h136ˆ168¨200È232è
    41)73I105i137169©201É233é
    42*74J106j138Š170ª202Ê234ê
    43+75K107k139171«203Ë235ë
    44,76L108l140Œ172¬204Ì236ì
    45-77M109m141173­205Í237í
    46.78N110n142Ž174®206Î238î
    47/79O111o143175¯207Ï239ï
    48080P112p144176°208Ð240ð
    49181Q113q145177±209Ñ241ñ
    50282R114r146178²210Ò242ò
    51383S115s147179³211Ó243ó
    52484T116t148180´212Ô244ô
    53585U117u149181µ213Õ245õ
    54686V118v150182214Ö246ö
    55787W119w151183·215×247÷
    56888X120x152˜184¸216Ø248ø
    57989Y121y153185¹217Ù249ù
    58:90Z122z154š186º218Ú250ú
    59;91[123{155187»219Û251û
    60<92124|156œ188¼220Ü252ü
    61=93]125}157189½221Ý253ý
    62>94^126~158ž190¾222Þ254þ
    63?95_127159Ÿ191¿223ß255ÿ
  • Nếu hai kí tự đầu tiên giống nhau thì nó sẽ tiếp tục so sánh như trên đối với các ký tự còn lại giữa hai chuỗi.

Ví dụ như ta so sánh giữa hai chuỗi XinXe:

  • So sánh kí tự đầu tiên của hai chuỗi đều giống nhau là ký tự X.
  • Tiếp đến nó sẽ so sánh vị trí trong mã ký tự của i trong chuỗi thứ nhất và e trong chuỗi thứ hai.
  • Với vị trí của i trong mã ký tự là 137 và vị trí của ký tự e trong mã ký tự là 133.
  • Vậy kết quả biếu thức của 'Xin' > 'Xe' trả về true(đúng).

Chú ý:
Có điều quan trọng bạn cần lưu ý là toán tử so sánh chuỗi thì nó sẽ phân biệt rõ ràng giữa chữ in hoa và chữ in thường. Ví dụ như ta so sánh aA thì a sẽ lớn hơn bởi ví trí mã ký tự của nó lớn hơn. Bạn có thể tham khảo bảng ký tự mã ở trên nhé.

So sánh Các Kiểu Dữ Liệu Khác Nhau:

Khi so sánh giá trị giữa các kiểu dữ liệu khác nhau thì Javascript sẽ chuyển đổi giá trị sang kiểu số để so sánh. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 console.log('2' > 1); /* Kết quả: true */
console.log('01' == 1);/* Kết quả: true */

Như bạn thấy ở ví dụ trên thì kiểu chuỗi '2''01' được chuyển sang kiểu số để so sánh.

Toán tử so sánh ===!==

Vậy tại sao chúng ta đã có toán tử so sánh == rồi tại sao phải sử dụng thêm toán tử so sánh ===?
Đôi khi toán tử so sánh == thực hiện không đúng ý của chúng ta ví dụ như là:

console.log( 0 == false ); //Kết quả: true

Lý do là như phần ở trên mình đã giải thích là nó sẽ chuyển giá trị Boolean thành kiểu số tức là false thành 0 nên nó trả về kết quả true. Vậy có cách nào để so sánh hai giá trị này?
Ở đây ta phải sử dụng toán tử so sánh ===. Tác dụng của nó là so sánh nghiêm ngặt hơn tức là khi chúng ta so sánh hai giá trị với kiểu dữ liệu khác nhau thì nó sẽ ngay lập tức trả về giá trị false. Dưới đây mình sẽ có thêm một ví dụ minh họa nữa để giúp bạn dễ hiểu hơn:

 console.log('10' == 10); /*Kết quả: true*/
console.log('10' === 10); /*Kết quả: false*/

Cách sử dụng toán tử so sánh !==!= thì cũng như ở trên nhé.

So sánh nullundefined

Đây là những kiểu dữ liệu đặc biệt nên mình muốn bạn tham khảo thêm khi ta so sánh những kiểu dữ liệu này với nhau. Bạn có thể tham khảo về các kiểu dữ liệu này ở đây nhé: null và undefined. Chúng ta thử sử dụng === để so sánh thử hai kiểu dữ liệu này nhé:

console.log(null === undefined); // Kết quả: false.

Chúng ta tiếp tục thử so sánh với toán tử == ở ví dụ bên dưới xem sao nhé:

console.log(null == undefined); // Kết quả: true.

So sánh NaN với các kiểu dữ liệu khác

Ở dưới đây mình có một vài ví dụ bên dưới giúp bạn hiểu hơn về NaN với các kiểu dữ liệu khác:

 console.log(NaN == 1); /*Kết quả: false*/
console.log(NaN == NaN); /*Kết quả: false*/
console.log(NaN != 1); /*Kết quả: true*/
console.log(NaN != NaN); /*Kết quả: true*/

Toán Tử Logic Trong Javascript

Đây có thể xem là toán tử quan trọng trong Javascript bởi vì nó cho phép chúng ta có thể so sánh các biến với nhau và thực hiện hành động nào đó dựa vào giá trị trả về.
Ví dụ, nếu kết quả trả về là true thì chúng ta sẽ thực thi đoạn mã mình muốn còn nếu false thì chúng ta sẽ thực thi đoạn mã khác.

Javascript cung cấp cho chúng ta ba loại toán tử logic cơ bản:

  • ! (KHÔNG)
  • || (HOẶC)
  • && (VÀ)

Toán tử logic ! (KHÔNG)

Sử dụng dấu ! để biểu diễn toán tử logic KHÔNG và có thế áp dụng dung cho nhiều kiểu dữ liệu khác nhau. Để hiểu rõ hơn bạn xem cú pháp của nó bên dưới nhé:

 ketQua = !giaTri;

Toán tử này chỉ áp dụng cho một số hạng duy nhất và bạn xem bên dưới để hiểu cách nó hoạt động nhé:

  • Chuyển đối số hạng thành kiểu dữ liệu Boolean: true hoặc false.
  • Sau đó trả về giá trị nghịch đảo.

Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 console.log(!true); /*Kết quả: false*/
console.log(!0); /*Kết quả: true*/

Dưới đây mình có liệt kê đầy đủ các loại kiểu dữ liệu khi sử dụng toán tử này để bạn có thể tham khảo thêm:

 console.log(!undefined); /*true*/
console.log(!null); /*true*/
console.log(!20); /*false*/
console.log(!0); /*true*/
console.log(!NaN); /*true*/
console.log(!''); /*true*/
console.log(!'OK'); /*false*/
console.log(!false); /*true*/
console.log(!true); /*false*/

Toán tử logic || (HOẶC)

Chúng ta sẽ có cú pháp như sau:

ketQua = a || b;

Toán tử logic || sẽ trả về giá trị true nếu a hoặc b có giá trị true. Để nắm rõ hơn bạn xem bảng phía dưới đây nhé:

aba || b
truetruetrue
truefalsetrue
falsetruetrue
falsefalsefalse

Như vậy bạn thấy chỉ có một trường hợp false khi giá trị Boolean của a và b đều false. Bây giờ chúng ta thử đi vào ví dụ xem sao nhé:

 console.log(true || false); // Kết quả: true

Giá trị trả về của toán tử || sẽ giữ nguyên kiểu dữ liệu ban đầu trước khi được chuyển sang kiểu boolean để thực hiện logic. Mình sẽ thực hiện một ví dụ bên dưới để bạn nắm rõ hơn nhé:

 console.log(false || 'Meo'); // Kết quả: 'Meo'

Chúng ta có thể sử dụng một biểu thức với nhiều toán tử || với nhau theo cú pháp dưới đây:

 ketQua = giá trị 1 || giá trị 2 || giá trị 3

Thì toán tử || sẽ thực hiện theo các bước sau đây:

  • Thực hiện từ trái sang phải.
  • Với mỗi giá trị trong biểu thức sẽ chuyển đổi thành kiểu boolean. Nếu kết quả là đúng thì dừng lại và trả về giá trị trước khi được chuyển đổi sang kiểu boolean.
  • Nếu tất cả giá trị trong biểu thức đều sai thì trả về giá trị cuối cùng.

Để dễ hiểu hơn bạn xem ví dụ sau đây nhé:

 let khachHang1 = "Quan";
let khachHang2 = null;
let khachHang = khachHang1 || khachHang2 || "khachHangAnDanh";
console.log(khachHang); // Kết quả : "Quan"

Toán tử logic && (VÀ)

Bạn xem trước cú pháp của toán tử này ở bên dưới nhé:

 ketQua = a && b;

Toán tử logic && sẽ có giá trị false nếu một trong a hoặc b có giá trị false. Để hiể rõ hơn bạn xem bảng sau đây nhé:

aba & b
truetruetrue
truefalsefalse
falsetruefalse
falsefalsefalse

Ta sẽ đi vào ví dụ bên dưới để rõ hơn nhé:

 console.log(true && false); // Kết quả: false

Chúng ta có thể sử dụng một biểu thức với nhiều toán tử && với nhau theo cú pháp dưới đây:

 ketQua = giá trị 1 && giá trị 2 && giá trị 3

Thì toán tử && sẽ thực hiện theo các bước sau đây:

  • Thực hiện từ trái sang phải.
  • Với mỗi giá trị trong biểu thức sẽ chuyển đổi thành kiểu boolean. Nếu kết quả là sai thì dừng lại và trả về giá trị trước khi được chuyển đổi sang kiểu boolean.
  • Nếu tất cả giá trị trong biểu thức đều đúng thì trả về giá trị cuối cùng.

Để dễ hiểu hơn chúng ta hãy cùng nhau đi tìm hiểu thông qua ví dụ nhé:

 console.log(1 && 2 && null && 3); /*Kết quả: null*/
console.log(1 && 2 && 3); /*Kết quả: 3*/

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được khái niệm cũng như cách sử dụng toán tử so sánh và logic trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!