, October 26, 2021

0 kết quả được tìm thấy

Các toán tử trong JavaScript


  •   4 min reads
Các toán tử trong JavaScript

Bất kỳ một ngôn ngữ lập trình nào cũng có các toán tử để phục vụ cho việc hoạt động của ứng dụng, JavaScipt cũng không ngoại lệ. Vậy những toán tử đó là những toán tử nào, chúng ta cùng nhau tìm hiểu nhé 😉.

I. Giới thiệu

Toán tử là các dấu hay ký tự đặc biệt, dùng để thực hiện các phép tính của một biểu thức nào đó để cho ra kết quả cuối cùng.

II. Các loại toán tử

Trong JavaScript có các loại toán tử cơ bản cần phải ghi nhớ gồm:

  • Toán tử số học - Arithmetic Operators
  • Toán tử so sánh - Comparison Operators
  • Toán tử logic - Logical Operators
  • Toán tử gán - Assignment Operators
  • Toán tử ba ngôi - Conditional Operators

Chúng ta cùng nhau tìm hiểu từng loại toán tử một nhé 😉.

1. Toán tử số học - Arithmectic Operators

Toán tử Mô tả
+ Cộng
- Trừ
* Nhân
** Lũy thừa (ES6)
/ Phép chia
% Phép chia lấy phần dư
++ Tăng một giá trị
-- Giảm một giá trị

Cùng đi vào ví dụ cho dễ hiểu nhé 😁, phép + , -, * thì quá quen thuộc rồi nên mình không đề cập đến nó nhé 😆

// Phép ++ và tương tự cho --
let a = 1, b = 1, c = 1, d = 1;
a++;
console.log(a); //--> a = 2
++b;
console.log(b); //--> b = 2

//Cần lưu ý vị trí đặt toán tử ++ và -- đấy nhé
console.log(c++); //--> c = 1
console.log(c); //--> c = 2
//---------------------------
console.log(++d); //--> d = 2

//Phép lũy thừa
let e = 2;
console.log(a**2); //--> 4

//Phép / và %
let f = 5;
console.log(f/2); //--> 2.5
console.log(f%2); //--> 1 | 0.5 ~ 1

Giải thích một chút nhé 😁, c++ bằng 1 là vì ta log c rồi mới tăng lên một, đó là ý nghĩa khi đặt toán tử ++ sau một biến, còn đối với ++d là tăng d lên 1 rồi mới log d do đó d = 2. Đây là ý nghĩa của việc đặt toán tử ++ trước một biến, tương tự với toán tử -- nhé 😉.

f = 5f chia lấy dư cho 2 mà cho kết quả bằng 1 là do trong JavaScript tự động làm tròn số lên đó nha 😁.

2. Toán tử so sánh - Comparison Operators

Toán tử Mô tả
== So sánh bằng theo giá trị
=== So sánh bằng theo cả kiểu dữ liệu và giá trị
!= So sánh không bằng theo giá trị
!== So sánh không bằng theo cả kiểu dữ liệu và giá trị
> So sánh lớn hơn
< So sánh bé hơn
>= So sánh lớn hơn hoặc bằng
<= So sánh bé hơn hoặc bằng
? Toán tử ba ngôi
let a = 1, b = '1';
a == b //--> true
a === b //--> false
a !== b //--> true
a != b //--> false

Giải thích nè 😁, a == b trả về true là vì về mặt giá trị ab đều bằng 1 nên a !=b trả về false luôn nè, tuy nhiên về mặt kiểu dữ liệu lại khác nhau (một thằng kiểu number một thằng kiểu string) do đó a === b trả về falsea !== btrue.

3. Toán tử logic - Logical Operators

Toán tử Mô tả
&& Toán tử và (còn được gọi là toán tử AND)
|| Toán tử hoặc (còn được gọi là toán tử OR)
! Toán tử phủ định
let a = 5, b = 10;
(a != b) && (a < b); //--> true

(a > b) || (a == b); //--> false

(a < b) || (a == b); //--> true

!(a < b); //--> false

!(a > b); //--> true

Đối với toán tử && thì nếu toán hạn cả hai vế đều khác 0 thì sẽ trả về true còn ngược lại thì nó sẽ trả về false. Toán tử || thì khác, nếu một trong hai toán hạng khác 0 thì sẽ trả về true. Với toán tử ! là toán tử phủ định, (a < b) là đúng sẽ trả về true nhưng gặp toán tử ! thì phủ định của truefalse 😉.

4. Toán tử gán - Assignment Operators

Toán tử ví dụ Tương đương
= a = b a = b
+= a += b a = a + b
-= a -= b a = a - b
*= a *= b a = a * b
/= a /= b a = a / b
%= a %= b a = a % b
**= a **= b a = a**b

5. Toán tử ba ngôi - Conditional Operators

Toán tử 3 ngôi là một toán tử vô cùng hữu ích trong JavaScript, toán tử này giống  như là bản rút gọn của câu lệnh if-else

Toán tử Mô tả
?: Điều kiện ? giá trị 1 : giá trị 2

Đơn giản thôi, nếu điều kiện trước dấu ? trả về true thì sẽ trả về giá trị 1 còn false thì sẽ trả về giá trị 2

let a = 1, b = 10;

a > b ? "a lớn hơn b" : "a nhỏ hơn b" //--> "a nhỏ hơn b"

Đơn giản phải không nào 😁

III. Tổng kết

Trên đây là 5 loại toán tử căn bản cần phải nắm rõ khi học ngôn ngữ lập trình JavaScript, ngoài 5 loại toán tử cơ bản trên vẫn còn 5 loại toán tử khác ít gặp và nâng cao hơn nhé, cuối series này mình sẽ giới thiệu sau nhé 🤪. Bài sau chúng ta sẽ cùng nhau tìm hiểu về các câu lệnh điều khiển trong JavaScript nhé. Cảm ơn các bạn đã đọc 😎.

Bài viết cùng seri

Bài viết liên quan

Hướng dẫn clone instagram với React JS và Firebase phần 2.

Trong phần 1 của series này, chúng ta tiến hành setup một project ReactJS bằng câu lệnh create-react-app,đăng ký và tạo app trên firebase để có thể sử dụng và lưu trữ data. Trong phần 2 này, chúng ta sẽ tạo header cho nó và tạo component post để hiển thị bài đăng nhé 😉. Nào bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 2.
Hướng dẫn clone instagram với React JS và Firebase phần 1.

Trong bài viết này, chúng ta sẽ cùng nhau clone một trang mạng xã hội nỗi tiếng, là nơi chia sẽ hình ảnh và video của hàng trăm triệu người trên toàn thế giới, đó chính là Instagram. Chúng ta bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 1.
Number, string, array và object trong JavaScript

Chúng ta đã cùng nhau tìm hiểu các kiểu dữ liệu có trong JavaScript ở bài trước, tuy nhiên chúng ta vẫn chưa biết cách thao tác với chúng như thế nào trong JavaScript, nó có hổ trợ các phương thức nào hay không? Vấn đề đó, chúng ta sẽ cùng nhau tìm hiểu trong bài này nhé 😉....

Number, string, array và object trong JavaScript
Tìm hiểu thêm về Window Object trong Javascript

Nếu các bạn đã xem các bài trước thuộc series JavasScript cơ bản của mình hoặc đã xem các tài liệu khác thì chắc hẵn đã từng thấy trong bài viết có đề cập đến ông thần window object rồi nhỉ 😉. Vậy trong bài này, chúng ta sẽ cùng nhau tìm hiểu về nó để xem window object là loại object như thế nào nhé...

Tìm hiểu thêm về Window Object trong Javascript
Tìm hiểu về "this" trong JavaScript.

Chắc hẵn bạn đã từng nhìn thấy từ this trong một ngôn ngữ lập trình nào trước đó hoặc là trong một vài đoạn code nào đó của JavaScript. Bạn thắc mắc nó có tác dụng gì hoặc là bạn đang mơ hồ về this trong JavaScript. Yên tâm, trong bài này chúng ta sẽ cùng nhau tìm hiểu this có ý nghĩa gì nhé....

Tìm hiểu về "this" trong JavaScript.
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.