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:
'{"brand":"Toyota", "name":"Prius 2018", "weight":850}'
– Hàm JavaScript JSON.parse() được sử dụng để chuyển đổi (convert) chuỗi text thành đối tượng JavaScript:
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:
var obj = {"brand":"Toyota", "name":"Prius 2018", "weight":850};
– Sử dụng hàm JavaScript JSON.stringify() để chuyển đổi nó thành một chuỗi.
var myJSON = JSON.stringify(obj);
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ụ:
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}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ụ:
// Kết quả của d1 và d2 là giống nhau: var d1 = Date.now(); var d2 = new Date(); d2.getTime();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
// Tạo đối tượng car var 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 2018Try it »
Ví dụ: Tạo ra một setter và một getter cho property quốc gia nation
// Tạo đối tượng car var 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; // JapanTry 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
// Tạo đối tượng car var 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; // JAPANTry 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
// Tạo đối tượng car var 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
Ví dụ 2: Object property là một getter
// Tạo đối tượng car var 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
– 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:
– 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
var car = { brand: "Toyota", name: "Prius 2018", weight: 850, }
Ví dụ: Định nghĩa Array
var numbers = [ 1, 5, 10, 25, 40, 100, ];
– 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
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" }
JSON Objects:
// 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)
JSON Arrays:
// Allowed: var numbers = [40, 100, 1, 5, 25, 10] // Not allowed: var numbers = [40, 100, 1, 5, 25, 10,]
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
var obj = {brand: "Toyota", new: "good"}; obj.new; // return goodTry it »
[…] Date.now() […]