Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve object copy in js, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Native deep cloning method JSON.parse / stringify

This is a cloning method that loses some data.

If you do not use Date,function,undefined,Infinity, regular expressions, Map collections, Set collections, Bolbs,FileLists,ImageDatas, sparse array sparse Arrays, typed array Typed? Arrays, or other complex types of objects, a very simple deeply cloned object method is:

JSON.parse (JSON.stringify (object))

The following is a demonstration example:

? The printed results are as follows

You can find that many data types are lost using JSON.parse (JSON.stringify (object)). So when using it, we need to know clearly the data type of the target object object. In general, this method is recommended for data object cloning if the only data we need to deal with is of the number,string,null type.

Use the library for deep cloning

Because cloning objects is not easy (complex types, circular references, functions, etc.), most major libraries provide the ability to clone objects. If the library you are already using already provides cloning, you can use it directly, and in most cases the cloning method is much better than what you have written yourself.

Lodash:_.cloneDeep method

Can be imported separately through the lodash.clonedeep module, and if you have not used a library that provides deep cloning, it may be your best choice

Example

AngularJS:angular.copy method (Deep?Copy)

Angular.copy (source,? [destination])

JQuery:jQuery.extend (true, {}, oldObject);?

Output result

JQuery has another one. Method of clone (), which only clones the DOM element. The first parameter is true, which represents a recursive deep copy. There will be no discussion here.

Shallow cloning of ES6

For completeness, note that ES6 provides two shallow replication mechanisms: Object.assign () and the extension operator.

Object.assign ()

MDN says:

? Object.assign () copies attribute values. If the property value of the source object sources is a reference to an object, it also points to that reference.

If the property value of the source object is a simple type (string, number), through Object.assign ({}, obj1), you will get a separate copy of this property value; if the property value is an object or other reference type, it will point to a reference to this object. This is where Object.assign () is particularly noteworthy.

These are all the contents of the article "how to copy objects in js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.