JavaScript Operators Reference - Bài tập Javascript
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 ...
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ị.
Để 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:
Để 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= "Zaidap.com.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.
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.
Để 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
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ị.
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.
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Học lập trình miễn phí tại Zaidap.com.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 + 'Zaidap.com - ' + typeof Zaidap.com + "<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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Học lập trình miễn phí tại Zaidap.com.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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Học lập trình miễn phí tại Zaidap.com.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...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Học lập trình miễn phí tại Zaidap.com.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.
<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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Học lập trình miễn phí tại Zaidap.com.net</h1>
<p id="result"></p>
<button onclick="myFunction()">Run</button>
<script>
function myFunction() {
var a ,b, c;
a = void( b = 'Zaidap.com.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
