For deep copy, the easiest and should be common method is to use JSON.parse() + JSON.stringify(), there is also a third-party script library lodash, which method cloneDeepcan realize deep copy. The native structuredClone()method .
shallow copy vs deep copy
First of all, let's understand the difference between shallow copy and deep copy:
- Shallow copy : that is, only the first layer of the object is copied. References to deeper content. Shallow copies can be achieved in JavaScript using the spread operator
...or using .Object.assign() - Deep copy : means that all levels of the object are copied. This is a true copy of the object. You can
JSON.parse() + JSON.stringify()do this with and now, you can alsostructuredClone()do it with the native method .
Deep copy using structuredClone
The native structuredClone()method uses a structured cloning algorithm to create a deep copy of the given value.
Structured Cloning Algorithm An algorithm for duplicating complex JavaScript objects. Used internally when storing objects via from Worker
postMessage()or using .IndexedDBIt builds clones by recursively entering objects while maintaining a map of previously visited references to avoid infinite traversal loops.
The syntax is as follows:
structuredClone(value)
structuredClone(value, { transfer })
value: The object to be cloned. Can be any type supported by structured cloning.transfer: is an optional parameter, which is an array of transferable objects,值and is not cloned, but transferred to the copied object.
Return value : The return value is a deep copy of the original value.
Here is the sample code:
const objProfile = { name: "DevPoint", detail: { age: 30 } };
const deepCopy = structuredClone(objProfile);
const shallowCopy = { ...deepCopy };
console.log(shallowCopy); // {"name": "DevPoint", "detail": {"age": 35 } }
deepCopy.name = "天行无忌";
deepCopy.detail.age = 35;
console.log(objProfile); // {"name": "DevPoint", "detail": {"age": 30 } }
console.log(deepCopy); // {"name": "天行无忌", "detail": {"age": 35 } }
As seen in this code snippet:
- After updating the properties of the first level cloned object, the original properties are not updated.
- After updating a property at a deeper level, the original property is neither updated. This happens because in this case, deeper layers are also copied.
- As
shallowCopyfor , its value willdeepCopychange with the change of the object, which is easy to cause BUG in project development
structuredClone()Now available in the latest versions of all major browsers and runtimes such as Node.jsor .Deno
at last
I have compiled a set of "Interview Collection of Front-End Manufacturers", which includes HTML, CSS, JavaScript, HTTP, TCP protocol, browser, VUE, React, data structure and algorithm, a total of 201 interview questions, and made an answer for each question Answer and analyze.
Friends in need, you can click the card at the end of the article to receive this document and share it for free
Part of the documentation shows:
The length of the article is limited, and the following content will not be displayed one by one
Friends in need, you can click the card below to get it for free