First time to write notes in nuggets, if there are mistakes, please also point out ha! Write bad place, but also please forgive!
Js is divided into basic data types and reference data types.
Basic data type: Number String Boolean Symbol undefined NULL, stored in the heap, dynamically allocated memory, size does not automatically free.
Reference data type: Object, store address in stack, automatically allocate memory space. Address (0xFFFF) -> The contents of the heap.
Shallow copy: For basic data types, the changes do not affect each other. For reference data types, changes to the first level before and after copying do not affect the data type, but changes to the deeper level do, because variables before and after copying refer to the same memory space.
Deep copy: For multiple layers of reference data types, deep copy creates a new memory space to store values, so variables before and after the copy are modified do not affect each other.
Common shallow copy methods:
Object.assign()
- Expansion operator (…)
- Do it yourself via JS
Common deep-copy methods:
- Recursive traversal, one value one value copy (this article mainly introduces the implementation of recursive method)
- Json.stringfy () & json.parse (), function and undefined are not available
lodash
- JQuery
$.extend([deep], target, object1 [, objectN ])
Method by the first argument istrue
orfalse
To specify depth copy
Ok, let’s get down to business:
@param {object} value Value of a variable */function checkType(value) {
returnObject.prototype.toString.call(value).slice(8, -1); } /** * deep copy (recursive) * @param {*}sourceValue Indicates the Value to be copied */function deepClone(sourceValue) {// If the data passed is of a simple type (not {} & []), just return itif (typeof sourceValue ! = ="object") {
return sourceValue; } // Determine the data type of the passed argument (object or array)let targetType = checkType(sourceValue); // Create the variable type {} or [] to initially store the result according to the data type of the passed parameter.let result = targetType === "Object"? {} : []; / / traversesourceValue (for... In can iterate over data and objects) // Avoid arrays with custom attributes, iterate over groups of numbers using for... Of, traversing the object for... inif (targetType === "Array") {// Use for... Of traversal, of course, you can also use other traversal methods of arraysfor (const [key, value] of sourceValue.entries()) {
letitemType = checkType(item); // If value is an array or object, continue traversingif (itemType === "Object" || itemType === "Array") {
result[key] = deepClone(value);
} else{// If value is a basic data type or function, result[key] = value; }}}else{// When an argument is passed in as an objectfor (const key in sourceValue) {// hasOwnProperty can only check the properties of the object itself, not the inherited properties, nor the properties of the prototype chainif (sourceValue.hasOwnProperty(key)) {
const item = sourceValue[key];
letitemType = checkType(item); // If value is an array or object, continue traversingif (itemType === "Object" || itemType === "Array") {
result[key] = deepClone(item);
} else{// If value is a basic datatype or function, result[key] = item; }}}} // Return resultreturn result;
}
Copy the code
That’s it for the first time!! Although knowledge is simple and little poor!!