Cách sao chép sâu một mảng JavaScript

Để sao chép sâu một mảng đối tượng trong JavaScript, trước tiên chúng ta có thể chuyển mảng đó vào phương thức stringify() trên đối tượng JSON toàn cầu, sau đó sử dụng phương thức parse() trên đối tượng JSON toàn cầu để chuyển đổi chuỗi mảng thành một bản sao hợp lệ của cùng một mảng

TL;DR

// array of objects
const objsArr = [{ name: "John Doe" }, { name: "Roy Daniel" }];

// first convert the array into a string
// using the JSON.stringify() method
const objsArrStr = JSON.stringify(objsArr);

// conver the string again to array of objects
// using the JSON.parse() method
const objsArrDeepCopy = JSON.parse(objsArrStr);

console.log(objsArrDeepCopy);
// copied array of objects -> [{ name: "John Doe" }, { name: "Roy Daniel" }]

Ví dụ: giả sử chúng ta có một mảng với một số đối tượng là phần tử của nó như thế này,

// array of objects
const objsArr = [{ name: "John Doe" }, { name: "Roy Daniel" }];

Bây giờ để sao chép sâu mảng bao gồm các phần tử đối tượng bên trong nó, chúng ta có thể sử dụng JSON.stringify() để chuyển mảng đầu tiên thành một string. Nó có thể được thực hiện như thế này,

// array of objects
const objsArr = [{ name: "John Doe" }, { name: "Roy Daniel" }];

// first convert the array into a string
// using the JSON.stringify() method
const objsArrStr = JSON.stringify(objsArr);

console.log(objsArrStr);

/*
OUTPUT
------

[
    {"name":"John Doe"},
    {"name":"Roy Daniel"}
]
*/

Nếu chúng ta nhìn vào đầu ra ở trên, chúng ta có thể thấy rằng toàn bộ mảng được chuyển đổi thành một chuỗi

Bây giờ, hãy sử dụng phương thức

// array of objects
const objsArr = [{ name: "John Doe" }, { name: "Roy Daniel" }];

// array of objects
const objsArr = [{ name: "John Doe" }, { name: "Roy Daniel" }];

// first convert the array into a string
// using the JSON.stringify() method
const objsArrStr = JSON.stringify(objsArr);

// conver the string again to array of objects
// using the JSON.parse() method
const objsArrDeepCopy = JSON.parse(objsArrStr);

console.log(objsArrDeepCopy);
// copied array of objects -> [{ name: "John Doe" }, { name: "Roy Daniel" }]

Chúng tôi đã tạo thành công một bản sao sâu của mảng với tất cả các thành phần đối tượng bên trong có một tham chiếu mới đến nó. vâng. 🎊

Khi cần sao chép một mảng, chúng ta thường sử dụng slice. Nhưng với ES6, bạn cũng có thể sử dụng toán tử trải rộng để nhân bản một mảng. Khá tiện lợi phải không nào 🤩

const sheeps = ['🐑', '🐑', '🐑'];

// Old way
const cloneSheeps = sheeps.slice();

// ES6 way
const cloneSheepsES6 = [...sheeps];

Tại sao tôi không thể sử dụng = để sao chép một mảng?

Vì mảng trong JS là giá trị tham chiếu nên khi bạn cố sao chép nó bằng cách sử dụng = nó sẽ chỉ sao chép tham chiếu đến mảng gốc chứ không sao chép giá trị của mảng. Để tạo một bản sao thực sự của một mảng, bạn cần sao chép giá trị của mảng dưới một biến giá trị mới. Bằng cách đó, mảng mới này không tham chiếu đến địa chỉ mảng cũ trong bộ nhớ

const sheeps = ['🐑', '🐑', '🐑'];

const fakeSheeps = sheeps;
const cloneSheeps = [...sheeps];

console.log(sheeps === fakeSheeps);
// true --> it's pointing to the same memory space

console.log(sheeps === cloneSheeps);
// false --> it's pointing to a new memory space

Sự cố với giá trị tham chiếu

Nếu bạn đã từng xử lý Redux hoặc bất kỳ khung quản lý trạng thái nào. Bạn sẽ biết tính bất biến là cực kỳ quan trọng. Hãy để tôi giải thích ngắn gọn. Một đối tượng bất biến là một đối tượng không thể thay đổi trạng thái sau khi nó được tạo. Vấn đề với JavaScript là arrays có thể thay đổi. Vì vậy, điều này có thể xảy ra

const sheeps = ['🐑', '🐑'];

const sheeps2 = sheeps;

sheeps2.push('🐺');

console.log(sheeps2);
// [ '🐑', '🐑', '🐺' ]

// Ahhh 😱 , our original sheeps have changed?!
console.log(sheeps);
// [ '🐑', '🐑', '🐺' ]

Đó là lý do tại sao chúng ta cần sao chép một mảng

________số 8_______

Các kiểu dữ liệu có thể thay đổi và không thể thay đổi

có thể thay đổi

• mục tiêu
• mảng
• hàm số

bất biến

Tất cả các nguyên thủy là bất biến

• chuỗi
• số
• boolean
• vô giá trị
• chưa xác định
• Biểu tượng

Chỉ sao chép nông

Xin lưu ý rằng spread chỉ đi sâu một cấp khi sao chép một mảng. Vì vậy, nếu bạn đang cố sao chép một mảng nhiều chiều, bạn sẽ phải sử dụng các giải pháp thay thế khác

const nums = [[1, 2], [10]];

const cloneNums = [...nums];

// Let's change the first item in the first nested item in our cloned array.
cloneNums[0][0] = '👻';

console.log(cloneNums);
// [ [ '👻', 2 ], [ 10 ], [ 300 ] ]

// NOOooo, the original is also affected
console.log(nums);
// [ [ '👻', 2 ], [ 10 ], [ 300 ] ]

🤓 Đây là một điều thú vị tôi đã học được. Bản sao nông có nghĩa là cấp độ đầu tiên được sao chép, các cấp độ sâu hơn được tham chiếu

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

const sheeps = ['🐑', '🐑', '🐑']; const fakeSheeps = sheeps; const cloneSheeps = [...sheeps]; console.log(sheeps === fakeSheeps); // true --> it's pointing to the same memory space console.log(sheeps === cloneSheeps); // false --> it's pointing to a new memory space 0 là một cách khác để sao chép mảng

const sheeps = ['🐑', '🐑', '🐑'];

const cloneSheeps = Array.from(sheeps);

_Thanks. @hakankaraduman_

• _@hakankaraduman. _ vâng, tôi cố gắng không sử dụng trải rộng, nó làm tôi bối rối khi đọc mã vì nó làm hai việc, trải rộng hoặc thu thập theo ngữ cảnh

• CJJ. Tôi nghĩ cách tốt nhất là cách phù hợp nhất với ngữ nghĩa của hoạt động. Tôi thích sử dụng

  const sheeps = ['🐑', '🐑', '🐑'];
  
  const fakeSheeps = sheeps;
  const cloneSheeps = [...sheeps];
  
  console.log(sheeps === fakeSheeps);
  // true --> it's pointing to the same memory space
  
  console.log(sheeps === cloneSheeps);
  // false --> it's pointing to a new memory space
  

  0

  Làm cách nào để sao chép sâu mảng đối tượng JavaScript?

  phương thức clone() , tạo bản sao sâu của một đối tượng hoặc mảng. Lưu ý rằng R. clone() từ Ramda tương đương với _. cloneDeep() cho lodash, vì Ramda không có phương thức trợ giúp bản sao nông.

  Làm cách nào để sao chép mảng này sang mảng khác trong JavaScript?

  Cách sao chép các mục của mảng vào một mảng khác .

  Phương thức nối mảng Javascript. để mảng1 = [1, 2]; . .

  Cách sao chép các mục trong mảng vào một mảng khác. chức năng pushArray (mảng, mảng2) { mảng. xô. .

  Cú pháp lan truyền mảng Javascript. để mảng1 = [1, 2, 3];

  Bản sao mảng có phải là bản sao sâu không?

  Sao chép sâu nghĩa là thực sự tạo một mảng mới và sao chép các giá trị .

  Làm cách nào để tạo bản sao sâu trong js?

  Bây giờ để tạo một bản sao sâu của một đối tượng trong JavaScript, chúng tôi sử dụng JSON. phân tích cú pháp () và JSON. các phương thức stringify() .