Viết một hàm javascript để sao chép một mảng

Để hiểu tại sao có hai loại nhân bản. Hãy đi sâu vào các nguyên tắc cơ bản và giải thích các loại tham chiếu là gì

Không giống như các loại nguyên thủy của bạn [tức là. số hoặc chuỗi], mảng là kiểu tham chiếu. Điều đó có nghĩa là khi bạn gán một mảng cho một biến, bạn đang gán một địa chỉ bộ nhớ chứ không phải chính mảng đó. WTH 😱. Tôi biết điều này hơi khó hiểu. Vì vậy, hãy giải thích với một ví dụ

Sao chép một loại Giá trị

Vì vậy, không có vấn đề lớn ở đây. Chúng tôi đang tạo một bản sao của value. Và nếu chúng tôi thay đổi

let value = 3;
let valueCopy = value; // create copy

console.log[valueCopy]; // 3

// Change valueCopy
valueCopy = 100
console.log[valueCopy]; // 100

// ✅ Original NOT affected 
console.log[value]; // 3

0, nó không ảnh hưởng đến value ban đầu. Có ý nghĩa - khi chúng tôi thay đổi bản sao, nó hoàn toàn không ảnh hưởng đến bản gốc. Tất cả đều tốt ở đây 👍

let value = 3;
let valueCopy = value; // create copy

console.log[valueCopy]; // 3

// Change valueCopy
valueCopy = 100
console.log[valueCopy]; // 100

// ✅ Original NOT affected 
console.log[value]; // 3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sao chép một loại tham chiếu

Được rồi, bây giờ mọi thứ sắp trở nên kỳ lạ. Hãy sao chép mảng của chúng ta bằng phương pháp tương tự như chúng ta đã làm để sao chép một loại giá trị

let array = [1,2,3];
let arrayCopy = array; // create copy

console.log[arrayCopy]; // [1,2,3];

// Change 1st element of the array
arrayCopy[0] = '👻';
console.log[arrayCopy]; // [ '👻', 2, 3 ]

// ❌Original got affected
console.log[array]; // [ '👻', 2, 3 ]

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tại sao mảng ban đầu cũng bị ảnh hưởng? . Các loại tham chiếu không giữ giá trị, chúng là một con trỏ tới giá trị trong bộ nhớ

Giải pháp sao chép các loại tham chiếu

Vì vậy, giải pháp là sao chép giá trị KHÔNG phải con trỏ. Như thế này

let array = [1,2,3];
let arrayCopy = [...array]; // create TRUE copy

console.log[arrayCopy]; // [1,2,3];

// Change 1st element of the array
arrayCopy[0] = '👻';
console.log[arrayCopy]; // [ '👻', 2, 3 ]

// ✅ Original NOT affected 
console.log[array]; // [ 1, 2, 3 ]

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bản sao nông và bản sao sâu

Khi tôi sử dụng trải rộng

let value = 3;
let valueCopy = value; // create copy

console.log[valueCopy]; // 3

// Change valueCopy
valueCopy = 100
console.log[valueCopy]; // 100

// ✅ Original NOT affected 
console.log[value]; // 3

2 để sao chép một mảng, tôi chỉ tạo một bản sao nông. Nếu mảng được lồng vào nhau hoặc nhiều chiều, nó sẽ không hoạt động. chúng ta hãy xem

let nestedArray = [1, [2], 3];
let arrayCopy = [...nestedArray]; 

// Make some changes
arrayCopy[0] = '👻'; // change shallow element
arrayCopy[1][0] = '💩'; // change nested element
console.log[arrayCopy]; // [ '👻', [ '💩' ], 3 ]

// ❌ Nested array got affected
console.log[nestedArray]; // [ 1, [ '💩' ], 3 ]

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Như bạn thấy, lớp nông hay lớp đầu tiên đều được. Tuy nhiên, khi chúng ta thay đổi phần tử lồng nhau, mảng ban đầu cũng bị ảnh hưởng. Vì vậy, giải pháp là thực hiện một bản sao sâu

let nestedArray = [1, [2], 3];
let arrayCopy = JSON.parse[JSON.stringify[nestedArray]]; 

// Make some changes
arrayCopy[0] = '👻'; // change shallow element
arrayCopy[1][0] = '💩'; // change nested element
console.log[arrayCopy]; // [ '👻', [ '💩' ], 3 ]

// ✅ Nested array NOT affected
console.log[nestedArray]; //  1, [ 2 ], 3 ]

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đầu vào của cộng đồng

Các giá trị không tương thích với JSON

@tailcall. Người ta phải thực sự cẩn thận với giải pháp JSON. Nó không hoạt động với các giá trị không tương thích với JSON. Cân nhắc sử dụng chức năng thư viện nếu bạn phải làm việc với dữ liệu đó

function nestedCopy[array] {
    return JSON.parse[JSON.stringify[array]];
}

// undefineds are converted to nulls
nestedCopy[[1, undefined, 2]] // -> [1, null, 2]

// DOM nodes are converted to empty objects
nestedCopy[[document.body, document.querySelector['p']]] // -> [{}, {}]

// JS dates are converted to strings
nestedCopy[[new Date[]]] // -> ["2019-03-04T10:09:00.419Z"]

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

deepClone so với JSON

@alfredosalzillo. Tôi muốn bạn lưu ý rằng có một số khác biệt giữa deepClone và JSON. xâu chuỗi/phân tích cú pháp