Những điểm mới trong ES5 (ECMAScript 2009)
– ECMAScript 5 còn được gọi là ES5 hay ECMAScript 2009.
– Trong bài viết này sẽ giới thiệu một số tính năng quan trọng nhất của ES5.
- Chỉ thị “use strict”
- String.trim() Phương thức xóa khoảng trắng trong chuỗi
- Array.isArray() Kiểm tra xem một đối tượng có phải là một mảng hay không
- Array.forEach() Lặp mảng
- Array.map() Tạo mảng mới
- Array.filter() Tạo mảng mới
- Array.reduce() Thao tác với từng phần tử của mảng
- Array.reduceRight() Thao tác với từng phần tử của mảng
- Array.every() Kiểm tra phần tử của mảng
- Array.some() Kiểm tra phần tử của mảng
- Array.indexOf() Tìm kiếm phần tử, trả về index đầu tiên được tìm thấy
- Array.lastIndexOf() Tìm kiếm phần tử, trả về index cuối cùng được tìm thấy
- JSON.parse() Chuyển đổi một chuỗi thành đối tượng JavaScript
- JSON.stringify() Chuyển đổi đối tượng JavaScript thành chuỗi
- Date.now() Trả về số mili giây kể từ zero date
- Property Getters và Setters
- Các phương thức Object Property mới
13. JSON.parse() Chuyển đổi một chuỗi thành đối tượng JavaScript
– Việc sử dụng JSON phổ biến là để nhận dữ liệu từ máy chủ web (web server).
– Giả sử bạn nhận được chuỗi text sau từ một web server:
– Hàm JavaScript JSON.parse() được sử dụng để chuyển đổi (convert) chuỗi text thành đối tượng JavaScript:
Ví dụ:
[code language=”javascript”]var obj = JSON.parse(‘{"brand":"Toyota", "name":"Prius 2018", "weight":850}’);[/code] Try it »14. JSON.stringify() Chuyển đổi đối tượng JavaScript thành chuỗi
– Việc sử dụng JSON phổ biến là gửi dữ liệu đến web server.
– Khi gửi dữ liệu đến web server, dữ liệu phải là một chuỗi (string).
– Giả sử bạn có đối tượng này trong JavaScript:
– Sử dụng hàm JavaScript JSON.stringify() để chuyển đổi nó thành một chuỗi.
Kết quả sẽ là một chuỗi theo cú pháp JSON (JSON notation).
– myJSON bây giờ đã là một chuỗi, và sẵn sàng để được gửi đến web server:
Ví dụ:
[code language=”javascript”]var obj = {"brand":"Toyota", "name":"Prius 2018", "weight":850};var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
// Kết quả:
{"brand":"Toyota","name":"Prius 2018","weight":850}[/code]
Try it »
15. Date.now() Trả về số mili giây kể từ zero date
– Phương thức Date.now() trả về số mili giây kể từ zero date (tức là ngày 01/01/1970 00:00:00 theo giờ UTC).
– Phương thức Date.now() trả về kết quả giống như method getTime() được thực hiện trên một Date object.
Ví dụ:
[code language=”javascript”]// Kết quả của d1 và d2 là giống nhau:var d1 = Date.now();
var d2 = new Date();
d2.getTime();[/code]
Try it »
16. Property Getters và Setters
ES5 cho phép bạn định nghĩa các object methods bằng cú pháp giống như getting hoặc setting một property.
Ví dụ: Tạo một getter cho property fullName
[code language=”javascript”]// Tạo đối tượng carvar car = {
brand: "Toyota",
name : "Prius 2018",
get fullName() {
return this.brand + " " + this.name;
}
};
// Lấy giá trị của object property bằng getter
car.fullName; // Toyota Prius 2018[/code]
Try it »
Ví dụ: Tạo ra một setter và một getter cho property quốc gia nation
[code language=”javascript”]// Tạo đối tượng carvar car = {
brand: "Toyota",
name : "Prius 2018",
nation: "Unknown",
get quocgia() {
return this.nation;
},
set quocgia(value) {
this.nation = value;
}
};
// Lấy giá trị của object property bằng getter
car.quocgia; // Unknown
// Set giá trị cho một object property bằng setter
car.quocgia = "Japan";
// Lấy giá trị của object property bằng getter
car.quocgia; // Japan[/code]
Try it »
Ví dụ: Sử dụng một setter để chỉnh sửa giá trị của object property quốc gia nation thành chữ in HOA
[code language=”javascript”]// Tạo đối tượng carvar car = {
brand: "Toyota",
name : "Prius 2018",
nation: "Unknown",
set quocgia(value) {
this.nation = value.toUpperCase();
}
};
// Hiển thị giá trị của object property
car.nation; // Unknown
// Set giá trị cho một object property bằng setter
car.quocgia = "japan";
// Hiển thị giá trị của object property
car.nation; // JAPAN[/code]
Try it »
★ JavaScript Function hay Getter?
– Sự khác biệt giữa hai ví dụ sau là gì?
Ví dụ 1: Object property là một function
[code language=”javascript”]// Tạo đối tượng carvar car = {
brand: "Toyota",
name : "Prius 2018",
fullName : function() {
return this.brand + " " + this.name;
}
};
// Hiển thị data của object property bằng method:
car.fullName(); // Toyota Prius 2018[/code]
Ví dụ 2: Object property là một getter
[code language=”javascript”]// Tạo đối tượng carvar car = {
brand: "Toyota",
name : "Prius 2018",
get fullName() {
return this.brand + " " + this.name;
}
};
// Hiển thị data của object property bằng getter:
car.fullName; // Toyota Prius 2018[/code]
– Ví dụ 1 truy cập fullName như một function: car.fullName().
– Ví dụ 2 truy cập fullName dưới dạng một property: car.fullName.
– Ví dụ 2 cung cấp cú pháp đơn giản hơn.
★ Tại sao sử dụng Getters và Setters?
- Nó cung cấp cú pháp đơn giản hơn.
- Cung cấp cú pháp bình đẳng (equal syntax) cho các properties và methods.
- Đảm bảo chất lượng dữ liệu tốt hơn.
- Rất thuận tiện để làm những việc chạy nền phía sau chương trình.
18. Truy cập thuộc tính [] trên chuỗi
– Phương thức charAt() trả về ký tự tại một chỉ mục index (vị trí) được chỉ định trong một chuỗi:
Ví dụ:
[code language=”javascript”]var str = "MINH HOÀNG BLOG";str.charAt(0); // return M[/code] Try it »
– ECMAScript 5 cho phép truy cập property trên các chuỗi:
19. Dấu phẩy ở cuối mảng và đối tượng literals
ECMAScript 5 sử dụng dấu phẩy ở định nghĩa đối tượng và mảng:
Ví dụ: Định nghĩa Object
[code language=”javascript”]var car = {brand: "Toyota",
name: "Prius 2018",
weight: 850,
}[/code]
Ví dụ: Định nghĩa Array
[code language=”javascript”]var numbers = [1,
5,
10,
25,
40,
100,
];[/code]
– Với IE8, nếu ở phần tử cuối có dấu phẩy theo sau thì chương trình sẽ bị crash.
– JSON không cho phép trailing commas.
Ví dụ: Định nghĩa JSON
[code language=”javascript”]example1 = {"brand":"Toyota", "name":"Prius 2018", "weight":46}example2 =
{
"array": [
1,
2,
3
],
"boolean": true,
"color": "#82b92c",
"null": null,
"number": 123,
"object": {
"a": "b",
"c": "d",
"e": "f"
},
"string": "Hello World"
}[/code]
JSON Objects:
[code language=”javascript”]// Allowed:var car = ‘{"brand":"Toyota", "name":"Prius 2018", "weight":850}’
JSON.parse(car)
// Not allowed:
var car = ‘{"brand":"Toyota", "name":"Prius 2018", "weight":850,}’
JSON.parse(car)[/code]
JSON Arrays:
[code language=”javascript”]// Allowed:var numbers = [40, 100, 1, 5, 25, 10]
// Not allowed:
var numbers = [40, 100, 1, 5, 25, 10,][/code]
20. Hỗ trợ chuỗi trên nhiều dòng
– ECMAScript 5 cho phép bạn ngắt dòng một text string bằng cách sử dụng dấu backslash \
Với cách sử dụng này thì không phải tất cả các trình duyệt đều hỗ trợ.
– Một cách an toàn hơn để tách một chuỗi ký tự trên nhiều dòng là sử dụng ký tự nối chuỗi thường dùng là dấu cộng +
21. Hỗ trợ từ khoá có thể được dùng làm tên thuộc tính
ECMAScript 5 cho phép các từ dành riêng (reserved words) có thể được sử dụng làm tên thuộc tính.
Ví dụ: Định nghĩa một object có property name là từ khóa new
[code language=”javascript”]var obj = {brand: "Toyota", new: "good"};obj.new; // return good[/code] Try it »
[…] Date.now() […]