Trong JavaScript, sao chép một mảng không đơn giản như sử dụng toán tử gán (=) để tạo bản sao. Nếu bạn đã từng thử điều này, bạn sẽ ngạc nhiên khi phát hiện ra rằng nó chỉ tạo ra một liên kết đến danh sách ban đầu. Thỏa thuận là gì?
Trong hướng dẫn này, chúng ta sẽ nói về cách sao chép một mảng JavaScript. Chúng tôi sẽ hướng dẫn về mã cho ba chiến lược mảng sao chép JavaScript để bạn có thể bắt đầu sao chép mảng.
Sự cố khi sao chép mảng JavaScript
Ở một mức độ nào đó, toán tử “=” tạo một bản sao của mảng thành một biến mới. Tuy nhiên, nó giống một con trỏ hơn là một bản sao. Điều này là do toán tử “=” tạo ra một tham chiếu đến một mảng ban đầu. Nó không tạo bản sao của mảng hiện có.
Hãy thử tạo bản sao của một mảng bằng toán tử gán mà không có mã nào khác:
var berries = ["Strawberry", "Gooseberry", "Raspberry"]; var fruits = berries; console.log(fruits);
Mã của chúng tôi trả về:
[ "Strawberry", "Gooseberry", "Raspberry" ]
Có vẻ như mảng của chúng tôi đã được sao chép. "Fruit" chứa tất cả các giá trị từ mảng "berries" của chúng ta.
Bây giờ, hãy thử thêm một mục vào mảng "hoa quả":
fruits.push("Melon");
console.log(fruits);
console.log(berries); Chúng tôi đã thêm “Melon” vào mảng trái cây. Sau đó, chúng tôi in ra các giá trị của “trái cây” và “quả mọng” vào bảng điều khiển:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ] [ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]
Cả “hoa quả” và “quả mọng” đều chứa các giá trị như nhau. Đó là bởi vì chúng tôi chưa nhân bản mảng kỹ thuật của mình. Chúng tôi vừa tạo một tham chiếu đến nó.
Bất cứ khi nào chúng ta thao tác với mảng "quả", các thay đổi sẽ được thực hiện trong mảng "quả".
Cách sao chép một mảng JavaScript
Toán tử gán không sao chép một mảng. Chúng tôi phải sử dụng một cách tiếp cận khác. May mắn cho chúng tôi, có rất nhiều cách để tạo bản sao của một mảng. Ba cách tiếp cận hàng đầu là:
- Sử dụng toán tử spread
- Sử dụng vòng lặp for
- Sử dụng Array.from
Hãy cùng thảo luận về những điều này.
Sử dụng Toán tử Spread
Toán tử spread là một tính năng được giới thiệu trong JavaScript ES6. Nó cho phép bạn truy cập nội dung của một đối tượng có thể lặp lại. Toán tử này thường được sử dụng để tạo một bản sao cạn của một mảng.
Toán tử spread bao gồm ba dấu chấm, giống như một dấu chấm lửng (…). Hãy thử tạo một bản sao của mảng "quả mọng" của chúng ta từ trước:
var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = [...berries];
fruits.push("Melon"); Chúng tôi đã sử dụng toán tử spread để tạo một bản sao của mảng của chúng tôi. Hãy kiểm tra các giá trị của mảng của chúng tôi để đảm bảo chúng chính xác:
console.log(berries); console.log(fruits);
Mã của chúng tôi trả về:
[ "Strawberry", "Gooseberry", "Raspberry" ] [ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]
Giá trị "Melon" chỉ được thêm vào mảng "hoa quả". Điều này là do chúng tôi đã sử dụng toán tử spread để tạo bản sao của mảng "quả mọng". Bây giờ, mảng "hoa quả" là mảng của riêng nó. Các giá trị của nó tách biệt với mảng "quả mọng".
Sử dụng vòng lặp for
Phương pháp đã thử và đúng, sử dụng vòng lặp for là một cách tốt để tạo bản sao của một mảng.
Phương pháp này có thể không được ưa chuộng như toán tử spread vì nó yêu cầu nhiều dòng mã hơn. Như đã nói, vòng lặp for sao chép tốt một đối tượng.
var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = [];
for (var i = 0; i < berries.length; i++) {
fruits[i] = berries[i]
}
Chúng tôi đã khai báo hai danh sách:quả mọng và trái cây. Trái cây ban đầu là một danh sách trống. Sau đó, chúng tôi đã sử dụng vòng lặp for để lặp lại mọi mục trong danh sách "quả mọng". Đối với mỗi mục trong danh sách, giá trị được sao chép sang mảng "quả".
Hãy chạy thử nghiệm của chúng tôi để xem liệu các mảng của chúng tôi có tách biệt hay không:
fruits.push("Grapefruit");
console.log(berries);
console.log(fruits); Mã của chúng tôi trả về:
[ "Strawberry", "Gooseberry", "Raspberry" ] [ "Strawberry", "Gooseberry", "Raspberry", "Grapefruit" ]
Thành công! "Berries" và "fruit" là hai mảng riêng biệt.
Sử dụng Array.from ()
Array.from() phương thức biến bất kỳ đối tượng có thể lặp lại nào thành một mảng. Nó đi qua từng mục trong một vùng có thể lặp lại và gắn nó vào một mảng mới. Điều này có nghĩa là nó có thể được sử dụng để sao chép một mảng.
Hãy tạo lại một bản sao của mảng “quả mọng” của chúng ta:
var berries = ["Strawberry", "Gooseberry", "Raspberry"]; var fruits = Array.from(berries);
Giải pháp này, giống như cú pháp của toán tử spread, chỉ chiếm hai dòng mã. Đó là một cách hiệu quả và ngắn gọn để sao chép một mảng. Bây giờ, hãy chạy thử nghiệm để kiểm tra các mảng mới của chúng ta:
fruits.push("Pineapple");
console.log(berries);
console.log(fruits); Mã của chúng tôi trả về:
[ "Strawberry", "Gooseberry", "Raspberry" ] [ "Strawberry", "Gooseberry", "Raspberry", "Pineapple" ]
Các mảng của chúng tôi đã được sao chép thành công.
Kết luận
Sao chép một mảng trong JavaScript thật dễ dàng khi bạn biết cách.
Toán tử gán không đủ để sao chép một mảng nếu bạn muốn tạo một phiên bản riêng biệt của một mảng. Điều này là do toán tử gán tạo một con trỏ đến một mảng hiện có; nó không tạo ra một mảng mới.
Bạn có thể tạo bản sao của một mảng bằng toán tử spread, vòng lặp for hoặc Array.from() phương pháp. Bây giờ, bạn đã sẵn sàng sao chép các mảng trong JavaScript như một chuyên gia.