Trong bài hướng dẫn này, mình sẽ giúp bạn tìm hiểu về các đối tượng JavaScript (JavaScript Object) và cách thao tác với các thuộc tính đối tượng một cách hiệu quả.
1. Object trong JavaScript là như thế nào?
Trong JavaScript, một object (đối tượng) là một tập hợp các cặp key - value không có thứ tự. Mỗi cặp key - value được gọi là một thuộc tính.
-
Key của một thuộc tính có thể là một chuỗi
-
Value của một thuộc tính có thể là bất kỳ giá trị JavaScript hợp lệ nào, ví dụ: Một chuỗi, một số, một mảng và thậm chí là một hàm.
Khi một hàm là một thuộc tính của một object, nó không còn được gọi là hàm nữa mà thường được gọi là một phương thức (method)
JavaScript cung cấp cho bạn nhiều cách để tạo một object mới. Cách phổ biến nhất là sử dụng cú pháp theo nghĩa đen của object.
Ví dụ sau tạo một object trống bằng cách sử dụng cú pháp theo nghĩa đen của object:
let student = {};
Để tạo một object có thuộc tính, bạn sử dụng key: value trong dấu ngoặc nhọn { }.
Ví dụ: Đoạn code tạo một student object.
let student = {
name: "Ngọc Anh",
age: 18
};
Chúng ta vừa tạo một object có tên là student và object có 2 thuộc tính name, age với 2 giá trị tương ứng là Ngọc Anh và 18
Object có nhiều thuộc tính thì sẽ được phân tách bằng dấu phảy , .
2. Truy cập thuộc tính của object như thế nào?
Để truy cập vào thuộc tính của object trong JavaScript chúng ta có hai cách:
Cách #1: Sử dụng dấu chấm .
Để truy cập thuộc tính của object trong JS bằng dấu chấm, chúng ta sử dụng tên object , theo sau là tên thuộc tính như thế này:
objectName.propertyName
Ví dụ, trong object chúng ta vừa tạo ở trên, bây giờ mình muốn truy cập vào thuộc tính name thì làm như sau:
student.name
Ví dụ bên dưới đây sẽ log giá trị của thuộc tính name và age của object student ra màn hình console.
let student = {
name: "Ngọc Anh",
age: 18
};
console.log(student.name);
console.log(student.age);
Kết quả trong console ta được:
Cách #2: Sử dụng cặp ngoặc vuông [ ]
Chúng ta cũng có thể truy cập thuộc tính của object trong JavaScript bằng cách sử dụng dấu ngoặc vuông [ ], như sau:
objectName["propertyName"]
Ví dụ, cũng truy cập thuộc tính name và age như chúng ta sử dụng ngoặc vuông.
let student = {
name: "Ngọc Anh",
age: 18
};
console.log(student["name"]);
console.log(student["age"]);
Kết quả ta được tương tự cách sử dụng dấu chấm.
Nhưng tại sao kết quả giống nhau mà lại cần đến 2 cách?
Vấn đề là ở chỗ tên của thuộc tính.
Khi tên thuộc tính có khoảng trống, chúng ta cần phải đặt nó trong dấu nháy đơn (hoặc đôi).
Ví dụ:
let student = {
name: "Ngọc Anh",
age: 18,
"Địa chỉ": "Hà Nội"
};
Để truy cập vào thuộc tính địa chỉ thì ta chỉ có thể sử dụng ngoặc vuông:
student["Địa chỉ"]
Nếu bạn cố gắng truy cập thuộc tính này bằng dấu chấm:
student."Địa chỉ"
Thì bạn sẽ nhận lại một lỗi cú pháp: Syntax Error: Unexpected string
> Lưu ý: Đặt tên thuộc tính của object có chứa khoảng trắng không phải là một cách tốt. Tốt nhất là sử dụng cách đặt tên theo camelCase
Ngoài ra, nếu bạn cố gắng truy cập một thuộc tính không tồn tại, bạn sẽ nhận về kết quả là undefined.
console.log(stutdent.isTall); // undefined
3. Sửa đổi giá trị thuộc tính của object
Để thay đổi giá trị của một thuộc tính, bạn sử dụng toán tử gán =
Ví dụ:
let student = {
name: "Ngọc Anh",
age: 18,
address: "Hà Nội"
};
student.name = "Vũ Hà";
console.log(student);
Kết quả ta được:
4. Thêm một thuộc tính mới vào object
Không giống như ngôn ngữ Java hay C++, trong JavaScript, bạn có thể thêm thuộc tính sau khi tạo object.
Bây giờ, sau khi đã tạo student object ở trên, chúng ta thêm thuộc tính mới như sau:
student.isTall = true;
Sau đó, ta lại log student object để xem:
console.log(student);
Kết quả:
5. Xóa thuộc tính của object
Để xóa thuộc tính của object ta sử dụng toán tử delete với cú pháp như sau:
delete objectName.objectProperty;
Ví dụ, xóa thuộc tính isTall trong student object
delete student.isTall;
Bây giờ, cố gắng truy cập lại thuộc tính isTall, ta sẽ nhận được kết quả là undefined:
console.log(student.isTall); // undefined
6. Kiểm tra xem thuộc tính có tồn tại trong object không?
Để kiểm tra xem liệu một thuộc tính có tồn tại trong một object hay không, bạn có thể sử dụng toán tử in, cú pháp:
"propertyName" in objectName
Toán tử in sẽ trả về true nếu thuộc tính tồn tại trong object, ngược lại sẽ trả về false.
Ví dụ: Kiểm tra xem thuộc tính studentID xem có tồn tại trong object không?
let student = {
name: "Ngọc Anh",
age: 18,
address: "Hà Nội"
};
console.log("studentID" in student);
Kết quả:
false
7. Lặp qua các thuộc tính của object với vòng lặp for in
Để lặp qua tất cả các thuộc tính của một object mà không cần biết tên thuộc tính, bạn sử dụng vòng lặp for ... in:
for(let key in object) {
// Hành động gì đó
}
Ví dụ: Sử dụng vòng lặp for in để lặp qua student object và log ra giá trị của từng key
let student = {
name: "Ngọc Anh",
age: 18,
address: "Hà Nội"
};
for(let key in student) {
// Log ra giá trị của từng key
console.log(student[key]);
}
Kết quả:
Hoặc in ra tên key như sau:
for (let key in object) {
// In ra tên các key
console.log(key);
}
8. Tạo phương thức của JavaScript Object
Bên cạnh các thuộc tính (dữ liệu), các object có thể có các phương thức hành động. Các hành động của các object được gọi là các phương thức.
Ví dụ: Thêm phương thức hello vào student object bằng biểu thức hàm (function expression).
let student = {
name: "Ngọc Anh",
age: 18,
address: "Hà Nội"
};
// Thêm phương thức tên là hello
student.hello = function() {
console.log("Xin chào NIIT - ICT Hà Nội");
}
// Thử gọi phương thức hello
student.hello();
Kết quả ta được:
Ví dụ: Thêm phương thức hello vào student object bằng cách gán nó cho một thuộc tính.
let student = {
name: "Ngọc Anh",
age: 18,
address: "Hà Nội"
};
// Tạo hàm tên là hello
function hello() {
console.log("Xin chào NIIT - ICT Hà Nội");
}
student.hello = hello;
// Thử gọi phương thức hello
student.hello();
Trong ví dụ này, ta tạo một hàm thông thường. Biểu thức student.hello = hello; chỉ định hàm hello cho thuộc tính hello của student object.
Bạn cũng có thể định nghĩa các phương thức của một object bằng cách sử dụng cú pháp theo nghĩa đen của object như ví dụ sau:
let student = {
name: "Ngọc Anh",
age: 18,
address: "Hà Nội",
hello: function () {
console.log("Xin chào NIIT - ICT Hà Nội");
}
};
Nếu bạn thích ngắn gọn hơn thì cũng có thể sử dụng tính năng của ES6, cho phép bạn định nghĩa phương thức cho một object ngắn gọn hơn:
let student = {
name: "Ngọc Anh",
age: 18,
address: "Hà Nội",
hello() {
console.log("Xin chào NIIT - ICT Hà Nội");
}
};
Trông gọn gàng và dễ hiểu hơn nhỉ? :D.
> Note: Có thể bạn thắc mắc tại sao không sử dụng cú pháp arrow function của ES6 cho gọn? thì nguyên nhân mời bạn đọc Tại sao không nên sử dụng Arrow Function?
Nó liên quan đến giá trị this.
Thông thường, các phương thức cần truy cập dữ liệu được lưu trữ trong object.
Ví dụ: Bạn có thể muốn tạo một phương thức trả về tên và tuổi của object.
Bên trong phương thức này, giá trị this tham chiếu đến object được sử dụng để gọi phương thức.
Do đó, bạn có thể truy cập một thuộc tính của object bằng cách sử dụng giá trị this với cú pháp như sau:
this.propertyName
Ví dụ: Sử dụng this trong phương thức getInfo() của student.
let student = {
name: "Ngọc Anh",
age: 18,
address: "Hà Nội",
hello() {
console.log("Xin chào NIIT - ICT Hà Nội");
},
getInfo: function() {
return this.name + " " + this.age + " tuổi.";
}
};
// Lấy thông tin đối tượng
console.log(student.getInfo());
Kết quả:
Tổng kết về Object trong JavaScript
Như vậy trong bài hướng dẫn này, mình đã giới thiệu với bạn cơ bản về Object trong JavaScript, cách tạo Object cũng như cách truy cập thuộc tính, xóa thuộc tính, lặp qua các thuộc tính cùng với đó là cách thêm phương thức...
Hi vọng giúp bạn hiểu cơ bản về JavaScript Object để vận dụng nó khi học Javascript chuyên sâu cũng như học React.js hay các thư viện / framework khác.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 0243.557.4074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #python #java #php #icthanoi