preface

This section introduces deep and shallow copying of arrays. First, we will review the data types

The data type

  1. Basic data types:number string boolean null undefined
  • Storage: Basic data types are stored in stack memory and variables are stored as values
  1. Reference data types: function array objects
  • Storage: Reference data types are stored in heap memory and variables are stored in address \

As for the storage mode, let’s analyze it:

Stack memory: The space of memory that the engine works on when executing code. In addition to the engine, it is also used to hold the addresses of base values and reference type values. Heap memory: Used to hold an unordered set of unique reference type values, which can be retrieved using key names in the stack. Let’s look again:

   var a = 2;
        var b = a;
        b++;/ / 3
        console.log(a); / / 2
Copy the code

Analyze, assign the value of A to B, then change the value of B, A value is not affected. But referencing data types, that’s not the case, it’s the address.

   var arr = [1.2.3];var arr2 = arr ;
        arr2.push(4);console.log(arr);   // The ARR has changed
Copy the code

If you change the structure of this room, both ARR and ARR2 will be affected. The following figure

After understanding the above, move on to the main points

Deep replication and shallow replication

  • Shallow copy of array: only addresses are copied (shared addresses)
  • Var arr2 = []; var arr2 = []; Slice () intercepts all the values in the array, resulting in a new array. The idea is to create a new space in the heap.

Shallow copy of array:

Only addresses are copied (shared addresses)

   var arr = [1.2.3.4.5];// A shallow copy of the array -- just copy the address
        var arr2 = arr ;
    // Change one of the arrays, both arrays change,
Copy the code

Again, it’s pretty easy to understand shallow copy.

Deep copy of array:

Copy the values in the array

  1. Define a new empty array, iterate over the original array and assign to the new array
 var arr = [1.2.3.4.5]
        var arr3 = [];
        arr.forEach(function(v) {
            arr3.push(v)
        })
        console.log(arr3);
        arr3.push('a');
        console.log(arr, arr3);/ / arr [1, 2, 3, 4, 5], arr3 [1, 2, 3, 4, 5, 'a']
Copy the code

Changing the value in the new array does not change the original array

  1. Slice () intercepts all the values in the array, resulting in a new array

        var arr3 = arr.slice() ;
        console.log(arr3);
        arr3.push('a');console.log(arr3);/ / [1, 2, 3, 4, 5, 'a']
        console.log(arr);/ / [1, 2, 3, 4, 5]
Copy the code

Changing the value in the new array does not change the original array

Here’s a word:

Basic data types are passed values, reference data types are passed addresses (parameters and arguments share addresses)

Difficult points, multi-dimensional array deep copy, the above mentioned are one-dimensional array deep copy and shallow copy

Arr =[[1,2,3],[1,2,3,4]]. The variables I, j represent the j+1 element of the I element (that is, array).

 var arr = [
            [1.2.3],
            [4.5.6],
            [2.3.4]]for (var i in arr) {
            for (var j in arr[i]) {
                console.log(arr[i][j]); }}Copy the code

Multidimensional arrays: Arrays of three dimensions or more

Deep copy of multidimensional arrays

A deep copy of a multidimensional array is not as easy to determine as a one-dimensional array, because you can’t tell if the elements in an array are arrays, and arrays are endless, haha, so you need to use the recursion mentioned earlier. Array.isarray (arr[I]);

Check whether the elements of the multidimensional array are arrays. If yes, continue to traverse the array. If not, you can use the one-dimensional array to determine the deep copy.

<script>
        var arr = [1.2.3.4[5.6[7.8]]];

        var arr2 = arr.slice();
        function deepArr(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                // newarr.push (arr[I]) This arr[I] may also be an array
                if (Array.isArray(arr[i])) {
                    // Continue iterating through the array and still get an array
                    var list = deepArr(arr[i]);
                    // Put the array into newArr
                    newArr.push(list)
                } else{ newArr.push(arr[i]); }}return newArr
        }
        var res = deepArr(arr);
        res[4].push('a');
        console.log(res);/ / change
        console.log(arr);/ / no change
    </script>
Copy the code