Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Object Trong Javascript

Object Trong Javascript


Ngày 5 Tháng 5 Năm 2020

Hôm nay bạn hãy cùng mình sẽ đi tìm hiểu khái niệm cũng như cách sử dụng object trong ngôn ngữ lập trình Javascript cho trang web nhé.

Object Trong Javascript Là Gì?

Javascript là ngôn ngữ lập trình theo hướng đối tượng, do đó để hiểu và lập trình hiệu quả thì chúng ta cần biết cách nó hoạt động cũng như nắm vững khái niệm cách sử dụng kiểu dữ liệu object(đối tượng) trong ngôn ngữ này.

Object(đối tượng) là một kiểu dữ liệu quan trọng nhất trong Javascript. Nó không giống so với các kiểu dữ liệu primitive(nguyên thủy) mà chúng ta đã học ở bài trước (Bạn có thể tìm hiểu thêm các dữ kiểu dữ liệu ở đây nhé: Kiểu dữ liệu). Ví dụ các kiểu nguyên thủy như là string, number, boolean... thì chỉ có thể chứa một giá trị duy nhất. Còn đối với kiểu dữ liệu object(đối tượng), nó phức tạp hơn và có thể chứa nhiều loại kiểu dữ liệu giá trị khác nhau. Bây giờ để hiểu rõ hơn chúng ta cùng nhau tìm hiểu ở phía dưới nhé!

Cách Tạo Objects Trong JavaScript

Object là nơi tập hợp các danh sách property(thuộc tính) được xác định bằng cặp giá trị key-value. Với key(cặp khóa) có thể là chuỗi còn value(giá trị) có thể bất kỳ giá trị nào hợp lệ. Ví dụ trong thực tế chúng ta hãy liên tưởng object(đối tượng) như một chiếc máy tính xách tay thì property (thuộc tính) của object(đối tượng) này là màu sắc, kích thước, bộ nhớ... Với các cặp giá trị (key-value) như màu sắc: đỏ, kích thước: 2.3 kg...

Đầu tiên chúng ta sẽ đi vào tìm hiểu cách tạo một object cụ thể bằng ví dụ sau đây nhé:

 let khachHang = new Object();
let khachHang = {};

Trên là hai cách mà chúng ta có thể sử dụng để tạo một đối tượng trong Javascript. Nhưng theo mình thấy thì cách thứ hai với dấu {} hay được sử dụng hơn vì tính chất ngắn gọn và dễ hiểu của nó. Bây giờ chúng ta hãy cùng nhau đi vào ví dụ thực tế tạo một đối tượng với danh sách chứa các thuộc tính ở bên dưới nhé:

let khachHang = { 
   ten: "An",
   tuoi: 25,
  }

Thì mình có một số lưu ý nhỏ khi tạo object(đối tượng) trong Javascript là:

  • Ví dụ trên chúng ta chứa các danh sách thuộc tính trong dấu {}.
  • Mỗi thuộc tính trong đối tượng sẽ cách nhau bởi dấu ,(phẩy).
  • Một thuộc tính sẽ có key( bạn có thể hiểu là tên hay định danh cũng được nhé) nằm bên tay trái và value(giá trị) nằm bên tay phải.
  • Cú pháp của cặp giá trị thuộc tính là key : value.

Nếu như bạn dùng key với nhiều hơn 1 từ thì chúng ta phải chuyển sang kiểu chuỗi như ví dụ sau đây nhé:

let khachHang = { 
   ten: "An",
   tuoi: 25,
   "gioi tinh": "Nữ",
  }

Đối với các thuộc tính nằm ở vị trí cuối cùng thì bạn có thể sử dụng dấu , (phẩy) hoặc không nhé:

let khachHang = { 
   ten: "An",
   tuoi: 25
  }

Cách truy cập thuộc tính Object trong Javascript

Sử dụng dấu chấm(.)

Chúng ta sẽ sử dụng cú pháp như sau để lấy giá trị thuộc tính trong đối tượng:

(Tên Đối Tượng).(Tên Thuộc Tính)

Để dễ hiểu hơn thì mình sẽ lấy giá trị của thuộc tính ten trong đối tượng khachHang ở ví dụ trên thông qua cách truy cập bằng dấu chấm nhé:

let khachHang = { 
   ten: "An",
   tuoi: 25
  };
console.log(khachHang.ten)

Kết quả ở bên dưới nhé:

Truy cập thuộc tính trong đối tượng Javascript

Sử dụng dấu giống Array([])

Kiểu dữ liệu Array thì mình sẽ có một bài chi tiết cho phần này sau nha. Bây giờ chúng ta cùng tìm hiểu cú pháp cách truy cập thuộc tính trong object thông qua dấu [] ở bên dưới nhé:

(Tên Đối Tượng).["Tên Thuộc Tính"]

Như ví dụ của cách thứ nhất, mình sẽ lấy giá trị của thuộc tính ten trong đối tượng khachHang bằng cách sử dụng dấu [] nhé:

let khachHang = { 
   ten: "An",
   tuoi: 25
  };
console.log(khachHang['ten'])

Kết quả ở bên dưới nhé:

Truy cập thuộc tính trong đối tượng bằng cách sử dụng []

Ở đây mình có lưu ý điểm khác biệt giữa hai cách truy cập thuộc tính trong đối tượng là sử dụng với key có nhiều hơn 1 từ. Để dễ dàng so sánh và nắm rõ hơn thì bạn xem 2 ví dụ sau đây nhé:

Đối với cách truy cập thuộc tính bằng dấu chấm:

let khachHang = { 
   ten: "An",
   tuoi: 25,
   "gioi tinh": "Nữ",
  };
   console.log(khachHang.'gioi tinh')

Kết quả ở bên dưới nhé:

Lỗi truy cập thuộc tính bằng dấu chấm

Đối với cách truy cập thuộc tính bằng dấu []:

let khachHang = { 
   ten: "An",
   tuoi: 25,
   "gioi tinh": "Nữ",
  };
   console.log(khachHang["gioi tinh"])

Kết quả ở bên dưới nhé:

Truy cập key nhiều kí tự trong đối tượng

Thay Đổi Giá Trị Thuộc Tính Object Javascript

Bây giờ chúng ta sẽ đi vào tìm hiểu cách thay đổi giá trị thuộc tính cho đối tượng bằng ví dụ cụ thể sau đây nhé:

let khachHang = { 
   ten: "An",
   tuoi: 25,
   "gioi tinh": "Nữ",
  };
   khachHang.ten = "Lan";
   console.log(khachHang.ten)

Bạn xem kết quả ở bên dưới nhé:

Thay đổi giá trị thuộc tính trong object

Thêm Thuộc Tính Mới Trong Object Javascript

Tiếp theo chúng ta sẽ đi vào ví dụ thực tế để tìm hiểu cách thêm thuộc tính mới vào trong đối tượng ở bên dưới nhé:

let khachHang = { 
   ten: "An",
   tuoi: 25,
   "gioi tinh": "Nữ",
  };
   khachHang.ho = "Nguyen";
   console.log(khachHang)

Bạn xem kết quả ở bên dưới nhé:

Thêm thuộc tính mới cho object

Xóa Thuộc Tính Trong Object Javascript

Tiếp theo chúng ta sẽ đi vào ví dụ thực tế để tìm hiểu cách xóa thuộc tính trong đối tượng ở bên dưới nhé:

let khachHang = { 
   ten: "An",
   tuoi: 25,
   "gioi tinh": "Nữ",
  };
   delete khachHang.tuoi;
   console.log(khachHang)

Bạn xem kết quả ở bên dưới nhé:

Xóa thuộc tính trong object

Kiểm Tra Thuộc Tính Object Javascript

Trong Javascript cho phép chúng ta kiểm tra một thuộc tính tồn tại hay không bằng một toán tử đặc biệt là in với giá trị trả về là true hoặc false. Bây giờ chúng ta sẽ đi vào tìm hiểu cú pháp cách kiểm này nhé:

(Tên Thuộc Tính) in (Tên Đối Tượng)

Để các bạn hiểu và nắm rõ hơn thì chúng ta cùng nhau kiểm tra các thuộc có tồn tại trong đối tượng hay không bằng ví dụ thực tế ở dưới đây nhé:

let khachHang = { 
   ten: "An",
   tuoi: 25,
   "gioi tinh": "Nữ",
  };
   console.log('ten' in khachHang)
   console.log('email' in khachHang)

Kết quả ở bên dưới nhé:

Kiểm tra thuộc tính có tồn tại hay không trong object

Sử Dụng Vòng Lặp Trong Object Javascript Bằng for...in

Trong object(đối tượng) chúng ta có thể lấy các cặp giá trị key-value bằng cách sử dụng vòng lặp for...in. Nó được tối ưu hóa đặc biệt để sử dụng cho đối tượng và cấu trúc của nó thì hoàn toàn khác so với vòng lặp for mà chúng ta học ở bài trước (Bạn có thể tìm hiểu thêm về vòng lặp ở đây nhé: Vòng Lặp). Để hiểu rõ hơn thì chúng ta cùng nhau tìm hiểu về cú pháp của nó nhé:

 for(let (thuộc tính) in (đối tượng) ) { 
    /*Đoạn mã thực thi*/
}

Để hiểu rõ hơn chúng ta sẽ đi vào cách lấy giá trị các thuộc tính trong đối tượng bằng cách sử dụng vòng lặp này nhé:

 let khachHang = { 
    ten: "An",
    tuoi: 25,
    "gioi tinh": "Nữ",
    };
 for (const thuocTinh in khachHang) {
     console.log(khachHang[thuocTinh]);
 }

Bạn xem kết quả ở bên dưới nhé:

Vòng lặp for...in trong object

Tổng kết:

Mình có một số đúc kết khi sử dụng object(đối tượng) trong Javascript như sau:

  • Object là nơi tập hợp các cặp giá trị key-value thường gọi là thuộc tính và được đặt trong dấu {}.
  • Ta có thể truy cập thuộc tính bằng cách sử dụng dấu chấm hay dấu [].
  • Ta có thể xóa thuộc tính bằng cách sử dụng delete.
  • Kiểm tra một thuộc thuộc tính có tồn tại hay không thì ta sẽ sử dụng in.
  • Lấy dữ liệu các cặp giá trị key-value thì ta có thể sử dụng vòng lặp for...in.

Qua đây mình mong bài viết sẽ giúp bạn hiểu được khái niệm cũng như cách sử dụng object(đối tượng) trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!