Phương pháp sao chép nông tạo một bản sao trong đó nguồn và tham chiếu biến được sao chép vẫn giữ nguyên. Điều này có nghĩa là những sửa đổi được thực hiện ở một nơi sẽ ảnh hưởng đến cả hai nơi
Đây là một ví dụ để hiểu rõ hơn
const first_person = {
name: "Jack",
age: 24,
}
const second_person = first_person;
second_person.age = 25;
console.log[first_person.age]; // output: 25
console.log[second_person.age]; // output: 25
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Thay đổi giá trị thuộc tính age của đối tượng
const first_person = {
name: "Jack",
age: 24
};
let second_person = first_person;
second_person = {
name: "Jack",
age: 23
};
console.log[first_person.age]; // Output: 24
console.log[second_person.age]; // Output: 23
7, cũng sẽ thay đổi thuộc tính age của đối tượng const first_person = {
name: "Jack",
age: 24
};
let second_person = first_person;
second_person = {
name: "Jack",
age: 23
};
console.log[first_person.age]; // Output: 24
console.log[second_person.age]; // Output: 23
8Bây giờ hãy xem một ví dụ khác
const first_person = {
name: "Jack",
age: 24
};
let second_person = first_person;
second_person = {
name: "Jack",
age: 23
};
console.log[first_person.age]; // Output: 24
console.log[second_person.age]; // Output: 23
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Ồ, chuyện gì đã xảy ra ở đây vậy? .
Well, here we are not changing the values of a specific property rather we are assigning a new object.
Sao chép sâu
Phương pháp sao chép sâu tạo một bản sao trong đó nguồn và tham chiếu biến được sao chép hoàn toàn khác nhau. Điều này có nghĩa là các sửa đổi được thực hiện ở một nơi sẽ chỉ ảnh hưởng đến biến mà chúng tôi đang thực hiện thay đổi
Một bản sao nông của một đối tượng là một bản sao có các thuộc tính chia sẻ cùng một tham chiếu [trỏ đến cùng các giá trị cơ bản] như các thuộc tính của đối tượng nguồn mà từ đó bản sao được tạo. Kết quả là, khi bạn thay đổi nguồn hoặc bản sao, bạn cũng có thể khiến đối tượng kia cũng thay đổi — và do đó, bạn có thể vô tình gây ra những thay đổi đối với nguồn hoặc bản sao mà bạn không mong muốn. Hành vi đó trái ngược với hành vi của một bản sao sâu, trong đó nguồn và bản sao hoàn toàn độc lập
Đối với các bản sao nông, điều quan trọng là phải hiểu rằng việc thay đổi có chọn lọc giá trị của thuộc tính dùng chung của một phần tử hiện có trong một đối tượng khác với việc gán một giá trị hoàn toàn mới cho một phần tử hiện có
Ví dụ: nếu trong một bản sao nông có tên là
9 của một đối tượng mảng, giá trị của phần tửconst first_person = { name: "Jack", age: 24 }; let second_person = first_person; second_person = { name: "Jack", age: 23 }; console.log[first_person.age]; // Output: 24 console.log[second_person.age]; // Output: 23
0 làingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
1 và bạn thực hiệningredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
2, thì phần tử tương ứng trong đối tượng nguồn cũng sẽ thay đổi — bởi vì bạn đã thay đổi một cách có chọn lọc thuộc tính của một đối tượng mảng.ingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
Tuy nhiên, nếu thay vào đó bạn thực hiện
3, thì phần tử tương ứng trong đối tượng nguồn sẽ không thay đổi — bởi vì trong trường hợp đó, bạn không chỉ thay đổi có chọn lọc một thuộc tính của phần tử mảng hiện có mà bản sao nông chia sẻ với đối tượng nguồn;ingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
Trong JavaScript, tất cả các thao tác sao chép đối tượng tích hợp sẵn [cú pháp trải rộng,
5,ingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
0,ingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
1,ingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
2 vàingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
3] tạo ra các bản sao nông thay vì các bản sao sâuingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
Thí dụ
Xem xét ví dụ sau, trong đó một đối tượng mảng
4 được tạo và sau đó một đối tượngingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
5 được tạo bằng cách sao chép đối tượngingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
4 đóingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
let ingredients_list = ["noodles", { list: ["eggs", "flour", "water"] }]; let ingredients_list_copy = Array.from[ingredients_list]; console.log[JSON.stringify[ingredients_list_copy]]; // ["noodles",{"list":["eggs","flour","water"]}]
Thay đổi giá trị của thuộc tính
7 trongingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
5 cũng sẽ khiến thuộc tínhingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
7 thay đổi trong đối tượng nguồningredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
4ingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
ingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
Việc gán một giá trị hoàn toàn mới cho phần tử đầu tiên trong
5 sẽ không gây ra bất kỳ thay đổi nào đối với phần tử đầu tiên trong đối tượng nguồningredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
4ingredients_list_copy[1].list = ["rice flour", "water"]; console.log[ingredients_list[1].list]; // Array [ "rice flour", "water" ] console.log[JSON.stringify[ingredients_list]]; // ["noodles",{"list":["rice flour","water"]}]
JavaScript là bản sao sâu hay nông?
Giống như hầu hết các ngôn ngữ lập trình khác, JavaScript cho phép hỗ trợ khái niệm bản sao sâu và bản sao nông .Sự khác biệt giữa bản sao nông và bản sao sâu là gì?
Trong Bản sao nông, một bản sao của đối tượng ban đầu được lưu trữ và cuối cùng chỉ có địa chỉ tham chiếu được sao chép. Trong Bản sao sâu, cả bản sao của đối tượng gốc và bản sao lặp lại đều được lưu trữ .Bản sao nông trong JavaScript là gì?
Bản sao nông của đối tượng là bản sao có thuộc tính chia sẻ cùng tham chiếu [trỏ đến cùng giá trị cơ bản] như thuộc tính của đối tượng nguồn mà từ đó bản sao được tạo ra< . .JavaScript có lây lan deep copy không?
Đối với các đối tượng lồng nhau toán tử trải rộng sẽ cung cấp một bản sao sâu cho phiên bản đầu tiên của các giá trị nhưng để lại tất cả dữ liệu lồng nhau dưới dạng bản sao nông . Lưu ý hành vi này.