structuredClone() is a practical function for deep copy objects that supports complex data types such as Map, Set, Date, and ArrayBuffer. It is more powerful than JSON.parse(JSON.stringify()), can handle circular references without bursting the stack; it is suitable for use when passing data in Web Worker or copying objects with special structures. The call method is const clone = structuredClone(original), but does not support copying functions, undefined, and DOM elements. If you need to transfer an ArrayBuffer, you should add the transfer parameter. Currently, mainstream browsers are supported, but are not compatible with old browsers. Be careful not to directly modify the original data to maintain immutability when using it.
Chrome's structuredClone() function is actually a very practical gadget that many people haven't noticed yet. It can help you copy an object deeply, and it is more reliable than JSON.parse(JSON.stringify()), such as supporting data types such as Map, Set, and Date.
Under what circumstances should I use structuredClone?
This function is best used for deep copying , especially when the objects you need to copy contain complex structures.
- For example, if you have an object with Date or ArrayBuffer, the JSON method will not be able to handle it.
- Or maybe you are writing a Web Worker and want to pass the data back but don't want to be affected by the main thread modification. At this time, it's just right to use structuredClone.
- It also supports circular references and does not explode the stack like recursively.
In short, as long as you don't plan to be compatible with too old browsers (currently supported by mainstream modern browsers), using it is much easier than writing deep copy by yourself.
How to use structuredClone()
The usage is very simple, just call it:
const clone = structuredClone(original);
For example:
const original = { name: 'Alice', data: [1, 2, 3] };
const copy = structuredClone(original);
copy.data.push(4);
console.log(original.data); // Output [1, 2, 3], indicating that the original object has not been changed toPay attention to a few points:
It cannot copy functions, undefined, and certain special objects (such as DOM elements).
If you pass in something with the "transfer" attribute, such as an ArrayBuffer, remember to add the transfer parameter:
const buffer = new ArrayBuffer(16); const clone = structuredClone({ buffer }, { transfer: [buffer] });In this way, the buffer in the original object will be transferred to the new object, and the buffer in the original object will become detached.
Frequently Asked Questions and Notes
Sometimes you will encounter some strange problems, such as:
- An error says that a certain value cannot be copied : that may be because you copied the function or undefined, which are not allowed.
- The data still changed after copying? : Maybe you didn't use structuredClone, but used other shallow copy methods.
- How about compatibility? : Now Chrome, Edge, Firefox, and Safari are all supported, but if you want to be compatible with IE or old mobile browsers, you have to take a detour.
In addition, if you use it to update the status in frameworks like Vue or React, be careful not to directly modify the original data and then assign values, otherwise it may destroy immutability.
Basically, that's not difficult to use, but it's really convenient to deal with complex data structures.
The above is the detailed content of How to use Chrome's built-in structuredClone() function. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to fix screen tearing when scrolling in Chrome
Jul 25, 2025 am 12:55 AM
The screen tear occurs when the Chrome browser scrolls, which is usually caused by the out-of-synchronization of rendering and refresh. The solutions are as follows: 1. Ensure that hardware acceleration is enabled, you can manually check the settings and restart the browser; 2. Forcefully enable Compositor and related options to optimize rendering; 3. Check the display refresh rate, use single-screen testing, and enable VSync or adaptive synchronization technology on supported devices; 4. Update the graphics card driver or replace the display interface such as using the DP interface. It is recommended to start the troubleshooting with simple steps and gradually adjust to find the best configuration.
How to fix Chrome when it's not printing correctly
Jul 26, 2025 am 02:46 AM
Chrome printing exceptions can be solved in the following ways: 1. Check the printer selection, paper size, orientation, zooming and background graphics settings in the print preview; 2. Try stealth mode to eliminate extended interference and clear cache; 3. Update or reinstall the printer driver, replace the general driver or use the "Print as PDF" method; 4. Finally, you can reset the Chrome settings to restore the default. Most problems can be solved through the first few steps. If they still fail, you can export PDF to print.
How to fix Chrome profile sync getting stuck in setup
Jul 25, 2025 am 01:10 AM
The problem of Chrome sync stuck can be solved through the following steps: 1. Check the network connection and Google account status to ensure normal access; 2. Log out and log in to the Chrome account again; 3. Clear the synchronized data and restart the browser; 4. Reset Chrome settings; 5. Try the traceless mode or new user profile. Sequentially checking can effectively restore the synchronization function.
How to fix Chrome opening new windows instead of tabs
Jul 26, 2025 am 01:29 AM
1. Check whether the shortcut attribute has additional parameters and delete it; 2. Clear cache and switch startup settings, or create new user information; 3. Extend the impact and disable the problem plug-in through traceless mode. Chrome pops up new windows instead of tabs usually due to exceptions in shortcut parameters, cache configuration conflicts, or third-party extension interference. Check and adjust the corresponding settings in turn to resolve.
Google Chrome password manager is not saving passwords
Aug 02, 2025 pm 01:47 PM
EnsureChrome’s“Offertosavepasswords”isenabledinSettings>Autofillandpasswords>PasswordManager.2.SignintoyourGoogleaccountandturnonSyncwithPasswordsincludedunderSyncandGoogleservices.3.Disableconflictingextensionslikethird-partypasswordmanagersor
Why is my Chrome profile corrupted and how to fix it
Jul 26, 2025 am 01:31 AM
Chrome profile corruption can be resolved by creating a new profile, repairing local profile folders, clearing caches, and disabling extensions. Chrome configuration files contain bookmarks, passwords, extensions and other data. Corruption is usually caused by crashes, update interrupts or extension conflicts, which are manifested as failure to load bookmarks, extension exceptions, or error prompts. Solutions include: 1. Create a new configuration file and migrate data; 2. Rename the local configuration folder to trigger reconstruction; 3. Clear cache and disable extensions one by one to troubleshoot problems. To prevent it from happening again, it is recommended to back up your bookmarks regularly and enable synchronization, while avoiding forcing the browser to close when starting or updating. If the problem persists, there may be system or hardware problems, but it is rare.
How to use Chrome's built-in ad blocker on abusive sites
Jul 27, 2025 am 12:31 AM
Google Chrome doesn't have a built-in traditional ad blocker, but it provides features to block intrusive and abusive ads. ① Pop-up windows and redirects can be blocked through content settings and BetterAdsStandards standards; ② Enable safe browsing to warn or block access to dangerous websites; ③ Clear site data and block third-party cookies to reduce tracking; ④ Chrome's native tools cannot completely block banner ads and video ads. If you need stronger functions, you need to install an extension.
How to find duplicate bookmarks in Chrome
Jul 27, 2025 am 12:59 AM
Chrome itself does not support automatic marking of duplicate bookmarks, but can be found and cleaned by the following methods: 1. Use the built-in bookmark manager to manually sort and view duplicate items, which is suitable for situations where there are fewer bookmarks; 2. Install extensions such as BookmarkDuplicateDetector, CleanMasterforBookmarks, etc. to automatically scan and delete duplicate bookmarks; 3. After exporting the bookmark as an HTML file, use a text editor or programming language to deduplicate it, which is suitable for users with a large number of bookmarks or technical foundations. It is recommended to back up the bookmark before operation to prevent mistaken deletion.
