CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết trên blog CFSDN này Làm cách nào để sao chép các đối tượng trong JavaScript? Được tác giả sưu tầm và biên soạn. Nếu các bạn quan tâm tới bài viết này thì nhớ like nhé.

Các giá trị nguyên thủy và tham chiếu (đối tượng) hoạt động rất khác nhau khi chúng ta muốn sao chép chúng.

giá trị ban đầu

  。

Chúng tôi giả định rằng tên biến có giá trị nguyên thủy được liên kết với nó (số, chuỗi, boolean, không xác định và null). Nếu chúng ta sao chép tên biến này sang một biến khác name2, mọi sửa đổi đối với biến ban đầu sẽ không ảnh hưởng đến biến thứ hai vì chúng là giá trị ban đầu.

1. cho phép tên="Mặt tiền Xiaozhi"; 
2. hãy để name2= tên; 
3. console.log (tên, name2); // giao diện Xiaozhi, giao diện Xiaozhi 
4. tên="Vương Đại Dạ"; 
5. console.log (tên,name2); // Giao diện người dùng Xiaozhi của Wang Daye 

giá trị tham chiếu

  。

Tuy nhiên, nếu chúng ta thực hiện tương tự với giá trị loại tham chiếu, mọi thay đổi chúng ta thực hiện đối với một biến cũng sẽ được phản ánh trong biến kia vì cả hai biến đều trỏ đến cùng một đối tượng.

mảng

  。

Để sao chép một mảng, phương thức slice() được sử dụng để tạo một bản sao mới của mảng. Bản sao này có thể được sửa đổi độc lập mà không ảnh hưởng đến mảng ban đầu.

Nếu không có đối số nào được truyền vào, nó sẽ tạo một bản sao chính xác của mảng, nhưng các số cũng có thể được truyền dưới dạng đối số. Nếu chỉ truyền một số, nó sẽ xác định giá trị của chỉ mục mà chúng ta muốn sao chép từ đó, còn nếu truyền hai số, nó sẽ đánh dấu điểm bắt đầu và kết thúc.

1. //Ví dụ 1 
2. tên hằng số = ['Giao diện người dùng Xiaozhi', 'Vương Đại Nghiệp', 'Xiaoli']; 
3. const names2 = tên; 
4. console.log(tên, tên2); 
5. // ["Mặt tiền Xiaozhi", "Vương Đại Dạ", "ít sức mạnh"]  
6. // ["Mặt tiền Xiaozhi", "Vương Đại Dạ", "ít sức mạnh"]  
7.  
8. // Ví dụ 2 
9. tên2[2] = 'Lực lượng nhỏ phía trước'; 
10. console.log(tên, tên2); 
11. // ["Mặt tiền Xiaozhi", "Vương Đại Dạ", "Ít sức mạnh ở mặt trước"]  
12. // ["Mặt tiền Xiaozhi", "Vương Đại Dạ", "Ít sức mạnh ở mặt trước"]  
13.  
14. //Ví dụ 3 
15. const name2 = names.slice(); 
16. tên[2] = 'Tôi là người khôn ngoan hàng xóm'; 
17. console.log(tên2, tên2) 
18. // ["Mặt tiền Xiaozhi", "Vương Đại Dạ", "Ít sức mạnh ở mặt trước"] 
19. // ["Mặt tiền Xiaozhi", "Vương Đại Dạ", "Tôi là người khôn ngoan hàng xóm"] 

sự vật

  。

Điều tương tự cũng xảy ra khi giá trị tham chiếu là một đối tượng và bất kỳ sửa đổi nào đối với một trong các thuộc tính của nó đều ảnh hưởng đến cả hai biến. Để sao chép một đối tượng, hãy sử dụng phương thức Object.sign(), phương thức này sao chép các giá trị của tất cả các thuộc tính có thể đếm được của một hoặc nhiều đối tượng nguồn vào đối tượng đích, nhưng phương thức này chỉ tạo một bản sao nông của đối tượng.

1. //Ví dụ 1 
2. tên hằng số = { 
3.   tên: 'Giao diện người dùng Xiaozhi', 
4.   họ: 'Anh chàng thông thái nhà bên' 
5. } 
6.  
7. const names2 = tên; 
8. console.log(names,name2) //Kết quả in hoàn toàn giống nhau 
9.  
10. // Ví dụ 2 
11. tên2.họ ='Laowang bên cạnh'; 
12. console.log(tên, tên2) 
13.  
14. // {tên: "Mặt tiền Xiaozhi", họ: "Lão Vương bên cạnh"} 
15. // {tên: "Mặt tiền Xiaozhi", họ: "Lão Vương bên cạnh"} 
16.  
17. //Ví dụ 3 
18. const names3 = Object.assign({}, names); 
19. tên3.họ = 'Nhà bên P cũ gợi cảm'; 
20. console.log(tên, tên3) 
21.  
22. // {tên: "Mặt tiền Xiaozhi", họ: "Lão Vương bên cạnh"} 
23. // {tên: "Mặt tiền Xiaozhi", họ: "Lão biến thái nhà bên"} 

Để tạo một bản sao sâu của một đối tượng, cần sử dụng các phương pháp khác.

Như chúng tôi đã nói, phương thức Object.sign() chỉ hoạt động như một bản sao nông (tức là khi đối tượng của chúng tôi không có các đối tượng khác làm thuộc tính). Trong những trường hợp này, phải tạo một bản sao sâu của đối tượng.

Không giống như bản sao nông, bản sao sâu sao chép từng đối tượng con một cách đệ quy cho đến khi tất cả các đối tượng liên quan đều được sao chép.

Chúng ta có thể sử dụng phương pháp nào để tạo bản sao sâu của một đối tượng?

JSON.parse(JSON.stringify(obj))

  。

Phương thức này sử dụng JSON.stringify() để chuyển đổi đối tượng thành một chuỗi và sau đó JSON.parse() để chuyển đổi nó trở lại thành một đối tượng. Phương thức này hoạt động với các đối tượng đơn giản, nhưng không hoạt động nếu thuộc tính đối tượng là một hàm.

1. tên hằng số = { 
2.   tên: 'Giao diện người dùng Xiaozhi', 
3.   họ: 'Anh chàng thông thái nhà bên', 
4.   xã hội: { 
5.     tuần: 'Cuộc di cư vĩ đại của thế giới', 
6.     địa chỉ: 'www.lsp.com' 
7.   } 
8. } 
9. const names2 = JSON.parse(JSON.stringify(tên)); 
10. tên2.xã hội.url = 'www.baidu.com'; 
11. console.log(tên, tên2); 
12.  
13. /**  
14. { 
15.   tên: "Mặt tiền Xiaozhi" 
16.   xã hội: {wx: "Cuộc di cư vĩ đại của thế giới", url: "www.lsp.com"} 
17.   họ: "Người khôn ngoan nhà bên" 
18. } 
19. */ 
20.  
21. /**  
22. { 
23.   tên: "Mặt tiền Xiaozhi" 
24.   xã hội: {wx: "Cuộc di cư vĩ đại của thế giới", url: "www.baidu.com"} 
25.   họ: "Người khôn ngoan nhà bên" 
26. } 
27. */ 

bản sao sâu

  。

Một cách rất thú vị và tao nhã khác để sao chép sâu các đối tượng là sử dụng các hàm đệ quy.

Chúng ta tạo một hàm deepClone(object) và truyền cho nó đối tượng mà chúng ta muốn sao chép làm tham số. Bên trong hàm, một bản sao biến cục bộ sẽ được tạo, đây là một đối tượng trống trong đó mọi thuộc tính được sao chép từ đối tượng ban đầu sẽ được thêm vào nó.

Ý tưởng cụ thể:

• Nếu thuộc tính không phải là một đối tượng, nó chỉ được sao chép và thêm vào đối tượng nhân bản mới.
• Nếu thuộc tính là một đối tượng, hãy thực hiện lại hàm deepClone(value) và chuyển giá trị của thuộc tính (đối tượng trong trường hợp này) làm tham số và lặp lại quy trình tương tự.

1. chức năng deepClone(đối tượng) { 
2.   var clone = {}; 
3.   vì (của chúng tôi chìa khóa TRONG sự vật) { 
4.     giá trị var = đối tượng[chìa khóa]; 
5.     nếu (typeof(giá trị) !== 'sự vật') { 
6.       dòng vô tính[chìa khóa] = giá trị; 
7.     } khác { 
8.       dòng vô tính[chìa khóa]=deepClone(giá trị); 
9.     } 
10.   } 
11.   trở lại dòng vô tính; 
12. }  
13.  
14. deepClone({giá trị1:1,giá trị2:{giá trị3:2}}); 
15. //{value1:1,value2:{value3:2}} 
16. deepClone({giá trị1:1,giá trị2:{giá trị3:{giá trị3b:3}}}); 
17. //{value1:1,value2:{value3:{value3b:3}}} 

Tác giả: Luigi Nori Người dịch: Front-end Xiaozhi Nguồn: stackabuse.

Văn bản gốc: https://www.ma-o.org/en/programming/javascript/the-javascript-asign-method-to-merge-and-clone-objects.

Bài viết cuối cùng nói về cách sao chép đối tượng trong JavaScript? Bài viết này chỉ vậy thôi, nếu bạn muốn biết thêm về cách sao chép các đối tượng trong JavaScript? Về nội dung, vui lòng tìm kiếm các bài viết của CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .