Tác vụ sao chép trong JavaScript khá đơn giản đối với các kiểu dữ liệu nguyên thủy. Tuy nhiên, bạn phải lựa chọn cẩn thận giữa các kỹ thuật Sao chép nông và Sao chép sâu trong khi xử lý các đối tượng và tham chiếu
Trong bản sao nông, chỉ các địa chỉ tham chiếu được sao chép; . Để tránh tình trạng như vậy, bạn có thể sử dụng quy trình Sao chép sâu
Bài đăng này sẽ giải thích khái niệm Sao chép nông và Sao chép sâu bằng các ví dụ thích hợp. Vì vậy, hãy bắt đầu
Sao chép nông trong JavaScript
Một cơ chế trong đó một đối tượng được sao chép một cách khôn ngoan vào một đối tượng được chỉ định được gọi là Sao chép nông
- Phương thức sao chép nông dán một bản sao chính xác của một đối tượng cụ thể vào một đối tượng khác
- Nó chủ yếu được sử dụng để sao chép các phần tử mảng Một chiều, trong đó nó chỉ sao chép các phần tử có ở cấp độ đầu tiên
- Nó chỉ sao chép các địa chỉ tham chiếu sang một đối tượng khác
Các phương pháp để sao chép nông một đối tượng trong JavaScript
Để nông Sao chép một đối tượng JavaScript vào một đối tượng khác, bạn có thể sử dụng các phương pháp sau
- Sự vật. phương thức gán[]
- toán tử trải phổ […]
- Toán tử gán “=”
Ghi chú. Nếu bạn sử dụng “toán tử trải rộng” hoặc “Đối tượng. gán [], thì sau khi sao chép nông, đối tượng được sao chép sẽ bị ngắt kết nối khỏi đối tượng ban đầu, trong khi đó, trong trường hợp sử dụng toán tử “gán”, việc thay đổi đối tượng được sao chép cũng sẽ sửa đổi đối tượng ban đầu
Chúng tôi sẽ thảo luận ngắn gọn về từng phương pháp được đề cập để sao chép nông một đối tượng trong JavaScript
Shallow Sao chép một đối tượng trong JavaScript bằng toán tử trải rộng
Toán tử "lây lan" có thể được sử dụng để sao chép nông một đối tượng. Nó được thể hiện dưới dạng ba dấu chấm liên tiếp “…”
Cú pháp sử dụng toán tử trải rộng để Sao chép nông một đối tượng trong JavaScript
let object2 = { . đối tượng1};
Tại đây, spread operator sẽ copy cặp key-value của “object1” sang “object2”
Ví dụ. Shallow Sao chép một đối tượng trong JavaScript bằng toán tử trải rộng
Đầu tiên chúng ta sẽ tạo một đối tượng tên là “employee” có 2 cặp key-value
const nhân viên = {
tên . 'Alex',
chỉ định . 'Người quản lý'
};
Sau đó, chúng ta sẽ sao chép nông đối tượng “employee” sang đối tượng “emp1” mới được tạo bằng cách sử dụng toán tử trải rộng
let emp1 = { . nhân viên};
Ngoài ra, bạn có thể xác minh xem việc sửa đổi các giá trị thuộc tính của đối tượng “emp1” cũng có thể ảnh hưởng đến thuộc tính tên của đối tượng “nhân viên” hay không
emp1. tên = 'Max';
bảng điều khiển. log[“tên emp1. ” + emp1. tên];
bảng điều khiển. log[“tên nhân viên. ” + nhân viên. tên];
Chúng ta đã sao chép thành công đối tượng “employee” sang đối tượng “emp1” và sửa đổi “emp1. tên” giá trị thuộc tính chưa áp dụng bất kỳ thay đổi nào đối với “nhân viên. tên” tài sản
Sao chép nông trong JavaScript bằng Object. phương thức gán[]
JavaScript “Đối tượng. phương thức gán []” được sử dụng để sao chép nông cặp “khóa-giá trị” của một đối tượng đã được tạo vào một đối tượng khác. Đối tượng ban đầu sẽ không bị ảnh hưởng trong khi sử dụng đối tượng. phương thức gán[]
Cú pháp sử dụng Object. phương thức gán [] cho Bản sao nông trong JavaScript
Đối tượng . chỉ định[ mục tiêu , nguồn ]
Ở đây, "mục tiêu" đại diện cho đối tượng JavaScript có cặp khóa-giá trị sẽ được sao chép và "nguồn" cho biết đối tượng sẽ đặt cặp khóa-giá trị được sao chép
Ví dụ. Sao chép nông trong JavaScript bằng Object. phương thức gán[]
Chúng tôi sẽ gọi “Đối tượng. phương thức gán []” để sao chép nông đối tượng “nhân viên” sang “emp1”
let emp1 = { };Object.giao[ emp1 , nhân viên ];
“Đối tượng. phương thức gán[]” sẽ trả về đối tượng đích, trong trường hợp của chúng ta là “emp1”
Tiếp theo, chúng tôi sẽ cập nhật “emp. tên” giá trị thuộc tính
emp1. tên = 'Stepheny';console.log["emp1 name. " + emp1. tên];
bảng điều khiển. log["nhân viên. tên. " + nhân viên. tên];
Như bạn có thể thấy trong đầu ra dưới đây, thay đổi “emp. tên” giá trị thuộc tính chưa sửa đổi đối tượng “nhân viên”
Sao chép nông trong JavaScript bằng toán tử gán
Toán tử gán “=” cũng có thể hỗ trợ sao chép một đối tượng trong JavaScript. Trong trường hợp sử dụng toán tử gán, cả hai biến sẽ tham chiếu đến cùng một đối tượng. Những thay đổi trong một đối tượng cũng sẽ ảnh hưởng đến giá trị thuộc tính của đối tượng tương ứng
Cú pháp sử dụng toán tử gán cho Shallow Copy trong JavaScript
đối tượng2 = đối tượng1
Ở đây, toán tử gán sao chép “object1” thành “object2”
Ví dụ. Sao chép nông trong JavaScript bằng toán tử gán
Bây giờ, chúng ta sẽ sử dụng toán tử gán JavaScript để sao chép nông đối tượng “employee” sang “emp1”
let emp1 = { };emp1 = employee;
Trong bước tiếp theo, chúng tôi sẽ chỉ định “Stepheny” làm giá trị của “emp1. tên” tài sản
emp1. tên = 'Stepheny';console.log["emp1 name. " + emp1. tên];
bảng điều khiển. log["nhân viên. tên. " + nhân viên. tên];
Đầu ra đã cho biểu thị rằng việc thay đổi “emp. tên” giá trị thuộc tính chưa sửa đổi thuộc tính “tên” của đối tượng “nhân viên”
Bây giờ, chúng ta sẽ thảo luận về khái niệm Deep Copy một đối tượng trong JavaScript
Sao chép sâu trong JavaScript
“Deep Copy” là một thủ tục đệ quy sao chép đối tượng. Cơ chế này tạo một đối tượng mới và sau đó sao chép cặp khóa-giá trị của đối tượng đã chỉ định vào đối tượng đó. Câu lệnh này biểu thị rằng, trong khi Sao chép sâu, một đối tượng JavaScript được sao chép hoàn toàn vào một đối tượng khác. Sau đó, đối tượng được sao chép bị ngắt kết nối với đối tượng ban đầu
Các phương pháp sao chép sâu một đối tượng trong JavaScript
Các phương thức được sử dụng để sao chép sâu một đối tượng JavaScript là JSON. stringify[] và JSON. parse[], trong đó phương thức stringify[] chuyển đổi một đối tượng JavaScript cụ thể thành một chuỗi, sau đó phương thức parse[] thực hiện thao tác phân tích cú pháp và trả về một đối tượng
Cú pháp sử dụng JSON. stringify[] và JSON. parse[] để sao chép sâu một đối tượng trong JavaScript
let object2 = JSON. phân tích cú pháp[ JSON. xâu chuỗi[ đối tượng1 ]];
Ở đây, phương thức stringify[] chuyển đổi JavaScript “object1” thành một chuỗi, sau đó phương thức parse[] thực hiện thao tác phân tích cú pháp và trả về sẽ được lưu trữ trong “object2”
Ví dụ. Sao chép sâu trong JavaScript một đối tượng trong JavaScript bằng JSON. stringify[] và JSON. phương pháp phân tích []
Trong ví dụ này, chúng tôi đã sử dụng các phương thức stringify[] và parse[] để sao chép “employee” sang đối tượng “emp1”. “JSON. stringify[]” sẽ chuyển đổi đối tượng “employee” thành “string” và sau đó là “JSON. parse[]” phân tích cú pháp chuỗi kết quả và trả về một đối tượng JavaScript
cho phép nhân viên = {
tên . 'Alex',
địa chỉ . { thành phố . 'Ankara', quốc gia . 'Thổ Nhĩ Kỳ' }
};
var emp1 = JSON. phân tích cú pháp[ JSON. xâu chuỗi[ nhân viên ]];
bảng điều khiển. log[ emp1 ];
Đầu ra đã cho có nghĩa là chúng ta đã sao chép thành công đối tượng “employee” sang “emp1”
Cuối cùng, chúng tôi sẽ sửa đổi một số thuộc tính của đối tượng “emp1” và sau đó kiểm tra kết quả
emp1. tên = 'Max';
emp1. địa chỉ . thành phố = 'Istanbul';
bảng điều khiển. log["emp1. tên. " + emp1. tên];
bảng điều khiển. log["emp1. Địa chỉ. thành phố. " + emp1. địa chỉ . thành phố];
bảng điều khiển. log["nhân viên. tên. " + nhân viên. tên];
bảng điều khiển. log["nhân viên. Địa chỉ. thành phố. " + nhân viên. địa chỉ . thành phố];
Sau khi thực hiện thao tác sao chép sâu, “emp1” sẽ bị ngắt kết nối với “employee”, vì vậy mọi thay đổi được thực hiện trong “emp1” sẽ không ảnh hưởng đến đối tượng “employee”
Chúng tôi đã tổng hợp tất cả các thông tin cần thiết liên quan đến các đối tượng Sao chép nông và Sao chép sâu trong JavaScript. Bạn có thể khám phá thêm nó theo yêu cầu của bạn
Phần kết luận
toán tử trải rộng “[…]”, “Đối tượng. toán tử gán []”, và “gán” là các phương thức cho phép bạn sao chép nông các đối tượng và sao chép sâu một đối tượng JavaScript, JSON. stringify[] và JSON. parse[] được sử dụng, trong đó JSON. Phương thức stringify[] chuyển đổi một đối tượng cụ thể thành một chuỗi, sau đó được phân tích lại bằng JSON. phương pháp phân tích []. Bài đăng này giải thích khái niệm Sao chép nông và sâu bằng các ví dụ thích hợp