Hướng dẫn cách sử dụng object.assign trong javascript. Bạn sẽ biết phương thức Object.assign trong JavaScript là gì cũng như cách sử dụng nó để copy object và gộp 2 object trong Javascript sau bài học này.

Object.assign trong trong JavaScript

Object.assign trong trong JavaScript là một phương thức trong object Object, có tác dụng gộp toàn bộ các thuộc tính của một object vào cuối của một object khác.

Chúng ta sử dụng phương thức assign để gộp object trong JavaScript như sau:

Trong đó dest là object đích chứa toàn bộ các object src cần gộp.

Phương thức assign() có khả năng gộp nhiều object lại với nhau và trả về một object kết quả chứa toàn bộ các thuộc tính của chúng. Chúng ta có thể chỉ định một object trong số chúng và gán các object còn lại vào nó, hoặc là tạo ra một object khác và gán toàn bộ các object vào.

Và dựa vào đó mà chúng ta có 2 style dùng assign() để gộp object trong JavaScript như sau.

Gộp 2 object trong Javascript bằng Object.assign

Với style này của Object.assign, chúng ta chỉ định một object đích từ các object ban đầu, và gán các object còn lại vào nó để gộp 2 object trong Javascript như sau:

let des = { a: 10, b: 15 };
let src = { c: 20 };

console.log('des=',des);
//des= { a: 10, b: 15 }

Object.assign(des, src)
console.log('des=',des);
//des= { a: 10, b: 15, c: 20 }

Tất nhiên chúng ta cũng có thể gộp nhiều hơn 2 object như sau đây:

let des = { a: 10, b: 15 };
let src1 = { c: 20 };
let src2 = { d: 25 };

console.log('des=',des);
//des= { a: 10, b: 15 }

Object.assign(des, src1, src2)
console.log('des=',des);
//des= { a: 10, b: 15, c: 20, d: 25 }

Có thể thấy rõ các thuộc tính trong các object đã được ghép hết vào cuối object des như trên. Và sytle sử dụng phương thức Object.assign này sẽ làm thay đổi object ban đầu.

Chú ý, nếu tồn tại các thuộc tính trùng nhau trong các object thì chúng sẽ bị ghi đè bởi thuộc tính của object cuối cùng. Ví dụ:

let des = { a: 10, b: 15 };
let src1 = { c: 20, b: 40 };
let src2 = { d: 25, b: 88 };

console.log('des=',des);
//des= { a: 10, b: 15 }

Object.assign(des, src1, src2)
console.log('des=',des);
//des= { a: 10, b: 88, c: 20, d: 25 }

Giống như trên thì cả 3 object đều chứa thuộc tính b trùng nhau, tuy nhiên chỉ có thuộc tính của object cuối cùng b: 88 được dùng để ghi đè và là kết quả cuối cùng mà thôi.

Gộp các object vào một object rỗng bằng Object.assign

Với style này, thay vì chỉ định object đích từ trong các object ban đầu, chúng ta gán toàn bộ chúng vào một object rỗng như sau:

let des = { a: 10, b: 15 };
let src1 = { c: 20 };
let src2 = { d: 25 };

console.log('des=',des);
//des= { a: 10, b: 15 }

let result = Object.assign({}, des, src1, src2)

console.log('des=',des);
console.log('result=',result);

Với style này, chúng ta không làm thay đổi các object ban đầu, mà chỉ copy toàn bộ chúng để gán vào trong một object rỗng, qua đó tạo ra mảng kết quả chứa toàn bộ chúng mà thôi.

Sử dụng Object.assign để copy object trong JavaScript

Như đã phân tích trong bài copy object trong JavaScript thì chúng ta cũng có thể sử dụng phương thức Object.assign để copy object trong JavaScript.

Lúc này chúng ta chỉ cần chỉ định object đích là một object rỗng như style 2 ở trên là xong.

Ví dụ, chúng ta copy object trong JavaScript như sau:

let obj = { a: 10, b: 15 };
let newobj = Object.assign({}, obj);

console.log(newobj);//[ a: 10, b: 15 ]

Việc copy object trong JavaScript bằng phương thức assign() không tạo ra mối quan hệ tham chiếu giữa object ban đầu và object kết quả, do đó chúng tồn tại độc lập và không bị ảnh hưởng kể cả khi một trong 2 chúng thay đổi thông qua các Xử lý object trong javascript. Ví dụ:

let obj = { a: 10, b: 15 };
let newobj = Object.assign({}, obj);

console.log(newobj);//[ a: 10, b: 15 ]

obj.a =20;
console.log(newobj);//[ a: 10, b: 15 ]

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách sử dụng Object.assign trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/object-trong-javascript/object-assign-trong-trong-javascript/