JavaScript Operators Reference

JavaScript Operators được sử dụng để tính toán, so sánh các giá trị, biểu diễn các phép toán trong toán học, v...v. Và trong bài này mình sẽ cùng tìm hiểu một số toán tử thông qua các ví dụ thực tế.

JavaScript Arithmetic Operators

Các phép tính được sử dụng để biểu diễn các phép tính giữa các biến hoặc các giá trị.

Toán tử Mô tả Ví dụ Kết quả DEMO
+ Toán tử cộng x = y + 2 y =  2 => x = 4 DEMO
- Toán tử trừ x = y - 10 y = 10 => x = 9 DEMO
* Toán tử nhân x = y * 2 y = 4 => x = 8 DEMO
/ Toán tử chia x = y / 4 y = 10 => x = 2 DEMO
% Chia lấy phần dư x = y % 2 y = 5 => x = 1 DEMO
++ Cộng thêm 1 đơn vị x = y++ y = 10 => x = 10, y = 11 DEMO
++ Cộng thêm 1 đơn vị x = ++y y = 10 => x = 11, y = 11 DEMO
-- Trừ đi 1 đơn vị x = y-- y = 10 =>x = 10, y = 9 DEMO
-- Trừ đi 1 đơn vị x = --y y = 10 => x = 9, y = 9 DEMO

Để tìm hiểu thêm về arithmetic operators, các bạn nên tham khảo bài viết JavaScript Arithmetic Trong Javascript.

JavaScript Assignment Operators

Các phép gán trong javascript được sử dụng để gán giá trị cho biến trong javascript.

Bảng dưới đây sẽ giải thích các phép gán trong javascript:

Phép gán Cú pháp Giải thích DEMO
=  x = 5 phép gán giá trị tương đương DEMO
+= x += 5 tương đương với x = x + 5 DEMO
-= x -= 5 tương tự với x = x - 5 DEMO
*= x *= 5 tương tự x = x * 5 DEMO
/= x /= 5 tương tự x = x / 5 DEMO
%= x %= 2 tương tự x = x % 2 DEMO

Để tìm hiểu thêm về các phép gán giá trị trong Javascript các bạn nên tham khảo bài viết Các phép gán trong Javascript.

JavaScript String Operators

Toán tử + và +=  cũng có thể được sử dụng để nối các chuỗi lại với nhau.

Giả sử có 3 chuỗi string lần lượt là: 

  • string1= "Freetuts.net";
  • string2= "is a blog";
  • string3 = "";

Bảng dưới đây sẽ trình bày chức của các phép toán.

Phép toán Ví dụ string1 string2 string3 DEMO
= string3 = strinng1 + string2 "Freetuts.net" "is a blog" "Freetuts.net is a blog" DEMO
+= string1 += string2 "Freetuts.net is a blog" "is a blog" "" DEMO

Comparison Operators

Các toán tử so sánh được sử dụng trong các câu lệnh logic để xác định xem giá trị của biến này có bằng, lớn hơn, nhỏ hơn .vv.  giá trị của biến kia hay không.

Toán tử Mô tả Ví dụ Kết quả trả về DEMO
== so sánh bằng x = 10, x == 10 True DEMO
=== bằng giá trị và bằng kiểu dữ liệu x = 10, x === "10" False DEMO
!= so sánh khác x = 10, x != 9 True DEMO
!== khác giá trị hoặc khác kiểu dữ liệu x = 10, x !== "10" True DEMO
> lớn hơn x = 10, x > 6  True DEMO
< nhỏ hơn x = 10, x < 6 False DEMO
>= lớn hơn hoặc bằng x = 10, x >= 10 True DEMO
<= nhỏ hơn hoặc băng x = 10, x <= 9 False DEMO

Để tìm hiểu thêm về các toán tử so sánh và cách sử dụng chúng trong Javascript các bạn nên tham khảo bài viết JavaScript Comparison and Logical Operators.

Conditional (Ternary) Operator

Conditional Operator có thể hiểu là một biểu thức điều kiện, javascript sử dụng nó để gán giá trị cho biến, giá trị sẽ thay đổi tùy thuộc vào kết quả trả về của điều kiện.

Cú phápvariablename = (condition) ? value1:value2

Ví dụ RUN
var skill = (score > 50) ? "good":"bad";

Nếu điểm bạn nhập vào nhỏ hơn 50 hoặc bằng 50, 'your skill is bad" sẽ được in ra, ngược lại, nếu score cao hơn 50, "your skill is good" sẽ được in ra.

Logical Operators

Các toán tử logic được sử dụng kết hợp với các phép so sánh để xác định tính logic giữa các biến hoặc các giá trị.

Toán tử Mô tả Ví dụ Kết quả DEMO
& so sánh và x = 5, y = 4, ( x > 4 & y > 3) True DEMO
|| so sánh hoặc x = 5, y = 4, ( x > 4 || y > 6) True DEMO
! phủ định của phép so sánh x = 5, y = 4, !( x == y) True DEMO

JavaScript Bitwise Operators

Bit operators sẽ hoạt động dựa trên hệ cơ số 32, các toán tử số sẽ được chuyển sang hệ cơ số 32 sau đó thực hiện các phép tính, kết quả trả về sẽ được chuyển đổi lại thành hệ cơ số mà Javascript sử dụng.

Toán tử Mô tả Ví dụ Giải thích Kết quả Kết quả ở hệ thập phân
& AND x = 5 & 1 0101 & 0001 0001 1
| OR x = 5 | 1 0101 | 0001 0101  5
~ NOT ~ 5 ~0101 1010 10
^ XOR x = 5 ^ 1 0101 ^ 0001 0100 4
<< dịch trái x = 5 << 1 0101 << 0001 1010 10
>> dịch phải x = 5 >> 1 0101 >> 0001 0010 2

The typeof Operator

The typeof Operator được sử dụng để lấy về kiểu dữ liệu của biến, đối tượng, hàm hoặc expression:

Ví dụ RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Học lập trình miễn phí tại freetuts.net</h1>
        <p id="result"></p>
  
        <button onclick="myFunction()">Run</button>
        
        <script>
            function myFunction() {
                var content = '"Bee" - ' + typeof "Bee" + "<br>";
                    content = content + 'False - ' + typeof false + "<br>";
                    content = content + '10.9 - ' + typeof 10.9 + "<br>";
                    content = content + 'NaN - ' + typeof NaN + "<br>";
                    content = content + '[1, 2, 3, 4] - ' + typeof [1, 2, 3, 4] + "<br>";
                    content = content + '{name:"Bee", age:21} - ' 
                    + typeof {name:'Bee', age:21} + "<br>";
                    content = content + 'Date() - ' + typeof Date() + "<br>";
                    content = content + 'function () {} - ' + typeof function () {} + "<br>";
                    content = content + 'Freetuts - ' + typeof Freetuts + "<br>";
                    content = content + 'null - ' + typeof null + "<br>";
                document.getElementById("result").innerHTML = content;
            }
        </script>
    </body>
</html>

Từ ví dụ ta có thể thấy:

  • Kiểu dữ liệu của NaN là number.
  • Kiểu dữ liệu của array là object.
  • Kiểu dữ liệu của null là object.
  • Kiểu dữ liệu của một đối tượng ngày tháng là object.
  • Kiểu dữ liệu của biến chưa xác định là undefined.

Do đó, không thể dùng typeof để xác định kiểu dữ liệu array hoặc date.

The delete Operator

The delete Operator sẽ xóa một property ( thuộc tính) của đối tượng.

Ví dụ RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Học lập trình miễn phí tại freetuts.net</h1>
        <p id="result"></p>
  
        <button onclick="myFunction()">Run</button>
        
        <script>
            var car = {
                name: "Lamborghini galardo",
                color: "black",
                cost: 300000,
                country: "Italy" 
            }
            var content = 'name - ' + car.name + '<br>';
            content = content +  'color - ' + car.color + '<br>';
            content = content +  'cost - ' + car.cost + ' $ <br>';
            content = content +  'country - ' + car.country + '<br>';
            document.getElementById("result").innerHTML = content;
            function myFunction() {
                delete car.country;
                var content = 'name - ' + car.name + '<br>';
                content = content +  'color - ' + car.color + '<br>';
                content = content +  'cost - ' + car.cost + ' $ <br>';
                content = content +  'country - ' + car.country + '<br>';
                document.getElementById("result").innerHTML = content;
            };
        </script>
    </body>
</html>

The delete Operator sẽ xóa cả giá trị của thuộc tính và chính thuộc tính đó, thuộc tính đã bị xóa sẽ không thể được sử dụng trước khi được thêm lại vào đối tượng.

The delete Operator được thiết kế để sử dụng với một thuộc tính của đối tượng do đó nó sẽ không có hiệu quả đối với biến hoặc hàm.

The delete Operator không nên được sử dụng đối với thuộc tính được khai báo trước của đối tượng Javascript, nó có thể khiến chương trình của bạn bị lỗi.

Một số thuộc tính được khai báo trước của đối tượng Javascript : 

  • window object
    • closed;
    • document;
    • history;
    • location
  • document object
    • linkColor;
    • vlinkColor;
    • alinkColor;

The in Operator

The in operator sẽ trả về True nếu phương thức đã khai báo trong một đối tượng. Phương thức này khá giống với hàm array_key_exists() trong PHP. 

Lưu ý rằng phương thức này sẽ kiểm tra tên của thuộc tính chứ không phải giá trị của thuộc tính.

Ví dụ RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Học lập trình miễn phí tại freetuts.net</h1>
        <p id="result"></p>
  
        <button onclick="myFunction()">Run</button>
        
        <script>
            function myFunction() {
                var content;
                // Arrays
                var language = ["php", "js", "css", "html"];
                content = content + 'Arrays :<br>'
                content = content + '0 in cars - ' + (2 in language) + '<br>';
                content = content + '3 in cars - ' + (3 in language) + '<br>';
                content = content + '0 in cars - ' + (4 in language) + '<br>';
                content = content + 'php in cars - ' + ("php" in language) + '<br>';
                content = content + 'css in cars - ' + ("css" in language) + '<br>';
                content = content + 'lenght in cars - ' + ("lenght" in language) + '<br><br>';

                // Objects
                var person = {firstName:"John", lastName:"Doe", age:50};
                content = content + 'Objects :<br>'
                content = content + 'firstName in person - ' + ("firstName" in person) + '<br>';
                content = content + 'lastName in person - ' + ("lastName" in person) + '<br>';
                content = content + 'Doe in person - ' + ("Doe" in person) + '<br><br>';

                // Predefined objects
                content = content + 'Predefined objects :<br>'
                content = content + 'PI in Math - ' + ("PI" in Math) + '<br>';
                content = content + '3 in Number - ' + ("NaN" in Number) + '<br>';
                content = content + '0 in String - ' + ("length" in String) + '<br>';
                document.getElementById("result").innerHTML = content;
            };
        </script>
    </body>
</html>

The instanceof Operator

The instanceof Operator sẽ trả về True nếu đối tượng là một đại diện của một đối tượng được định nghĩa từ trước của Javascript bao gồm string, number, array, object .vv...

Ví dụ RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Học lập trình miễn phí tại freetuts.net</h1>
        <p id="result"></p>
  
        <button onclick="myFunction()">Run</button>
        
        <script>
            function myFunction() {
                var language = ["php", "js", "css", "html"];
                var content = 'language is a string Object - ' 
                + (language instanceof String) + '<br>';

                content = content + 'language is a Array Object - ' 
                + (language instanceof Array) + '<br>';

                content = content + 'language is a Number Object - ' 
                + (language instanceof Number) + '<br>';

                content = content + 'language is a Object Object - ' 
                + (language instanceof Object) + '<br>';

                content = content + 'language is a Date Object - ' 
                + (language instanceof Date) + '<br>';

                document.getElementById("result").innerHTML = content;
            }
        </script>
    </body>
</html>

The void Operator

The void Operator sẽ thực hiện một câu lệnh hay một biểu thức và trả về Fasle. Ví dụ sử dụng void(0) trong thẻ a để vô hiệu hóa link tránh việc tải lại trang.

Ví dụ RUN
<a href="javascript:void(0);">
   link bị vô hiệu hóa!
</a>
<br>
<a href="javascript:void(document.body.style.backgroundColor='red');">
  Click để thay đổi màu nền thành màu đỏ!
</a>

Để hiểu rõ hơn ta tìm hiểu ví dụ sau:

Ví dụ RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Học lập trình miễn phí tại freetuts.net</h1>
        <p id="result"></p>
  
        <button onclick="myFunction()">Run</button>
        
        <script>
            function myFunction() {
                var a ,b, c;
                a = void( b = 'freetuts.net', c = '100');
                var content = 'a - ' + a + '<br>';
                content = content + 'b - ' + b + '<br>';
                content = content + 'c - ' + c + '<br>';
                document.getElementById("result").innerHTML = content;
            }
        </script>
    </body>
</html>

Ta có thể thấy biến b và c đã được void() gán giá trị tuy nhiên sau khi thực hiện gán giá trị cho b và c thì a được void() trả về giá trị undefined.

Tham khảo: w3schools.com

Học Javascript qua các bài tập thực hành

Bạn muốn học và nắm bắt Javascript một cách nhanh nhất thì khoá học Javascript từ đầu sẽ giúp bạn, đây là khóa học được biên soạn dành cho người mới học, và mọi thứ sẽ thông qua thực hành, bạn sẽ dễ dàng nắm bắt và nhớ lâu hơn. Bạn sẽ được học xử kỹ thuật lý các hiệu ứng, thao tác với DOM, BOM và nhiều kỹ thuật khác.

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

FEDU - 25 – Thiết kế hiệu ứng bằng Javascript và illustrator

(Giảng viên: NGUYỄN ĐỨC VIỆT )

XEM
FEDU - 22 – Học tất tần tật về Javascript từ đầu

(Giảng viên: Nguyễn Đức Việt)

XEM
UNICA - Học lập trình JAVASCRIPT

(Giảng viên: )

XEM