Video học lập trình mỗi ngày

Tại thời điểm viết bài, tất cả các trình duyệt đã triển khai API này, Firefox đã chuyển nó sang phiên bản ổn định trong Firefox 94. Ngoài ra, Node 17 và Deno 1.14 đã triển khai API này. Bạn có thể bắt đầu sử dụng chức năng này ngay bây giờ và tôi nghĩ bạn cũng như tôi đều háo hức cho tính năng này.

StructuredClone là gì?

StructuredClone là một tính năng cho phép những lập trình viên có thể sử dụng để deep-copying. Nhằm thay thế cho các phương pháp cũ như sử dụng object spread operator.

Một cách để tạo một bản shallow-copy trong JavaScript. Sử dụng object spread operator...

const myOriginal = {
  someProp: "with a string value",
  anotherProp: {
    withAnotherProp: 1,
    andAnotherProp: true
  }
};

const myShallowCopy = {...myOriginal};

Ví dụ lấy từ MDN và web.dev.

Việc thêm hoặc thay đổi thuộc tính trực tiếp trên shallow clone sẽ chỉ ảnh hưởng đến bản sao, không ảnh hưởng đến bản gốc:

myShallowCopy.aNewProp = "a new value";
console.log(myOriginal.aNewProp)
// ^ logs `undefined`

Tuy nhiên, việc thêm hoặc thay đổi thuộc tính lồng nhau sâu ảnh hưởng đến cả bản sao và bản gốc:

myShallowCopy.anotherProp.aNewProp = "a new value";
console.log(myOriginal.anotherProp.aNewProp) 
// ^ logs `a new value`

Chính vì vậy chúng ta nên thay đổi bằng cách sử dụng StructuredClone. Cú pháp:

structuredClone(value)
structuredClone(value, { transfer })

Tốt nhất bạn nên xem video của tôi hướng dẫn trên nodejs để biết cách sử dụng tốt nhất. Phiên bản Nodejs mới nhất bạn không nên bỏ qua tính năng structuredClone Ví dụ :

// Create an object with a value and a circular reference to itself.
const original = { name: "MDN" };
original.itself = original;

// Clone it
const clone = structuredClone(original);

console.assert(clone !== original); // the objects are not the same (not same identity)
console.assert(clone.name === "MDN"); // they do have the same values
console.assert(clone.itself === clone); // and the circular reference is preserved