Bài tập thực hành với Array và Object lồng nhau trong Javascript

Array và Object là 2 kiểu dữ liệu phổ biến được sử dụng trong Javascript. Trong các bài viết trước, chúng ta đã làm bài tập thực hành riêng lẻ với Array và Object nên các bạn đã có nền tảng cơ bản về 2 kiểu dữ liệu này. Vậy thì hãy cùng làm ngay bài tập nâng độ khó lên một chút với Array và Object lồng nhau trong Javascript nhé.

Đề bài

Cho object user = {
ten: 'tung',
tuoi: 20
banBe:['vy', 'tung', 'tuan']
diaChi:{
tỉnh: 'HCM',
quan:'Q1
},
};

Bài tập thực hành Javascript này yêu cầu chúng ta thực hiện các hành động sau:

a, in ra array bạn bè
b, người bạn cuối cùng tên là gì
c, in ra địa chỉ của user
d, user ở quận nào, tỉnh nào
e, hãy thêm đường = 'nguyễn tuân' vào địa chỉ của user
f, hãy thêm 'thai' vào danh sách bạn của user

Xem thêm:  Hướng dẫn cài đặt Visual Studio Code cho người mới học lập trình

Hướng dẫn thực hành

Câu hỏi 1: In ra array bạn bè

Array tên là "Bạn bè" là một trường nằm trong object user được cho sẵn. Muốn lấy giá trị của trường này thì chúng ta dùng cú pháp: tên object + dấu chấm + (tên trường muốn lấy giá trị).

Hoặc các bạn có thể dùng công thức có dạng: tên object + ["tên trường muốn lấy giá trị"]

Trong trường hợp cụ thể của bài tập thực hành Array và Object lồng nhau này thì công thức sẽ là: console.lof(user.banBe); hoặc console.log(user["banBe"]); nhé.

Xem thêm: Hướng dẫn chi tiết cách khởi tạo chương trình đầu tiên với Javascript

Câu hỏi 2: Người bạn cuối cùng tên là gì?

• Bước 1: Khai báo một biến mới là var banBe = user["banBe"]; thì chúng ta sẽ có được một array mới chứa thông tin về những người bạn của object user trong đề bài. Đây sẽ là biến trung gian giúp bạn quan sát và thao tác dễ hơn.
• Bước 2: Để truy vấn thông tin xem người bạn cuối cùng tên là gì thì bạn dùng cú pháp: console.log(tên array.length -1);

Trong trường hợp cụ thể của bài tập này thì cú pháp sẽ là: console.log(banBe.length -1); nhé, Sau đó các bạn sẽ thu được kết quả như trong hình ảnh dưới đây:

Câu hỏi 3: In ra địa chỉ của user

Địa chỉ cũng chỉ giống như bạn bè, đều là từ khóa trong object user của đề bài. Để in ra địa chỉ này thì chúng ta dùng cú pháp như sau: tên object + dấu chấm + (tên trường muốn lấy giá trị).

Hoặc các bạn có thể dùng công thức có dạng: tên object + ["tên trường muốn lấy giá trị"]

Trong trường hợp cụ thể của bài tập thực hành Array và Object lồng nhau này thì công thức sẽ là: console.lof(user.diaChi); hoặc console.log(user["diaChi"]); nhé.

Câu hỏi 4: Truy vấn xem user ở quận nào, tỉnh nào?

Cách 1

Để truy vấn được thông tin cụ thể trong một trường thì lúc này trường đó sẽ đóng vai trò là một object trong Javascript. Các bạn hãy sử dụng công thức sau: tên object + dấu chấm + tên trường muốn lấy giá trị + dấu chấm + tên thông tin cụ thể muốn lấy.

Với trường hợp của bài tập thực hành trong Javascript này thì cú pháp sẽ là: console.log(user.diaChi.tinh); để truy vấn thông tin về tỉnh.

Nếu muốn truy vấn thông tin về quận thì sử dụng công thức tương tự, chỉ thay phần thông tin cụ thể là: console.log(user.diaChi.quan);

Kết quả mà chúng ta thu được sẽ như trong hình ảnh dưới đây:

Cách 2

Với những bạn chưa quen với việc viết cú pháp trong Javascript và gặp khó khăn trong việc ghi nhớ công thức thì chúng ta có thể dùng cách khai báo biến trung gian như ở câu hỏi 3.

Ở bài tập thực hành Array và Object lồng nhau này, biến trung gian sẽ được khai báo dưới dạng: var diaChi = user.diaChi; có nghĩa là biến mới này sẽ nhận giá trị bằng đúng giá trị của trường địa chỉ trong object user ban đầu.

Sau đó các bạn chỉ cần dùng công thức console.log(diaChi.tinh); hoặc console.log(diaChi.quan); là có thể truy vấn được thông tin như phía bên trên nhé.

Xem thêm: Hướng dẫn cách dùng thẻ div và cách tạo danh sách trong HTML

Câu hỏi 5: Hãy thêm đường 'nguyễn tuân' vào địa chỉ của user

Các bạn vẫn giữ nguyên biến trung gian đã tạo ở câu hỏi 4 nhé. Để thêm một thông tin mới vào cho trường địa chỉ trong object user thì các bạn dùng công thức sau: tên trường + dấu chấm + tên mục thông tin mới = "thông tin mới".

Cụ thể ở trường hợp vủa bài tập thực hành Array và Object lồng nhau này chúng ta sẽ dùng cú pháp như sau: diaChi.duong = "nguyễn tuân";. Sau đó các bạn chạy thử object user thì sẽ thấy tên đường đã được thêm vào địa chỉ:

Có một cách khác để không cần giữ lại biến trung gian là các bạn có thể nhập luôn công thức sau: tên object + dấu chấm + tên trường muốn thêm thông tin + dấu chấm + tên mục thông tin mới = "thông tin mới".

Trong trường hợp của bài tập này thì cú pháp sẽ là: user.diaChi.duong = "nguyen tuan";

Câu hỏi 6: Hãy thêm 'thai' vào danh sách bạn của user

Câu hỏi này có cách thực hiện tương tự như câu hỏi 5 nhưng cách thực hiện lại không giống nhau. Bởi vì trường bạn bè của object là một chuỗi array nên khi thêm thông tin các bạn phải nhập cả vị trí điền thông mới.

Công thức tổng quát là: tên object + dấu chấm + tên trường muốn thêm thông tin [vị trí thêm thông tin trong chuỗi] = "thông tin mới"

User này ban đầu có 3 người bạn, tên của họ nằm ở vị trí 0,1,2 trong chuỗi array. Vậy người là "thai" chuẩn bị thêm tên vào nằm ở vị trí số 3 trong chuỗi này. Suy ra công thức cụ thể sẽ là: user.banBe[3] = "thai"; nhé.

Trong thực tế chúng ta sẽ không đếm thủ công để tìm vị trí thêm bởi vì chuỗi array trong thực tế có thể sẽ rất dài. Do đó chúng ta xác định vị trí thêm chính là bằng độ dài của array. Công thức cụ thể sẽ là: user.banBe[banBe.length] =  "thai"; nhé.

Xem thêm: Bài tập thực hành với các thẻ định dạng chữ trong HTML

Kết luận

Như vậy, chúng mình đã hướng dẫn cho các bạn một số bài tập cơ bản về Array và Object lồng nhau trong Javascript. Để làm thêm nhiều bài tập thực hành nâng cao hơn của chủ đề này cũng như các bài tập về kiểu dữ liệu khác trong Javascript, các bạn hãy tham gia khóa học:

Lập trình Javascript căn bản từ A-Z thực chiến cho người mới

Khóa học sẽ giúp các bạn xây dựng nền tảng kiến thức vững chắc và thành thạo các thao tác với hàm, phép toán trong Javascript. Bài giảng được thiết kế từ cơ bản đến nâng cao phù hợp với mọi đối tượng. Sau mỗi bài học lý thuyết luôn có bài tập thực hành giúp các bạn ghi nhớ kiến thức sâu hơn. Ngoài ra, giảng viên cũng sẽ hỗ trợ các bạn 24/7 về mọi vấn đề liên quan đến kiến thức. Hãy thoải mái đặt câu hỏi ngay dưới video bài giảng nếu bạn chưa hiểu rõ bất kỳ phần nào nhé. Chúc các bạn học tập tốt!