In fact, there can't be because of the dynamic nature of JavaScript functions and inner object state. Deep cloning a JSON structure with functions inside requires you recreate those functions and their inner context. And JavaScript simply doesn't have a standardized way of doing that. The correct way to do this, once again, is via a convenience method that you declare and reuse within your code.
The convenience method can be endowed with some understanding of your own objects so you can make sure to properly recreate the graph within the new object.
This is the right idea. The author David Walsh has commented out the cloning of generalized functions. This is something you might choose to do, depending on your use case. The main idea is that you need to special handle the instantiation of your functions or prototypal classes, so to speak on a per-type basis. Here, he's provided a few examples for RegExp and Date. Is this efficient? Given that the goal is to produce a true deep-copy clone, then you're going to have to walk the members of the source object graph.
With this approach, you can tweak exactly which child members to treat and how to manually handle custom types. I have bench-marked the code and you can test the results here :. This isn't generally the most efficient solution, but it does what I need. Simple test cases below For the people who want to use the JSON. I disagree with the answer with the greatest votes here. Here is a comprehensive clone method that can clone any JavaScript object.
It handles almost all the cases:. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. What is the most efficient way to deep clone an object in JavaScript? Ask Question.
Asked 13 years, 1 month ago. Active 1 month ago. Viewed 2. Eval is not evil. Using eval poorly is. If you are afraid of its side effects you are using it wrong.
The side effects you fear are the reasons to use it. Did any one by the way actually answer your question? Cloning objects is a tricky business, especially with custom objects of arbitrary collections. Which probably why there is no out-of-the box way to do it. Just having eval in your code can lead to worse performance. For example: JSON. Active Oldest Votes. Native deep cloning It's called "structured cloning", works experimentally in Node 11 and later, and hopefully will land in browsers.
Fast cloning with data loss - JSON. Improve this answer. Gabriel Hautclocq this is because A. But when a property containing an object value is copied, it is copied by-reference, not by-value. Also, keep in mind that an Array is an object in JS. Unicornist Yes and that's why Object. The title "ES6" is misleading, at least it should be changed to reflect that this is not a deep cloning method.
The "shallow" word is easy to overlook and a lot of people just take the simplest solution they find in Stack Overflow without reading everything. It is dangerous to rely on Object. Hence my remark. In Samantha's example using the following,. The target object is not referenced by any variable at that point, but because Object.
We could switch our example up and use the following:. Obviously, the value of beef in our food object is wrong, so we can assign the correct value of beef using Object. We aren't actually using the returned value of the function at all, but we are modifying our target object which we have referenced with the const food.
Spread on the other hand is an operator which copies properties of one object into a new object. If we wanted to replicate the above example using spread to modify our variable food So we can either choose to declare a new variable to hold our new object in, like the following:.
Thanks: d9el. Objects are Reference Types 1. Using Spread 2. Using Object. Inheritance in JavaScript - Part 1 of 3. JavaScript functions in a nutshell. Data types in Javascript explained. What is linting? What is recursion? Made with by mariokandut. Close to accept or learn more.
More articles: javascript node. Shallow Copy Deep Copy: Copying by value would result in two unrelated objects with same value. Shallow Copy: Copying by reference means that you have two objects that point to the same data in memory. The function drinkBeer will not be copied and new Date will be copied as a string. Newsletter Signup Never miss an article. No spam. The documentation clearly states the following:. When used in conjunction with one of the insertion methods,.
Knowing this, it would be wise to limit the amount of deep traversal expected of. This issue is completely unrelated to jQuery, as illustrated here where I've swapped out your code with host API code and the perceived performance issue still exists.
Lastly, I was able to identify another "work around" to this issue that would lead us to believe that the issue also lies in appending the new nodes, take a look and you'll see that moving the destination element out of the form also improves the performance drastically. So, again, as long as you're appending those select inputs to a form element, it'll be slow. But as Rick suggested, you can append the inputs to an element outside the form, and use JS to serialize and submit them.
Then you could conceivably use event listeners to make the hidden inputs mirror the values of the selects. The hidden inputs will be submitted with the form, while the selects just function as a user interface. Another option would be to have the dropdowns in the markup to begin with which I suspect the browser would render fast , but having them be disabled and hidden.
Then use javascript to unhide and enable the dropdowns when needed. I don't know if this will cause a slowdown too, but since new elements aren't being appended, it should be faster. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow. Learn more.
0コメント