JavaScript

Những điểm mới trong ES5 (ECMAScript 2009)

Những điểm mới trong ES5 (ECMAScript 2009)
Được viết bởi Minh Hoàng

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

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.

13. JSON.parse() Chuyển đổi một chuỗi thành đối tượng JavaScript

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:

Ví dụ:
var obj = JSON.parse('{"brand":"Toyota", "name":"Prius 2018", "weight":850}');
Try it »
14. JSON.stringify() Chuyển đổi đối tượng JavaScript thành chuỗi

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

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

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 2018
Try 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;		// Japan
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
// 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;		// JAPAN
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
// 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

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ụ:
var str = "MINH HOÀNG BLOG";
str.charAt(0);		// return M
Try it »

– ECMAScript 5 cho phép truy cập property trên các chuỗi:

Ví dụ:
var str = "MINH HOÀNG BLOG";
str[0];				// return M
Try it »

19. Dấu phẩy ở cuối mảng và đối tượng literals

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

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í dụ:
"Hello \
World!";
Try it »

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 +

Ví dụ:
"Hello " + 
"World!";
Try it »
21. Hỗ trợ từ khoá có thể được dùng làm tên thuộc tính

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 good
Try it »

Tham khảo w3schools.

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!


Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp người đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

Bình luận của bạn

avatar

Những điểm mới trong ES5 (ECMAScript 2009)

by Minh Hoàng Time to read: 9 min
0