JavaScript ES5
ECMAScript 2009, còn được gọi là ES5, là bản sửa đổi lớn đầu tiên của JavaScript.
Chương này mô tả các tính năng quan trọng nhất của ES5.
Tính năng ES5
- "Sử dụng nghiêm ngặt"
- Truy cập chuỗi [ số ]
- Chuỗi nhiều dòng
- String.trim()
- Mảng.isArray()
- Mảng choEach()
- Bản đồ mảng()
- Bộ lọc mảng()
- Giảm mảng()
- Mảng giảmRight()
- Mảng mọi()
- Mảng một số()
- Mảng chỉ mụcOf()
- Mảng LastIndexOf()
- JSON.parse()
- JSON.stringify()
- Date.now()
- Ngày đếnISOString()
- Ngày tớiJSON()
- Trình lấy và định vị thuộc tính
- Các từ dành riêng làm tên thuộc tính
- Object.create()
- Object.keys()
- Quản lý đối tượng
- Bảo vệ đối tượng
- Đối tượng xác địnhProperty()
- Hàm liên kết()
- Dấu phẩy ở cuối
Hỗ trợ trình duyệt
ES5 (JavaScript 2009) được hỗ trợ đầy đủ trong tất cả các trình duyệt hiện đại kể từ tháng 7 năm 2013:
| Chrome 23 |
IE/Edge 10 |
Firefox 21 |
Safari 6 |
Opera 15 |
| Sep 2012 | Sep 2012 | Apr 2013 | Jul 2012 | Jul 2013 |
Chỉ thị “sử dụng nghiêm ngặt”
"use strict" định nghĩa rằng mã JavaScript phải được thực thi ở "chế độ nghiêm ngặt".
Ví dụ, với chế độ nghiêm ngặt, bạn có thể không sử dụng các biến không được khai báo.
Bạn có thể sử dụng chế độ nghiêm ngặt trong tất cả các chương trình của mình. Nó giúp bạn viết mã sạch hơn, như ngăn bạn sử dụng các 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ũ sẽ không đưa ra lỗi nếu chúng không hiểu lỗi đó.
Đọc thêm trong Chế độ nghiêm ngặt của JS .
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 (vị trí) được chỉ định trong chuỗi:
ES5 cho phép truy cập thuộc tính trên chuỗi:
Quyền truy cập thuộc tính trên chuỗi có thể hơi khó đoán.
Đọc thêm trong Phương thức chuỗi JS .
Chuỗi trên nhiều dòng
ES5 cho phép các chuỗi ký tự trên nhiều dòng nếu thoát bằng dấu gạch chéo ngược: Phương thức \ có thể không được hỗ trợ phổ biến.
Các trình duyệt cũ hơn có thể xử lý khoảng trắng xung quanh dấu gạch chéo ngược theo cách khác.
Một số trình duyệt cũ hơn không cho phép khoảng trắng phía sau ký tự \.
Một cách an toàn hơn để chia nhỏ một chuỗi ký tự là sử dụng phép cộng chuỗi:
Các từ dành riêng làm tên thuộc tính
ES5 cho phép các từ dành riêng làm tên thuộc tính:
Cắt chuỗi()
Phương thức trim() loại bỏ khoảng trắng ở cả hai bên của chuỗi.
Đọc thêm trong Phương thức chuỗi JS .
Mảng.isArray()
Phương thức isArray() kiểm tra xem một đối tượng có phải là một mảng hay không.
Ví dụ
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
} Hãy tự mình thử »Đọc thêm trong JS Mảng .
Mảng choEach()
Phương thức forEach() gọi hàm một lần cho mỗi phần tử mảng.
Ví dụ
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
Hãy tự mình thử »Tìm hiểu thêm trong Phương pháp lặp mảng của JS .
Bản đồ mảng()
Ví dụ này nhân mỗi giá trị 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;
}
Hãy tự mình thử »Tìm hiểu thêm trong Phương pháp lặp mảng của JS .
Bộ lọc mảng()
Ví dụ này tạo 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;
} Hãy tự mình thử »Tìm hiểu thêm trong Phương pháp lặp mảng của JS .
Giảm mảng()
Ví dụ này tìm tổng của tất cả các số trong một mảng:
Ví dụ
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
} Hãy tự mình thử »Tìm hiểu thêm trong Phương pháp lặp mảng của JS .
Mảng giảmRight()
Ví dụ này cũng tìm tổng của tất cả các số trong một mảng:
Ví dụ
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
} Hãy tự mình thử »Tìm hiểu thêm trong Phương pháp lặp mảng của JS .
Mảng mọi()
Ví dụ này kiểm tra xem tất cả các giá trị có lớn hơn 18 hay không:
Ví dụ
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
} Hãy tự mình thử »Tìm hiểu thêm trong Phương pháp lặp mảng của JS .
Mảng một số()
Ví dụ này kiểm tra xem một số giá trị có lớn hơn 18 hay không:
Ví dụ
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.some(myFunction);
function myFunction(value) {
return
value > 18;
} Hãy tự mình thử »Tìm hiểu thêm trong Phương pháp lặp mảng của JS .
Mảng chỉ mụcOf()
Tìm kiếm một giá trị phần tử trong mảng và trả về vị trí của nó.
Ví dụ
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
Hãy tự mình thử »Tìm hiểu thêm trong Phương pháp lặp mảng của JS .
Mảng LastIndexOf()
lastIndexOf() giống như indexOf() nhưng tìm kiếm từ cuối mảng.
Ví dụ
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
Hãy tự mình thử »Tìm hiểu thêm trong Phương pháp lặp mảng của JS .
JSON.parse()
Công dụ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":"John", "age":30, "city":"New York"}' Hàm JavaScript JSON.parse() được sử dụng để chuyển đổi văn bản thành đối tượng JavaScript:
var obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}'); Hãy tự mình thử »Đọc thêm trong Hướng dẫn JSON của chúng tôi.
JSON.stringify()
Công dụ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à một chuỗi.
Hãy tưởng tượng chúng ta có đối tượng này trong JavaScript:
var obj = {name:"John", age:30, city:"New York"};
Sử dụng hàm JavaScript JSON.stringify() để chuyển đổi nó thành chuỗi.
var myJSON = JSON.stringify(obj);Kết quả sẽ là một chuỗi theo ký hiệu JSON.
myJSON hiện là một chuỗi và sẵn sàng được gửi đến máy chủ:
Ví dụ
var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON; Hãy tự mình thử »Đọc thêm trong Hướng dẫn JSON của chúng tôi.
Ngày.now()
Date.now() trả về số mili giây kể từ ngày 0 (ngày 1 tháng 1 năm 1970 00:00:00 UTC).
Date.now() trả về giống như getTime() được thực hiện trên đối tượng Date .
Tìm hiểu thêm trong Ngày JS .
Ngày đếnISOString()
Phương thức toISOString() chuyển đổi một đối tượng Date thành một chuỗi, sử dụng định dạng chuẩn ISO:
Ví dụ
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
Hãy tự mình thử »Ngày tớiJSON()
toJSON() chuyển đổi một đối tượng Date thành một chuỗi, được định dạng dưới dạng ngày JSON.
Ngày JSON có cùng định dạng với tiêu chuẩn ISO-8601: YYYY-MM-DDTHH:mm:ss.sssZ:
Người thu thập và người định cư tài sản
ES5 cho phép bạn xác định các phương thức đối tượng bằng cú pháp giống như nhận hoặc thiết lập một thuộc tính.
Ví dụ này tạo một getter cho thuộc tính có tên fullName:
Ví dụ
// Create an object:
var person = {
firstName:
"John",
lastName : "Doe",
get
fullName() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.fullName; Hãy tự mình thử »Ví dụ này tạo một setter và getter cho thuộc tính ngôn ngữ:
Ví dụ
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
get lang() {
return this.language;
},
set lang(value) {
this.language = value;
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.lang;
Hãy tự mình thử »Ví dụ này sử dụng một setter để bảo mật các bản cập nhật chữ hoa của ngôn ngữ:
Ví dụ
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
set lang(value) {
this.language = value.toUpperCase();
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the
object:
document.getElementById("demo").innerHTML =
person.language;
Hãy tự mình thử »Tìm hiểu thêm về Gettes và Setters trong Trình truy cập đối tượng JS
Object.defineProperty()
Object.defineProperty() là một phương thức Object mới trong ES5.
Nó cho phép bạn xác định thuộc tính đối tượng và/hoặc thay đổi giá trị và/hoặc siêu dữ liệu của thuộc tính.
Ví dụ
// Create an Object:
const person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty (person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
//
Enumerate Properties
let txt = "";
for (let x in person) {
txt += person[x] + "<br>";
}
// Display Properties
document.getElementById("demo").innerHTML =
txt;
Hãy tự mình thử »Ví dụ tiếp theo cũng có mã tương tự, ngoại trừ nó ẩn thuộc tính ngôn ngữ khỏi bảng liệt kê:
Ví dụ
// Create an Object:
const person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty (person, "language", {
value: "EN",
writable : true,
enumerable : false,
configurable : true
});
//
Enumerate Properties
let txt = "";
for (let x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
Hãy tự mình thử »Ví dụ này tạo một setter và getter để bảo mật các cập nhật ngôn ngữ viết hoa:
Ví dụ
// Create an Object:
const person = {
firstName: "John",
lastName :
"Doe",
language : "NO"
};
// Change a Property:
Object.defineProperty (person, "language", {
get : function() { return
language },
set : function(value) { language = value.toUpperCase()}
});
// Change Language
person.language = "en";
// Display Language
document.getElementById("demo").innerHTML = person.language; Hãy tự mình thử »Object.create()
Phương thức Object.create() tạo một đối tượng từ một đối tượng hiện có.
Ví dụ
// Create an Object:
const person = {
firstName: "John",
lastName: "Doe"
};
// Create new Object
const man = Object.create(person);
man.firstName = "Peter";
Hãy tự mình thử »Object.keys()
Phương thức Object.keys() trả về một mảng chứa các khóa của một đối tượng.
Ví dụ
// Create an Object
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Get the Keys
const keys = Object.keys(person);
Hãy tự mình thử »Quản lý đối tượng
ES5 đã thêm các phương thức quản lý đối tượng mới vào JavaScript:
Quản lý đối tượng
// Adding or changing an object property
Object.defineProperty(object, property, descriptor)
// Adding or changing object properties
Object.defineProperties(object, descriptors)
// Accessing a Property
Object.getOwnPropertyDescriptor(object, property)
// Accessing Properties
Object.getOwnPropertyDescriptors(object)
// Returns all properties as an array
Object.getOwnPropertyNames(object)
// Accessing the prototype
Object.getPrototypeOf(object)
Tìm hiểu thêm trong Quản lý đối tượng .
Bảo vệ đối tượng
ES5 đã thêm các phương thức bảo vệ đối tượng vào JavaScript:
Bảo vệ đồ vật
// Prevents adding properties to an object
Object.preventExtensions(object)
// Returns true if properties can be added to an object
Object.isExtensible(object)
// Prevents changes of object properties (not values)
Object.seal(object)
// Returns true if object is sealed
Object.isSealed(object)
// Prevents any changes to an object
Object.freeze(object)
// Returns true if object is frozen
Object.isFrozen(object)
Tìm hiểu thêm trong Bảo vệ đối tượng .
Liên kết hàm()
Với phương thức bind() , một đối tượng có thể mượn một phương thức từ một đối tượng khác.
Ví dụ này tạo 2 đối tượng (người và thành viên).
Đối tượng thành viên mượn phương thức fullname từ đối tượng người:
Ví dụ
const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName:"Hege",
lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);
Hãy tự mình thử »Tìm hiểu thêm trong Hàm bind() .
Dấu phẩy ở cuối
ES5 cho phép dấu phẩy ở cuối định nghĩa đối tượng và mảng:
Ví dụ về đối tượng
person = {
firstName: "John",
lastName: "
Doe",
age: 46,
}
Ví dụ về mảng
points = [
1,
5,
10,
25,
40,
100,
];
CẢNH BÁO !!!
JSON không cho phép dấu phẩy ở cuối.
Đối tượng JSON:
//
Allowed:
var person = '{"firstName":"John", "lastName":"Doe",
"age":46}'
JSON.parse(person)
// Not allowed:
var person = '{"firstName":"John",
"lastName":"Doe", "age":46,}'
JSON.parse(person)Mảng JSON:
//
Allowed:
points = [40, 100, 1, 5, 25, 10]
// Not allowed:
points =
[40, 100, 1, 5, 25, 10,]