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ế.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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ài viết này được đăng tại [free tuts .net]

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áp: variablename = (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

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

JavaScript Operators Reference

JavaScript Arithmetic Operators

JavaScript Assignment Operators

JavaScript String Operators

Comparison Operators

Conditional (Ternary) Operator

Logical Operators

JavaScript Bitwise Operators

The typeof Operator

The delete Operator

The in Operator

The instanceof Operator

The void Operator

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

JavaScript Operators Reference

JavaScript Arithmetic Operators

JavaScript Assignment Operators

JavaScript String Operators

Comparison Operators

Conditional (Ternary) Operator

Logical Operators

JavaScript Bitwise Operators

The typeof Operator

The delete Operator

The in Operator

The instanceof Operator

The void Operator

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript