Bài 7: Đối tượng trong Javascript

1734

I. Giới thiệu

Bài trước, mình đã giới thiệu tới bạn khái niệm mảng trong Javascript – là một dạng dữ liệu khá khó hình dung với những bạn mới bắt đầu. Hôm nay, mình tiếp tục trình bày tới bạn một dạng dữ liệu mới cũng khó nhai không kém mảng, đó chính là Đối tượng.

Giả sử mình có thông tin về 2 users như sau:

User 1:

  • Họ tên: Nguyễn Văn A
  • Năm sinh: 1996
  • Nghề nghiệp: Lập trình viên

User 2

  • Họ tên: Nguyễn Văn B
  • Năm sinh: 1997
  • Nghề nghiệp: Ca sĩ

Giờ mình muốn sử dụng biến để lưu trữ các thông tin trên, thì bạn sẽ làm như thế nào? Liệu bạn có đang nghĩ tới 1 trong 2 cách sau không:

  • Cách 1: Bạn sẽ tạo ra các biến như user1HoTen, user1NamSinh, user1NgheNghiep để lưu lần lượt các thông tin của User 1 và làm tương tự với User 2.
  • Cách 2: Bạn sẽ đưa lần lượt các thông tin của mỗi user vào hai mảng tương ứng là user1 và user2.

Mình cùng phân tích 2 cách trên nhé:

  • Cách 1 xem chừng không ổn, bởi mỗi một thông tin kết hợp với một user bạn sẽ lại phải tạo ra một biến mới. Nếu làm cách này, bạn sẽ mất tới 6 biến mới có thể lưu trữ hết thông tin trên. Hơn nữa bạn không thể gom nhóm các thông tin của mỗi user lại với nhau, điều này sẽ khiến bạn không code được những chương trình phức tạp.
  • Cách 2 xem chừng ổn hơn, bạn chỉ mất 2 biến để lưu trữ toàn bộ thông tin cho 2 user, các thông tin của User 1 nằm trong mảng user1, các thông tin của User 2 nằm trong mảng user2, rất ngọn ngàng. Thế nhưng khi sử dụng mảng để lưu trữ, nếu muốn truy xuất lại các thông tin có trong mảng, buộc bạn phải nhớ chỉ số của thông tin đó. Mặt khác, chỉ số của các thông tin trong mảng lại là các số nguyên – chúng khá tối nghĩa. Tức là khi bạn viết user1[0] liệu bạn có thể hình dung được user1[0] sẽ trả về thông tin gì không?

Sau một hồi phân tích, chúng ta thấy cả hai cách trên đều không ổn. Vậy thì có cách nào khác để giải quyết cho trường hợp này ổn thỏa hơn không? Muốn tìm được câu trả lời, thì bạn hãy đọc hết bài viết về Đối tượng trong Javascript của mình nhé.

II. Đối tượng trong Javascript

Hiểu nôm na, đối tượng trong Javascript là một tập hợp những thông tin có liên quan tới nhau, được tổ chức dưới dạng key: value.

Để khởi tạo một đối tượng trong Javascript, chúng ta có thể thực hiện như sau:

// Khởi tạo các thông tin cho đối tượng user
var user = {
    hoTen: "Phạm Quang Bình",
    namSinh: 1996,
    ngheNghiep: "Lập trình viên"
}

// Hoặc có thể khởi tạo đối tượng rỗng
// rồi mới thêm các thông tin sau
var user = {};
user.hoTen = "Phạm Quang Bình";
user.nameSinh = 1996;
user.ngheNghiep = "Lập trình viên";

// Đương nhiên bạn cũng có thể khởi tạo trước một vài thông tin
// rồi bổ sung sau cũng được
var user = {
    hoTen: "Phạm Quang Bình"
}
user.namSinh = 1996; // Bố sung thông tin namSinh
user.ngheNghiep = "Lập trình viên"; // Bổ sung thông tin ngheNghiep

// Các đối tượng có thể lồng nhau nhiều cấp
var user = {
    hoTen: "Pham Quang Binh",
    diaChi: [
        {
            soNha: 13,
            duong: "Lê Văn Lương"
        },
        {
            soNha: 69,
            duong: "Nguyễn Ngọc Vũ"
        }
    ]
}

III. Một số thao tác phổ biến với đối tượng

3.1 Truy xuất thuộc tính của đối tượng

Mỗi đối tượng trong Javascipt luôn được xác định rõ ràng thông qua một cái tên cụ thể. Để truy xuất tới thuộc tính của đối tượng, bạn sẽ sử dụng cú pháp tenDoiTuong.tenThuocTinh, như trong ví dụ sau đây:

// Giả sử mình có đối tượng anhBinh
var anhBinh = {
    hoTen: "Pham Quang Binh",
    diaChi: {
        soNha: 13,
        duong: "Nguyễn Ngọc Vũ",
        thanhPho: "Hà Nội"
    }
}

// Lấy tên của anhBinh
var ten = anhBinh.hoTen;

// lấy số nhà của anhBinh
var soNha = anhBinh.diaChi.soNha;

// Lấy thành phố anhBinh đang ở
var thanhPho = anhBinh.diaChi.thanhPho;

3.2 Duyệt qua tất cả các thuộc tính của đối tượng

Để duyệt qua tất cả các thuộc tính của đối tượng, chúng ta sẽ sử dụng tới vòng lặp for.

Ngoài sử dụng để lặp từ n tới m, vòng lặp for còn có sử dụng để duyệt các thuộc tính có trong đối tượng.

Để sử dụng vòng lặp for duyệt các thuộc tính có trong đối tượng, bạn có thể làm tương như như ví dụ sau:

var myComputer = {
    name: "Macbook Pro 2015",
    ram: "16",
    storage: "256"
}

for (var key in myComputer) {
    console.log(key) // lần lượt là name, ram, storage
    var value = myComputer[key];
    console.log(value); // lần lượt là 'Macbook Pro 2015', 16, 256
}

3.3 Kiểm tra một thuộc tính có tồn tại trong đối tượng hay không?

Đôi khi chúng ta muốn kiểm tra một thuộc tính có tồn tại trong đối tượng hay không, để kiểm tra chúng ta sẽ sử dụng doiTuong.hasOwnProperty('thuocTinh') như trong ví dụ sau:

var myComputer = {
    name: "Macbook Pro 2015",
    ram: "16",
    storage: "256"
}

if (myComputer.hasOwnProperty('price')) {
    console.log("Có thuộc tính price trong đối tượng myComputer");
}

doiTuong.hasOwnProperty('thuocTinh') sẽ kiểm tra xem đối tượng doiTuong có tồn tại thuộc tính thuocTinh hay không, nếu tồn tại sẽ trả về true, ngược lại trả về false, dựa vào đó mà chúng ta có thể dễ dàng kiểm tra được.

IV. Tổng kết

Đọc tới đây, bạn đã biết cách xử lý bài toàn ở mục Giới thiệu chưa nhỉ, mình đoán là biết rồi đúng không. Chúng ta chỉ cần tạo ra hai đối tượng user1 và user2, lần lượt chứa các thông tin mà yêu cầu đặt ra là xong.

Mảng vs Đối tượng

Có thể bạn sẽ cảm thấy Đối tượng khá giống với Mảng, chúng đều được sử dụng để lưu trữ nhiều thông tin. Tuy nhiên, giữa đối tượng và mảng có một điều khác nhau cơ bản, đó chính là Mảng thì truy xuất phần tử dựa vào chỉ số, còn Đối tượng thì truy xuất thuộc tính dựa vào tên thuộc tính.

Vì sự khác nhau cơ bản như vậy, nên mảng thường được sử dụng để lưu trữ các loại dữ liệu cùng tập hợp, như tập hợp các hãng xe hơi, tập hợp thông tin mọi người trong gia đinh,… Còn đối tượng dùng để lưu các thông tin mà liên quan tới một đối cụ thể như con người thì có tên, tuổi, địa chỉ, máy tính thì có ram, chip, ổ cứng,…

Hy vọng với bài viết ngắn gọn này, mình sẽ giúp các bạn hiểu về khái niệm Đối tượng trong Javascript.

Hẹn gặp lại các bạn trong những bài viết lần sau.

BÀI VIẾT LIÊN QUANXEM THÊM