Javascript sao chép nông và sâu

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

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

Bâ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à

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

9 của một đối tượng mảng, giá trị của phần tử

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 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ệ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"]}]

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.

Tuy nhiên, nếu thay vào đó bạn thực hiệ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"]}]

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;

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,

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"]}]

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âu

Thí dụ

Xem xét ví dụ sau, trong đó 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"]}]

4 được tạo và sau đó một đối tượ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"]}]

5 được tạo bằng cách sao chép đối tượ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"]}]

4 đó

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

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"]}]

7 trong

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"]}]

5 cũng sẽ khiến thuộc tính

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"]}]

7 thay đổi trong đố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"]}]

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"]}]

Việc gán một giá trị hoàn toàn mới cho phần tử đầu tiên trong

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"]}]

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ồ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"]}]

4

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.