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

– 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:

var obj = JSON.parse('{"brand":"Toyota", "name":"Prius 2018", "weight":850}');

– 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);

– myJSON bây giờ đã là một chuỗi, và sẵn sàng để được gửi đến web server:

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}

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

// Kết quả của d1 và d2 là giống nhau:
var d1 = Date.now();

var d2 = new Date();
d2.getTime();

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.

// 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

// 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

// 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

★ JavaScript Function hay Getter?

– Sự khác biệt giữa hai ví dụ sau là gì?

// 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

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

– 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:

var str = "MINH HOÀNG BLOG";
str.charAt(0);		// return M

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

var str = "MINH HOÀNG BLOG";
str[0];				// return M

ECMAScript 5 sử dụng dấu phẩy ở định nghĩa đối tượng và mảng:

var car = {
  brand: "Toyota",
  name: "Prius 2018",
  weight: 850,
}

var numbers = [
  1,
  5,
  10,
  25,
  40,
  100,
];

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"
}

// 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)

// Allowed:
var numbers = [40, 100, 1, 5, 25, 10]

// Not allowed:
var numbers = [40, 100, 1, 5, 25, 10,]

– 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 \

"Hello \
World!";

– 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 +

"Hello " + 
"World!";

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.

var obj = {brand: "Toyota", new: "good"};

obj.new;	// return good