The focus of the shallow copy and deep copy questions I think is on the depth of understanding of base and reference types

Throw out problem

  • When we
var a = 1; var b = a; Var b = 2; var b = 2; // Finally b is 2 and A is 1Copy the code
  • if
Var a1 = new Array(1,2,3); var a2 = a1; Var a2[0] = 4; // a2[0] = 4; The a1 [0] = 4;Copy the code

That is, we don’t copy the values inside a1, we just share them. The main difference here is a and A1, one being a base type and the other a reference type. Here recommended links, the bosses, very good understand: blog.csdn.net/jiang770103…

So the problem comes out, a2 is empty at the beginning, how do we take a1’s stuff, copy it to A2, and A2 wants to change something, it doesn’t affect A1, equivalent to we modify a document, and save the modification as a document. We call this method copying

copy

Shallow copy

  • As such
var a1 = { 'id':'01', 'name':'aaa' } var a2 = {}; For (let key in a1){a2[key] = a1[key]; // copy a1 to a2} a2.id = '02'; // change the id in a2 to 02 console.log(a1); console.log(a2);Copy the code
  • We a2 got A1 and changed the ID to 2 without affecting A1

  • If a1 has a sex property, then the sex property is also an object, that is, the property of object A1 is an object, can also be implemented as desired?
Var a1 = {' id ':' 01 ', 'name' : 'aaa', 'sex' : new Array (' man ', 'woman') / / sex here is also an object} var a2 = {}; for (let key in a1){ a2[key] = a1[key]; } a2.sex[0]= '1111'; // Change the first property of sex to console.log(a1); console.log(a2);Copy the code

  • The answer is no

Deep copy

To describe a shallow copy in front of a deep copy, it can only be said that the shallow copy is not deep enough, the copy level is still in the first layer, that is, the object layer A1

  • That’s how I describe reference types

Reference type, at the time of copying, we are equivalent to another open up memory, take the above example, explain why not! When the id name sex in A1 is stored, an address is generated, which is given to A1. When we copy it, we actually copy the same thing, but the object name is changed and the address is different. A2 can also get the id name sex under the address at will. But sex is also an object. In a1, sex also has the address of man woman, but we did not copy it to sex when we copied it to A1, that is to say, we stopped copying the address of sex under A2, so that the address of sex under A2 is still the address of sex under A1. So we need to copy sex objects into A2 as well

practice

  • First consider whether the property inside the object is an object, if so ->
  • leta2[key][i] = a1[key][i], deep copy.

Simple implementation first

var a1 = { 'id':'01', 'name':'aaa', 'sex': new Array('man','woman') } var a2 = {}; for (let key in a1){ if( typeof a1[key] == 'object'){ a2[key] = []; For (let I in a1[key]){a2[key][I] = a1[key][I]}}else{a2[key] = a1[key]; for(let I in a1[key]){a2[key][I] = a1[key]; } } a2.sex[0] = '1111'; console.log(a1); console.log(a2);Copy the code

  • What about nesting two levels? And that’s where recursion comes in

A recursive

var a1 = { 'id':'01', 'name':'aaa', 'sex': new Array('man','woman'), 'class':{ 'classname':{ 'classid':'111', 'classnum':'222' } } } function kaobei(a1) { var a2 = {}; for (let key in a1){ if( typeof a1[key] == 'object'){ // a2[key] = []; A2 [key] = kaobei(a1[key])}else{a2[key] = a1[key]; } } return a2 } // a2.sex[0] = '1111'; let a3 = kaobei(a1); a3.class.classname.classnum = '333' console.log(a1); console.log(a3);Copy the code

Have a BUG

The method has been roughly implemented, have you found any small bugs?

  1. An infinite loop occurs when two objects refer to each other (circular references)
  2. Special treatment is required for data and RegExp types
  3. What about attributes and Symbol types that are not enumerable for traversal objects?

Weakmap. This bug is not small, it used the set and get methods, solve the circular reference, getOwnPropertyDescriptors designated Object is used to return all its attributes (not inherit property) a description of the Object Object. Create inherited prototype chain, The front two tell the truth I is the first time to see, in the final analysis or the book read less!

const obj = { a: 1, b: 2, c: { aa: 1, bb: "2", cc: true, dd: [1, 1, 3, 4, 5], ee: { c4: 3 }, }, d: [1, 2, 3, 4, 5], e: [{ a1: 1 }, { b2: 2 }, { c3: 3 }], }; obj.f = obj; const clone = (c) => { const isObject = (o) => { if (o === null || o === undefined) return o; else return Object.prototype.toString.call(o).slice(8, -1); }; WeakMap< object, Boolean > let map = new WeakMap(); // WeakMap is used to save the object that has been copied. const dp = (object) => { let result; If (isObject(object) == "object ") result = {}; else if (isObject(object) == "Array") result = []; // Base type simply returns else Return object; for (const key in object) { const keyType = isObject(object[key]); const copy = object[key]; If (map.get(copy)){// If this object has already been copied, Return copy} else if (keyType == "Object") {map.set(copy, true) result[key] = dp(copy); } else if (keyType == "Array") { result[key] = dp(copy); } else { result[key] = copy; } } return result; }; const res = dp(c) return res }; let obj1 = obj; console.log(clone(obj1));Copy the code

Here recommend a link to learn WeakMap: blog.csdn.net/Ed7zgeE9X/a…

conclusion

I am also the first time to learn the depth of the copy, there are many places are not learning essence, but gave me a deep lesson, I also feel can slowly improve their thinking ability, in writing nuggets article, can let yourself learn more thoroughly, what to know, what has been mastered. Cheer yourself up, come on! In the article solid, steady, fast growth!