JavaScript ES5

ECMAScript 5 là gì?

ECMAScript 5 cũng được gọi là ES5 và ECMAScript 2009.

Chương này giới thiệu một số tính năng quan trọng nhất của ES5.

Tính năng ECMAScript 5

Đây là các tính năng mới được phát hành vào năm 2009:

  • "use strict" chỉ thị
  • String.trim()
  • Array.isArray()
  • Array.forEach()
  • Array.map()
  • Array.filter()
  • Array.reduce()
  • Array.reduceRight()
  • Array.every()
  • Array.some()
  • Array.indexOf()
  • Array.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • Date.now()
  • Thuộc tính Getter và Setter
  • Thuộc tính và phương thức đối tượng mới

Thay đổi ngữ pháp ECMAScript 5

  • Truy cập thuộc tính chuỗi bằng dấu ngoặc vuông [ ]
  • Cộng dư dấu phẩy chấm sau dấu chấm phẩy trong các biểu thức mảng và đối tượng
  • Chuỗi văn bản nhiều dòng
  • Đặt tên thuộc tính là từ khóa bảo vệ

"use strict" chỉ thị

"use strict"Định nghĩa mã JavaScript nên được thực thi trong chế độ chặt chẽ."

Ví dụ, khi sử dụng chế độ chặt chẽ, bạn không thể sử dụng biến không được khai báo.

Bạn có thể sử dụng chế độ chặt chẽ trong tất cả các chương trình. Nó giúp bạn viết mã rõ ràng hơn, ví dụ như ngăn bạn sử dụng biến không được khai báo.

"use strict"Chỉ là một biểu thức chuỗi. Các trình duyệt cũ không hiểu chúng sẽ không ném lỗi."

Vui lòng đọc Chế độ chặt chẽ JS Để đọc thêm nội dung.

String.trim()

String.trim() Xóa các ký tự trắng ở đầu và cuối của chuỗi.

Ví dụ

var str = "       Hello World!        ";
alert(str.trim());

Thử ngay

Vui lòng Phương thức chuỗi JS Để đọc thêm nội dung.

Array.isArray()

isArray() Phương thức kiểm tra đối tượng có phải là mảng không.

Ví dụ

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

Thử ngay

Vui lòng JS Mảng Để đọc thêm nội dung.

Array.forEach()

forEach() Phương thức này gọi hàm một lần cho mỗi phần tử trong mảng.

Ví dụ

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Thử ngay

Vui lòng Phương pháp duyệt mảng trong JavaScript Học thêm tại đây.

Array.map()

Ví dụ này nhân giá trị của mỗi phần tử trong mảng với 2:

Ví dụ

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

Thử ngay

Vui lòng Phương pháp duyệt mảng trong JavaScript Học thêm tại đây.

Array.filter()

Ví dụ này tạo ra một mảng mới từ các phần tử có giá trị lớn hơn 18:

Ví dụ

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

Thử ngay

Vui lòng Phương pháp duyệt mảng trong JavaScript Học thêm tại đây.

Array.reduce()

Ví dụ này xác định tổng của tất cả các số trong mảng:

Ví dụ

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

Thử ngay

Vui lòng Phương pháp duyệt mảng trong JavaScript Học thêm tại đây.

Array.reduceRight()

Ví dụ này cũng là để xác định tổng của tất cả các số trong mảng:

Ví dụ

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

Thử ngay

Vui lòng Phương pháp duyệt mảng trong JavaScript Học thêm tại đây.

Array.every()

Ví dụ này kiểm tra xem tất cả các giá trị đều vượt quá 18 không:

Ví dụ

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

Thử ngay

Vui lòng Phương pháp duyệt mảng trong JavaScript Học thêm tại đây.

Array.some()

Ví dụ này kiểm tra xem có một số giá trị nào đó vượt quá 18 không:

Ví dụ

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
function myFunction(value) {
  return value > 18;
}

Thử ngay

Vui lòng Phương pháp duyệt mảng trong JavaScript Học thêm tại đây.

Array.indexOf()

Tìm kiếm giá trị của một phần tử trong mảng và trả về vị trí của nó:

Ví dụ

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Thử ngay

Vui lòng Phương pháp duyệt mảng trong JavaScriptHọc thêm tại đây.

Array.lastIndexOf()

Array.lastIndexOf() và Array.indexOf() Tương tự, nhưng bắt đầu từ cuối mảng.

Ví dụ

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Thử ngay

Vui lòng Phương pháp duyệt mảng trong JavaScript Học thêm tại đây.

JSON.parse()

Một trong những用途 phổ biến của JSON là nhận dữ liệu từ máy chủ Web.

Hãy tưởng tượng, bạn nhận được chuỗi văn bản này từ máy chủ Web:

'{"name":"Bill", "age":62, "city":"Seatle"}'

Hàm trong JavaScript JSON.parse() Để chuyển đổi văn bản thành đối tượng JavaScript:

var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');

Thử ngay

Vui lòng tham khảo Hướng dẫn JSON Học thêm tại đây.

JSON.stringify()

Một trong những用途 phổ biến của JSON là gửi dữ liệu đến máy chủ Web.

Khi gửi dữ liệu đến máy chủ Web, dữ liệu phải là chuỗi.

Hãy tưởng tượng, chúng ta có đối tượng này trong JavaScript:

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

Vui lòng sử dụng hàm JSON.stringify() của JavaScript để chuyển đổi nó thành chuỗi.

var myJSON = JSON.stringify(obj);

Kết quả sẽ là chuỗi tuân theo định dạng JSON.

myJSON bây giờ là một chuỗi, đã sẵn sàng gửi lên máy chủ:

Ví dụ

var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

Thử ngay

Vui lòng tham khảo Hướng dẫn JSON Học thêm tại đây.

Date.now()

Date.now() trả về số miligian秒 từ ngày đầu tiên (01 tháng 01 năm 1970 00:00:00:00).

Ví dụ

var timInMSs = Date.now();

Thử ngay

Date.now() trả về kết quả tương tự như khi thực hiện getTime() trên đối tượng Date.

Vui lòng Ngày tháng JS để học thêm.

Thuộc tính Getter và Setter

ES5 cho phép bạn sử dụng ngữ pháp tương tự như lấy hoặc đặt thuộc tính để định nghĩa phương thức đối tượng.

Ví dụ này tạo ra một thuộc tính có tên là fullName: getter:

Ví dụ

// Tạo đối tượng:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Sử dụng getter để hiển thị dữ liệu từ đối tượng:
document.getElementById("demo").innerHTML = person.fullName;

Thử ngay

Ví dụ này tạo ra một setter và getter:

Ví dụ

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  ,
  set lang(value) {
    this.language = value;
  }
});
// Sử dụng setter để đặt thuộc tính đối tượng:
person.lang = "en";
// Sử dụng getter để hiển thị dữ liệu từ đối tượng:
document.getElementById("demo").innerHTML = person.lang;

Thử ngay

Ví dụ này sử dụng setter để đảm bảo cập nhật大写 của ngôn ngữ:

Ví dụ

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Sử dụng setter để đặt thuộc tính đối tượng:
person.lang = "en";
// Hiển thị dữ liệu từ đối tượng:
document.getElementById("demo").innerHTML = person.language;

Thử ngay

Vui lòng Truy cập đối tượng JS để học thêm về Getter và Setter.

Thuộc tính và phương thức đối tượng mới

Object.defineProperty() là phương thức đối tượng mới trong ES5.

Nó cho phép bạn định nghĩa thuộc tính đối tượng và/hoặc thay đổi giá trị và/hoặc metadata của thuộc tính.

Ví dụ

// Tạo đối tượng:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Thay đổi thuộc tính:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable: true,
  configurable : true
});
// Liệt kê thuộc tính
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Thử ngay

Ví dụ tiếp theo là cùng mã nhưng nó ẩn thuộc tính ngôn ngữ trong liệt kê:

Ví dụ

// Tạo đối tượng:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Thay đổi thuộc tính:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Liệt kê thuộc tính
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Thử ngay

Ví dụ này tạo ra một setter và getter để đảm bảo cập nhật ngôn ngữ viết hoa:

Ví dụ

// Tạo đối tượng:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO"
});
// Thay đổi thuộc tính:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Thay đổi ngôn ngữ
person.language = "en";
// Hiển thị ngôn ngữ
document.getElementById("demo").innerHTML = person.language;

Thử ngay

Các phương thức mới của ES5

ECMAScript 5 đã thêm nhiều phương thức mới cho JavaScript:

// Thêm hoặc thay đổi thuộc tính đối tượng
Object.defineProperty(object, property, descriptor)
// Thêm hoặc thay đổi nhiều thuộc tính đối tượng
Object.defineProperties(object, descriptors)
// Truy cập thuộc tính
Object.getOwnPropertyDescriptor(object, property)
// Trả về tất cả các thuộc tính như một mảng
Object.getOwnPropertyNames(object)
// Trả về các thuộc tính có thể liệt kê như một mảng
Object.keys(object)
// Truy cập nguyên mẫu
Object.getPrototypeOf(object)
// Ngăn cản thêm thuộc tính vào đối tượng
Object.preventExtensions(object)
// Nếu có thể thêm thuộc tính vào đối tượng, thì trả về true
Object.isExtensible(object)
// Ngăn cản thay đổi thuộc tính đối tượng (không phải giá trị)
Object.seal(object)
// Nếu đối tượng bị niêm phong, thì trả về true
Object.isSealed(object)
// Ngăn cản mọi thay đổi đối với đối tượng
Object.freeze(object)
// Nếu đối tượng bị đóng băng, thì trả về true
Object.isFrozen(object)

Vui lòng Đối tượng ECMAScript5 Học thêm tại đây.

Truy cập thuộc tính chuỗi

charAt() Phương thức trả về ký tự tại chỉ số (vị trí) cụ thể trong chuỗi:

Ví dụ

var str = "HELLO WORLD";
str.charAt(0);            // Trả về H

Thử ngay

ECMAScript 5 cho phép truy cập thuộc tính chuỗi:

Ví dụ

var str = "HELLO WORLD";
str[0];                   // Trả về H

Thử ngay

truy cập thuộc tính chuỗi có thể không dự đoán được.

Vui lòng Phương thức chuỗi JS Học thêm tại đây.

Dấu phẩy trôi (Trailing Commas)

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

Mẫu Object

person = {
  firstName: "Bill",
  lastName: " Gates",
  age: 62,
}

Mẫu Array

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

Cảnh báo !!

Internet Explorer 8 sẽ bị sụp đổ.

JSON không được phép sử dụng dấu phẩy trôi.

Đối tượng JSON:

// Được phép:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}
JSON.parse(person)
// Không được phép:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}
JSON.parse(person)

Mảng JSON:

// Được phép:
points = [40, 100, 1, 5, 25, 10]
// Không được phép:
points = [40, 100, 1, 5, 25, 10,]

Chuỗi văn bản nhiều dòng

Nếu sử dụng dấu反斜杠 để định nghĩa, ECMAScript 5 cho phép chuỗi văn bản nhiều dòng (lời văn):

Ví dụ

"Hello \
Kitty!";

Thử ngay

Phương pháp \\

Các trình duyệt cũ hơn có thể xử lý cách khác xung quanh khoảng trống xung quanh dấu chéo ngược.

Một số trình duyệt cũ không cho phép khoảng trống sau ký tự \.

Một cách an toàn hơn để phân tích chuỗi văn bản là sử dụng chuỗi cộng:

Ví dụ

"Hello " + 
"Kitty!";

Thử ngay

Từ khóa bảo vệ làm tên thuộc tính

ECMAScript 5 cho phép từ khóa bảo vệ được sử dụng làm tên thuộc tính:

Ví dụ đối tượng

var obj = {name: "Bill", new: "yes"}

Thử ngay

Hỗ trợ trình duyệt ES5 (ECMAScript 5)

Chrome 23, IE 10 và Safari 6 là các trình duyệt đầu tiên hỗ trợ hoàn toàn ECMAScript 5:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
Tháng 9 năm 2012 Tháng 9 năm 2012 Tháng 4 năm 2013 Tháng 7 năm 2012 Tháng 7 năm 2013