How to use JS deep and shallow copy in practical projects

This time I will bring you how to use JS deep and shallow copy in practical projects, and what are the precautions for how to use JS deep and shallow copy in practical projects. The following is a practical case, let’s take a look.

The examples in this article describe the concepts and usage of JavaScript deep copy and shallow copy. Share it with everyone for your reference, the details are as follows: Shallow copy and deep copy in

js are only for copying complex data types (Objcet, Array) . To put it simply, both shallow copy and deep copy can achieve the function of regenerating a copy based on the original object. However, depending on whether the newly generated object can affect the original object, it can be divided into shallow copy and deep copy.

Concept 1: Shallow copy

Shallow copy refers to copying references. The newly generated reference and the original reference both point to instances of the same object and are mutually exclusive. operations will affect each other.

Concept 2: Deep copy

Re-open the memory in the heap and copy all the contents of the object instance corresponding to the original reference, thus ensuring the deep copy The object is completely isolated from the original object, and they have no influence on each other.

Concept 3: Implementation of array deep copy

1. Use for loop

<script type="text/javascript">
  var arr1=['a','b','c'];
  var arr2=[];
  function deepCopy(arr1,arr2){
    for(var i=0;i<arr1.length;i++){
      arr2[i]=arr1[i];
    }
  }
  deepCopy(arr1,arr2);
  arr2[1]=&#39;d&#39;;
  console.log(arr1);//[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;]
  console.log(arr2);//[&#39;a&#39;,&#39;d&#39;,&#39;c&#39;]
</script>

2. Use slice()method

<script type="text/javascript">
  var arr1=['a','b','c'];
  var arr2=arr1.slice(0);
  arr2[1]='d';
  console.log(arr1);//['a','b','c']
  console.log(arr2);//['a','d','c']
</script>

3. Use concatmethod

<script type="text/javascript">
    var arr1=['a','b','c'];
    var arr2=arr1.concat();
    arr2[1]='d';
    console.log(arr1);//['a','b','c']
    console.log(arr2);//['a','d','c']
</script>

Concept 4: deep copy of object

1. Use forloop

<script type="text/javascript">
  var obj = {
    name: 'FungLeo',
    sex: 'man',
    old: '18'
  }
  function copyObj(obj) {
    let res = {}
    for (var key in obj) {
      res[key] = obj[key]
    }
    return res
  }
  var obj2 = copyObj(obj);
  obj2["name"]="kka";
</script>

2. Use JSON to implement

<script type="text/javascript">
  var obj = {
    name: 'FungLeo',
    sex: 'man',
    old: '18'
  }
  var obj2=JSON.parse(JSON.stringif(obj));
  obj2["name"]="kka";
</script>

I believe you have mastered the method after reading the case in this article, and more How exciting, please pay attention to other related articles on php Chinese website!

Recommended reading:

vue scaffolding and vue-cli installation

immediate use of watch in the vue project

The above is the detailed content of How to use JS deep and shallow copy in practical projects. For more information, please follow other related articles on the PHP Chinese website!