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. Đối tượng trong JavaScript là như thế nào?
Trong JavaScript, một đối tượng [đối tượng] là một tập hợp các cặp khóa - giá trị không có thứ tự. Mỗi cặp key - value được gọi là một thuộc tính
- Khóa của một thuộc tính có thể là một chuỗi
- Giá trị 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à thuộc tính của một đối tượng, 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 [phương pháp]
JavaScript cung cấp cho bạn nhiều cách để tạo một đối tượng mới. Cách phổ biến nhất là sử dụng cú pháp theo nghĩa đen của đối tượng
Ví dụ sau khi tạo một đối tượng trống bằng cách sử dụng cú pháp theo nghĩa màu đen của đối tượng
Để tạo một đối tượng có thuộc tính, bạn sử dụng key: value trong dấu ngoặc kép { }
Ví dụ. Đoạn mã tạo đối tượng student
Chúng ta vừa tạo một đối tượng có tên là student và đối tượng 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 hiệu ,
2. Truy cập thuộc tính của đối tượng như thế nào?
Để truy cập thuộc tính của đối tượng trong JavaScript chúng ta có hai cách
Cách #1. Use dấu chấm .
Để truy cập thuộc tính của đối tượng trong JS bằng dấu chấm, chúng ta sử dụng tên đối tượng , theo sau là thuộc tính tên như thế này
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
Ví dụ bên dưới sẽ ghi giá trị của thuộc tính name và age của đối tượng student ra màn hình bảng điều khiển
bảng điều khiển. nhật ký [sinh viên. Tên];
bảng điều khiển. nhật ký [sinh viên. lứa tuổi];
Kết quả trong bảng điều khiển ta được
Cách #2. Sử dụng cặp tách góc { }4
Chúng ta cũng có thể truy cập thuộc tính của đối tượng trong JavaScript bằng cách sử dụng dấu ngoặc nhọn [ ], như sau
objectName["propertyName"]
Ví dụ, cũng truy cập các thuộc tính của name và age khi chúng ta sử dụng trích dẫn
bảng điều khiển. nhật ký [sinh viên ["tên"]];
bảng điều khiển. nhật ký [sinh viên ["tuổi"]];
Kết quả ta được tương ứng với 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 chiều?
Vấn đề nằm ở vị trí của thuộc tính
Khi thuộc tính tên có khoảng trống, chúng ta phải đặt nó trong dấu nháy đơn [hoặc kép]
Ví dụ
Để truy cập vào địa chỉ thuộc tính, ta chỉ có thể sử dụng khung trích dẫn
Nếu bạn cố gắng truy cập thuộc tính này bằng dấu chấm
Thì bạn sẽ nhận lại một cú pháp lỗi. { }7
> Lưu ý. Đặt tên thuộc tính của đối tượng 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 được kết quả là { }8
bảng điều khiển. nhật ký [sinh viên. là cao];
3. Sửa đổi giá trị thuộc tính của đối tượng
Để thay đổi giá trị của một thuộc tính, bạn sử dụng toán tử gán { }9
Ví dụ
Kết quả ta được
4. Add a new property into object
Không giống như ngôn ngữ Java hay C++, trong JavaScript, bạn có thể thêm các thuộc tính sau khi tạo đối tượng
Bây giờ, sau khi đã tạo đối tượng student ở trên, chúng tôi bổ sung các thuộc tính mới như sau
Sau đó, ta quay lại student đối tượng để xem
Kết quả
5. Xoá thuộc tính của đối tượng
Để xóa thuộc tính của đối tượng ta sử dụng toán tử student2 với cú pháp như sau
xóa tên đối tượng. đối tượng;
Ví dụ, xóa thuộc tính student3 trong đối tượng student
Bây giờ, cố gắng truy cập lại thuộc tính student3, ta sẽ nhận được kết quả là { }8
bảng điều khiển. nhật ký [sinh viên. là cao];
6. Kiểm tra xem thuộc tính có tồn tại trong đối tượng không?
Để kiểm tra xem một thuộc tính tồn tại trong một đối tượng hay không, bạn có thể sử dụng toán tử student7, cú pháp
"propertyName" trong objectName
Toán tử student7 sẽ trả lại cho student9 nếu thuộc tính tồn tại trong đối tượng, ngược lại sẽ trả lại cho student0
Ví dụ. Kiểm tra xem thuộc tính student1 có tồn tại trong đối tượng không?
bảng điều khiển. log["studentID" trong sinh viên];
Kết quả
7. liệt kê các thuộc tính của đối tượng với vòng lặp student2
Để lặp qua tất cả các thuộc tính của một đối tượng mà không cần biết tên thuộc tính, bạn sử dụng vòng lặp student3
Ví dụ. Use the loop for in to it over student object and log ra value of each key
// Log ra giá trị của chốt khóa
bảng điều khiển. log[sinh viên[key]];
Kết quả
Hoặc in ra key name as after
8. Create method of JavaScript Object
Bên cạnh các thuộc tính [dữ liệu], các đối tượng có thể có các phương thức hành động. Hành động của các đối tượng được gọi là các phương thức
Ví dụ. Add method student5 into student object bằng biểu thức hàm [biểu thức hàm]
// Add de form tên là xin chào
sinh viên. xin chào = function[] {
bảng điều khiển. log["Xin chào NIIT - ICT Hà Nội"];
// Thử gọi mô thức xin chào
Kết quả ta được
Ví dụ. Thêm phương thức student5 vào đối tượng student bằng cách gán nó cho một thuộc tính
bảng điều khiển. log["Xin chào NIIT - ICT Hà Nội"];
// Thử gọi mô thức xin chào
Trong ví dụ này, ta tạo một hàm thông thường. Biểu thức student9 chỉ định hàm student5 cho thuộc tính student5 của đối tượng student
Bạn có thể định nghĩa các phương thức của một đối tượng bằng cách sử dụng cú pháp theo nghĩa đen của đối tượng như ví dụ sau
bảng điều khiển. log["Xin chào NIIT - ICT Hà Nội"];
Nếu bạn muốn thu 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 đối tượng thu gọn hơn
bảng điều khiển. log["Xin chào NIIT - ICT Hà Nội"];
Trông gọn gàng và dễ hiểu hơn nhỉ?. D
> Lưu ý. Bạn có thể thắc mắc tại sao không sử dụng chức năng cú pháp mũi tên của ES6 để thu gọn?
Nó liên quan đến giá trị name3
Thông thường, các phương thức cần truy cập dữ liệu được lưu trữ trong đối tượng
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 đối tượng
Bên trong phương thức này, giá trị name3 tham chiếu đến đối tượng đượ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 đối tượng bằng cách sử dụng giá trị name3 với cú pháp như sau
Ví dụ. Use name3 in the method name7 of student
bảng điều khiển. log["Xin chào NIIT - ICT Hà Nội"];
trả lại cái này. tên + " " + này. tuổi + " tuổi. “;
// Lấy thông tin đối tượng
bảng điều khiển. nhật ký [sinh viên. nhận thông tin[]];
Kết quả
Total results about Object in 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 bổ sung 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 [Từ năm 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
E-mail. xin chào@niithanoi. giáo dục. vn
trang chủ. https. //Facebook. com/NIIT. CNTT-TT/
#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #python #java #php #icthanoi