2018-01-06 deep copy and shallow copy of javascript

Keywords: JSON Javascript


  • Deep copy

    • What is replication?

      • Simple variable replication, small memory, we can directly copy without reference.
      • First, deep copy and shallow copy are only for complex objects such as object and array. In short, shallow copy copies only one layer of an object's properties, while deep copy recursively copies all levels.
    • Here is a simple shallow copy

      • Shallow copy only copies the attributes of the object in turn, but not recursively. javascript stores the object as a village address. Shallow copy points obj.arr and shallowObj.arr to the same memory address
      var obj = { a:1, arr: [2,3] };
      var shallowObj = shallowCopy(obj);
      function shallowCopy(src) {
        var dst = {};
        for (var prop in src) {
          if (src.hasOwnProperty(prop)) {
            dst[prop] = src[prop];
        return dst;
      • When we test it, we find out
      shallowObj.arr[1] = 5;
      obj.arr[1]   // = 5
    • Here is an example of deep replication

      • The principle of deep replication is mentioned above. Let's look at the code directly.
      var obj = { a:1, arr: [1,2] };
      var obj2 = deepCopy(obj);
    • Let's discuss some common methods of deep and shallow replication

      • ES6 uses two replication methods without reference

        • array2 = Array.form(array1)
        • array2 = [...array1];
      • Basic js arrays and json replication

        • array2 = array1.slice(0)
        • array2 = array1.concat()
        //Circular replication
        for(var i = 0;i < arr1.length; i++){
            arr2[i] = arr1[i];
        //json data
        for(var name in json1){
            json2[name] = json1[name];
      • Several methods of shallow copy

        var json1 = {"a":"panda","arr1":[1,2,3]}
        function copy(obj1) {
            var obj2 = {};
            for (var i in obj1) {
              obj2[i] = obj1[i];
            return obj2;
        var json2 = copy(json1);
        alert(json1.arr1);  //1234
        alert(json2.arr1)  //1234
      • Several methods of deep replication

        //Simple and rough deep replication
        //Disadvantage: cannot copy function
        //The prototype chain is gone, the object is the object, and the class it belongs to is gone.
        function jsonClone(obj) {
            return JSON.parse(JSON.stringify(obj));
        var clone = jsonClone({ a:1 });
        var json1={"name":"panda","age":18,"arr1":[1,2,3,4,5],"string":'afasfsafa',"arr2":[1,2,3,4,5],"arr3":[{"name1":"panda"},{"job":"Front end development"}]};
        var json2={};
        function copy(obj1,obj2){
          var obj2=obj2||{}; //Initially, give it an initial value = itself or a json
          for(var name in obj1){
            if(typeof obj1[name] === "object"){ //First, judge whether obj[name] is an object
              obj2[name]= (obj1[name].constructor===Array)?[]:{}; //Let's make the name item of the object to be copied = array or json
              copy(obj1[name],obj2[name]); //And then we can call the function infinitely and recursively
              obj2[name]=obj1[name];  //If it is not an object, it can be directly equal to and no reference will occur.
          return obj2; //And then return the copied object
        alert(json1.arr1);  //123456
        alert(json2.arr1);  //12345


Deep analysis of JavaScript deep replication

Copy, shallow copy (shallow copy) and deep copy (deep copy) of objects in js

javascript you don't know (I)

Posted by kcorless on Fri, 01 May 2020 08:28:23 -0700