Trong ví dụ này, bạn sẽ học cách viết một chương trình sao chép một đối tượng.
Để hiểu ví dụ này, bạn nên có kiến thức về các chủ đề lập trình JavaScript sau:
- Đối tượng JavaScript
- JavaScript Object.assign ()
Đối tượng JavaScript là một kiểu dữ liệu phức tạp có thể chứa nhiều kiểu dữ liệu khác nhau. Ví dụ,
const person = ( name: 'John', age: 21, )
Đây, personlà một đối tượng. Bây giờ, bạn không thể sao chép một đối tượng bằng cách làm như thế này.
const copy = person; console.log(copy); // (name: "John", age: 21)
Trong chương trình trên, copybiến có cùng giá trị với personđối tượng. Tuy nhiên, nếu bạn thay đổi giá trị của copyđối tượng, giá trị trong personđối tượng cũng sẽ thay đổi. Ví dụ,
copy.name = 'Peter'; console.log(copy.name); // Peter console.log(person.name); // Peter
Sự thay đổi được nhìn thấy trong cả hai đối tượng vì các đối tượng là kiểu tham chiếu . Và cả hai copyvà personđều trỏ đến cùng một đối tượng.
Ví dụ 1. Sao chép đối tượng bằng Object.assign ()
// program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = Object.assign((), person); console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);
Đầu ra
(tên: "John", tuổi: 21) Peter John
Các Object.assign()phương pháp là một phần của ES6 chuẩn. Các Object.assign()Thực hiện phương pháp sâu sao chép và bản sao tất cả các thuộc tính từ một hoặc nhiều đối tượng.
Lưu ý : Giá trị trống ()làm đối số đầu tiên đảm bảo rằng bạn không thay đổi đối tượng ban đầu.
Ví dụ 2: Sao chép đối tượng bằng cú pháp Spread
// program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = (… person) console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);
Đầu ra
(tên: "John", tuổi: 21) Peter John
Cú pháp lây lan … đã được giới thiệu trong phiên bản sau (ES6).
Cú pháp lây lan có thể được sử dụng để tạo một bản sao nông của một đối tượng. Điều này có nghĩa là nó sẽ sao chép đối tượng. Tuy nhiên, các đối tượng sâu hơn được tham chiếu. Ví dụ,
const person = ( name: 'John', age: 21, // the inner objects will change in the shallow copy marks: ( math: 66, english: 73) ) // cloning the object const clonePerson = (… person) console.log(clonePerson); // (name: "John", age: 21, marks: (… )) // changing the value of clonePerson clonePerson.marks.math = 100; console.log(clonePerson.marks.math); // 100 console.log(person.marks.math); // 100
Ở đây, khi giá trị đối tượng bên trong mathđược thay đổi thành 100 của clonePersonđối tượng, giá trị của mathkhóa của personđối tượng cũng thay đổi.
Ví dụ 3: Sao chép đối tượng bằng JSON.parse ()
// program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = JSON.parse(JSON.stringify(person)); console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);
Đầu ra
(tên: "John", tuổi: 21) Peter John
Trong chương trình trên, JSON.parse()phương thức được sử dụng để sao chép một đối tượng.
Lưu ý : JSON.parse()chỉ hoạt động với Numbervà Stringđối tượng theo nghĩa đen. Nó không hoạt động với một đối tượng theo nghĩa đen functionhoặc symbolthuộc tính.
