So Sánh và Sao Chép Object Trong Javascript - The first knowledge sharing application in Vietnam

Hôm nay bạn hãy cùng mình sẽ đi vào tìm hiểu cách sao chép cũng như so sánh các object trong ngôn ngữ lập trình Javascript để phát triển web nhé.

Mục lục bài viết

Copy Object Trong Javascript

Thông thường đối với các kiểu dữ liệu nguyên thủy (kiểu dữ liệu chuỗi, số, boolean) thì bạn có thể sao chép giá trị của một biến sau đó lưu vào một biến khác. Và khi giá trị biến sao chép thay đổi thì không ảnh hưởng đến giá trị của biến được sao chép. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

 let thongDiep = 'Xin Chào'; 
 let chaoHoi = thongDiep;

Để bạn dễ hình dùng thì bạn nhìn vào ảnh bên dưới nhé:

Các bạn có thể thấy là hai biến này lưu trữ chuỗi “Xin Chào” hoàn toàn độc lập với nhau nên khi chúng ta thay đổi giá trị của một biến sẽ không ảnh hưởng đến biến còn lại. Để hiểu rõ hơn bạn thử xem đoạn code sau đây nhé:

 let thongDiep = 'Xin Chào'; 
 let chaoHoi = thongDiep;
 chaoHoi = 'Hello'; 
 console.log(thongDiep);
 console.log(chaoHoi);

Ở đây mình xin có một số lưu ý nhỏ là:

Đầu tiên chúng ta khai báo biến thongDiep với giá trị là chuỗi ‘Xin Chào’.
Tiếp theo chúng ta khai báo biến chaoHoi có giá trị bằng với biến thongDiep với giá trị là chuỗi ‘Xin Chào’.
Sau đó chúng ta thay đổi giá trị biến chaoHoi với chuỗi ‘Hello’.

Bây giờ chúng ta thử xem kết quả của đoạn code trên xem giá trị của hai biến thongDiep và chaoHoi như thế nào nhé:

Khi bạn đã hiểu về cách sao chép giá trị của biến nguyên thủy thì chúng ta sẽ đi vào cách sao chép giá trị biến object(đối tượng). Nó không lưu trữ trực tiếp vào biến như ở trong biến loại kiểu dữ liệu nguyên thủy, mà biến được gán kiểu dữ liệu object(đối tượng) sẽ như một đại diện và tham chiếu đến địa chỉ bộ nhớ lưu trữ đối tượng này trong Javascript. Nghe hơi khó hiểu nhưng bạn cố gắng theo dõi ví dụ dưới đây để hiểu rõ hơn nhé:

 let khachHang = { 
      ten: "An"
  }

Bạn có thể xem hình ảnh bên dưới để nắm rõ hơn nhé:

Các bạn có thể hình dung là object(đối tượng) sẽ được lưu trữ vào một nơi nào đó trong bộ nhớ của chương trình và biến khachHang sẽ tham chiếu để lấy giá trị của nó. Tiếp theo chúng ta sẽ đi vào tìm hiểu cách sao chép object(đối tượng) bằng đoạn code sau nhé:

 let khachHang = { 
      ten: "An"
  };
 let nguoiDung = khachHang;

Để dễ hình dung thì bạn xem hình ảnh bên dưới nhé:

Ở đây bạn có thể thấy điểm khác kiểu object(đối tượng) so với các kiểu dữ liệu còn lại là mỗi biến không trực tiếp lưu trữ biến như ví dụ của kiểu dữ liệu nguyên thủy(primitives) mà chúng chỉ cùng trỏ tới cùng một địa chỉ lưu trữ object(đối tượng).

Điểm khác biệt quan trọng khi sao chép giá trị biến kiểu nguyên thủy với biến kiểu object:

Điểm mấu chốt ở đây chính là khi sao chép object(đối tượng) thì object(bị sao chép) sẽ bị ảnh hưởng khi mà biến sao chép thay đổi. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 let khachHang = { 
      ten: "An"
  };
 let nguoiDung = khachHang;
 nguoiDung.ten = "Lan"; 
 console.log(khachHang); 
 console.log(nguoiDung)

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

Ở đây mình có lưu ý nhỏ là:

Chúng ta tạo một biến khachHang dùng tham chiếu đến object có thuộc tính ten:"An".
Tiếp theo chúng ta cũng cho biến nguoiDung tham chiếu tới object có thuộc tính ten:"An" bằng cách let nguoiDung = khachHang;.
Và khi chúng ta thay đổi giá trị thuộc tính ten của biến nguoiDung thì giá trị thuộc tính ten của biến khachHang cũng sẽ bị thay đổi theo.

Qua cách so sánh như vậy mong phần nào sẽ giúp bạn hiểu rõ hơn về cách sao chép object trong javascript.

Compare Object Trong Javascript

Thông thường khi so sánh thì chúng ta sẽ dùng toán tử == hoặc === (Nếu bạn muốn tìm hiểu thêm về toán tử này thì có thể tham khảo ở đây nhé: Toán tử ) thì object cũng không ngoại lệ. Bây giờ chúng ta sẽ đi vào so sánh hai biến object cùng tham chiếu đến cùng một địa chỉ lưu trữ bằng ví dụ dưới đây nhé:

 let khachHang = { 
      ten: "An"
  };
 let nguoiDung = khachHang;

 console.log(khachHang == nguoiDung);
 console.log(khachHang === nguoiDung);

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

Qua đây chúng ta rút ra được là khi hai biến object cùng tham chiếu tới địa chỉ nơi lưu trữ object thì sẽ bằng nhau.

Bây giờ chúng ta tiếp tục thử so sánh hai biến object có cùng dữ liệu xem có bằng nhau không thông qua ví dụ dưới đây nhé:

 let khachHang = { 
      ten: "An"
  };
 let nguoiDung = { 
      ten: "An"
  };

 console.log(khachHang == nguoiDung);
 console.log(khachHang === nguoiDung);

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

Qua đây chúng ta có thể suy ra là dù hai biến object có cùng dữ liệu nhưng tham chiếu tới địa chỉ lưu trữ khác nhau thì sẽ không bằng nhau.

Sử Dụng Object.assign() Javascript

Phương thức Object.assign sẽ giúp chúng ta sao chép dữ liệu từ một object(đối tượng) này sang cho một object(đối tượng) khác. Để nắm rõ hơn bạn xem cú pháp trước nhé:

 Object.assign(target, source)

Ở đây mình sẽ giải thích một số điểm cần lưu ý về cú pháp trên là:

Tham số target sẽ là object lưu trữ các dữ liệu được đưa vào.
Tham số source là danh sách các biến object mà chúng ta cần sao chép dữ liệu. Ở đây source sẽ có một hay nhiều object tùy vào mục đích của bạn nhé.
Phương thức Object.assign() chỉ gán thuộc tính từ các object source chứ không xác định các thuộc tính mới cho object target.

Để hiểu rõ hơn thì mình sẽ đi vào ví dụ cụ thể sau đây nhé:

 let thongTin = { 
      ten: "An"
  };
 let lienLac = { 
      email: "[email protected]"
  };

 let khachHang = Object.assign({}, thongTin, lienLac);
 console.log(khachHang);

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

Ở đây mình sẽ giải thích ví dụ trên tí nhé:

Đầu tiên là chúng ta khai báo hai biến lưu trữ object với dữ liệu khác nhau là thongTin dùng để lưu trữ tên khách hàng và lienLac dùng để lưu trữ email khách hàng.
Sau đó chúng ta sử dụng phương thức Object.assign để gán các thuộc tính trong hai biến object thongTin và lienLac vào trong một object là {} .
Phương thức Object.assign sẽ trả về một object đã được gán hết các thuộc tính mà chúng ta cần sao chép.
Cuối cùng, chúng ta gán object đó cho biến khachHang và xuất ra ngoài màn hình như hình ảnh kết quả ở phía trên.

Đôi khi chúng ta muốn nhóm các object lại với nhau nhưng nếu thuộc tính bị trùng thì nó sẽ lấy giá trị thuộc tính bị trùng cuối cùng để gán cho object đó. Để nắm rõ hơn bạn xem ví dụ sau đây nhé:

 let thongTin = { 
      ten: "An"
  };
 let lienLac = { 
      ten: "Lan",
      email: "[email protected]"
  };

 let khachHang = Object.assign({}, thongTin, lienLac);
 console.log(khachHang);

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

Để bạn nắm rõ hơn thì mình cũng có một ví dụ về cách sao chép thuộc tính từ 1 object này sang 1 object khác ở dưới đây nhé:

 let thongTin = { 
      ten: "An"
  };

 let khachHang = Object.assign({}, thongTin);
 console.log(khachHang);

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

Cũng với ví dụ trên ta sẽ kiểm tra xem là hai biến thongTin và khachHang khi sử dụng phương thức Object.assign có tham chiếu đến cùng địa chỉ lưu trữ object như khi ta sử dụng thongTin = khachHang ở ví dụ phía trên không nhé?

Vậy chúng ta rút ra kết luận là hai biến sẽ hoàn toàn độc lập với nhau và không cùng tham chiếu đến cùng địa chỉ lưu trữ object khi sử dụng phương thức Object.assign().

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được cách sao chép cũng như so sánh 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ẻ!