Js (deep and light copy)

Can you briefly describe the deep and light copy of JS?

Shallow copy just copies the address. Deep copy just copies the content. Shallow copy is just a simple pointer assignment that doesn’t affect the original deep copy pointer assignment and content copy does affect the original deep copy is to create a new stack of two objects with two different addresses

For strings, A shallow copy is A copy of A value. For objects, A shallow copy is A copy of the address of an object. For example, A and B, objects A=B change the property of A and B change the property of A relative to each other because AB points to the same address

Shallow copy

Method 1: Object.assign() es6

        / / array
        let arr = [1.2.3[10.20.30]].let newArr = Object.assign(arr);
        newArr[3] [0] = 100;
        console.log(arr);
        console.log(newArr);
        // [1, 2, 3, [100, 20, 30]]
        // [1, 2, 3, [100, 20, 30]]


        / / object
        let obj = { a: 1.b: 2.c: { m: 10.n: 20}}let newObj = Object.assign(obj); 
        newObj.c.m = 100;
        console.log(obj);
        console.log(newObj);
        // { a: 1, b: 2, c: { m: 100, n: 20 } }
        // { a: 1, b: 2, c: { m: 100, n: 20 } }   
Copy the code

Method 2: Extend the es6 operator to add method children

        / / array
        let arr = [1.2.3[10.20.30]].let newArr = [...arr];
        newArr[3] [0] = 100;
        console.log(arr);
        console.log(newArr);
        // [1, 2, 3, [100, 20, 30]]
        // [1, 2, 3, [100, 20, 30]]


        / / object
        let obj = { a: 1.b: 2.c: { m: 10.n: 20}}letnewObj = { ... obj }; newObj.c.m =100;
        console.log(obj);
        console.log(newObj);
        // { a: 1, b: 2, c: { m: 100, n: 20 } }
        // { a: 1, b: 2, c: { m: 100, n: 20 } }
Copy the code

Method 3: Traverse

        / / array
        let arr = [1.2.3[10.20.30]].let newArr = [];
        arr.forEach((item) = > {
        newArr.push(item);
        })
        newArr[3] [0] = 100;
        console.log(arr);
        console.log(newArr);
        // [1, 2, 3, [100, 20, 30]]
        // [1, 2, 3, [100, 20, 30]]

        / / object
        let obj = { a: 1.b: 2.c: { m: 10.n: 20}}let newObj = {};
        for(let key in obj){
        newObj[key] = obj[key];
        }
        newObj.c.m = 100;
        console.log(obj);
        console.log(newObj);
        // { a: 1, b: 2, c: { m: 100, n: 20 } }
        // { a: 1, b: 2, c: { m: 100, n: 20 } }   
Copy the code

Deep copy

Parse () + json.stringify ()

        let arr = [1.2.3[10.20.30]].let newArr = JSON.parse(JSON.stringify(arr));
        newArr[3] [0] = 100;
        console.log(arr);
        console.log(newArr);
        // [1, 2, 3, [10, 20, 30]]
        // [1, 2, 3, [100, 20, 30]]
Copy the code

Method 2:…

        var a= [1.2]
        var b =[...a] 
        b[0] =100
        console.log(a) / / [1, 2]
        console.log(b) / / [100, 2]
Copy the code

Method 3: Loop

        var a =  [1.2]
        var a1 = []
        a.forEach(function(item,index){
          a1.push(item)
        })
        a[0] = 100
        console.log(a1) / / [1, 2]
        console.log(a) / / [100, 2]
Copy the code

Turn the STR arr

      var a = [{a:1}]
      var obj= JSON.stringify(a)/ / arr STR
      console.log(obj)     // [{"a":1}] // Black is STR
Copy the code

Write a deep copy function for the interview question

function deepClone(obj) {
  function isObject(para) {
    return (typeof para === "object" || typeof para === "function") && para ! = =null;
  }

  if(! isObject(obj)) {return obj;
  }
  let cloneObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if(obj.hasOwnProperty(key)) { cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]; }}return cloneObj;                       
}
let arr = [1.2.3[10.20.30]].let newArr = deepClone(arr);
newArr[3] [0] = 100;
console.log(arr);
console.log(newArr);
// [1, 2, 3, [10, 20, 30]]
// [1, 2, 3, [100, 20, 30]]

let obj = { a: 1.b: 2.c: { m: 10.n: 20}}let newObj = deepClone(obj);
newObj.c.m = 100;
console.log(obj);
console.log(newObj);
// { a: 1, b: 2, c: { m: 10, n: 20 } }
// { a: 1, b: 2, c: { m: 100, n: 20 } }
Copy the code