12 copy array JS tips

Array copying is often misunderstood, but not because of the copying process itself, but because of a lack of understanding of how JS handles arrays and their elements. Arrays in JS are mutable, which means that you can modify the contents of an array after creating it. This means that to copy an array, we can’t simply assign the old array to a new variable, which is also an array. If you do, they will share the same reference, and after changing one variable, the other variable will be affected by the change. That’s why we need to clone this array. Let’s take a look at some methods and tricks for copying arrays of clones.

Method 1 – Use the array. slice method

 <script type="text/javascript">
        const number = [1.2.3.4.5];
        
        const newNumber = number.slice();
        
        newNumber.push(6);// Adding a new item does not change the array
        
        console.log(number);/ / [1, 2, 3, 4, 5]
        
        console.log(newNumber);/ / [6]
    </script>
Copy the code

Method 2 – Use the array.map method

 <script type="text/javascript">
        const number = [1.2.3.4.5];
        
        // Map has a return value, and the declared variable receives the return value
        const newNumber = number.map(num= > num);
        
        newNumber.push(6);// Adding a new item does not change the array
        
        console.log(number);/ / [1, 2, 3, 4, 5]
        
        console.log(newNumber);/ / [6]
    </script>

Copy the code

Method 3 – Use the array. from method

<script type="text/javascript">
        const number = [1.2.3.4.5];
        
        /* array.from (): Converts an array-like object or traversable object into a real Array. New Set is like an Array, but cannot have duplicate values */
        const newNumber = Array.from(new Set(number));
        
        newNumber.push(6);// Adding a new item does not change the array
        
        console.log(number);/ / [1, 2, 3, 4, 5]
        
        console.log(newNumber);/ / [6]
    </script>
Copy the code

Note: this method cannot be used with duplicate entries in the original array, which will be de-duplicated

Method 4 – Using the extension operator (…)

 <script type="text/javascript">
        const number = [1.2.3.4.5];
        
        const newNumber = [...number];
        
        newNumber.push(6);// Adding a new item does not change the array
        
        console.log(number);/ / [1, 2, 3, 4, 5]
        
        console.log(newNumber);/ / [6]
    </script>

Copy the code

Method 5 – Uses the array. of method and extension operator

<script type="text/javascript">
        const number = [1.2.3.4.5];
        // array.of () : converts a set of values into an Array
        const newNumber =Array.of (... number); newNumber.push(6);// Adding a new item does not change the array
        console.log(number);/ / [1, 2, 3, 4, 5]
        console.log(newNumber);/ / [6]
    </script>

Copy the code

Note: The array.of () method creates a new instance of an Array with a variable number of arguments, regardless of the number or type of arguments. The difference between array.of () and Array constructors is that they handle integer arguments: array.of (7) creates an Array with a single element of 7, while Array(7) creates an empty Array of length 7 (note: This is an array with seven empty Spaces, not seven undefined ones.

        Array.of(7)/ / [7]
        Array.of(1.2.3)/ / [1, 2, 3]

        new Array(7)// The array length is 7
        new Array(1.2.3)/ / [1, 2, 3]

Copy the code

Method 6 – Uses the Array constructor and extension operator

    <script type="text/javascript">

        const arr = [1.2.3.4.5];
        
        const newArr = new Array(... arr); newArr.push(6);
        
        console.log(arr);/ / [1, 2, 3, 4, 5]
        
        console.log(newArr);/ / [6]

    </script>

Copy the code

Method 7 – Use the array. concat method

    <script type="text/javascript">
        const arr = [1.2.3.4.5];
        
        const newArr = arr.concat();The concat() method is used to join two or more arrays
        
        newArr.push(6);
        
        console.log(arr);/ / [1, 2, 3, 4, 5]
        
        console.log(newArr);/ / [6]
    </script>

Copy the code

Method 8 – Use forEach method and push method

<script type="text/javascript">
        let arr = [1.2.2.4.7];
        let newArr = []
        arr.forEach((item) = > newArr.push(item))
        newArr.push(6)
        console.log(arr);/ /,2,2,4,7 [1]
        console.log(newArr);/ /,2,2,4,7,6 [1]
    </script>

Copy the code

Method 9 – Use the for loop

<script type="text/javascript">
        let arr = [1.2.2.4.7];
        let newArr = []
        for (let i = 0; i < arr.length; i++) {
            newArr.push(arr[i])
        }
        newArr.push(6)
        console.log(arr);/ /,2,2,4,7 [1]
        console.log(newArr);/ /,2,2,4,7,6 [1]
    </script>

Copy the code

Method 10- Uses the array. push method and extension operator

 <script type="text/javascript">
        let arr = [1.2.2.4.7];

        letnewArr = [] newArr.push(... arr); newArr.push(8);
        
        console.log(arr);/ /,2,2,4,7 [1]
        
        console.log(newArr);/ /,2,2,4,7,8 [1]
    </script>
Copy the code

Method 11 – Uses the array. unshift method and the expansion operator

 <script type="text/javascript">
        let arr = [1.2.2.4.7];

        letnewArr = [] newArr.unshift(... arr); newArr.push(8);
        
        console.log(arr);/ /,2,2,4,7 [1]
        
        console.log(newArr);/ /,2,2,4,7,8 [1]
    </script>
Copy the code

Method 12 – Uses the deconstruction and extension operators

  <script type="text/javascript">
  
        const arr = [1.2.3.4.5];
        
        const [...newArr] = arr
        
        newArr.push(6);
        
        console.log(arr);/ / [1, 2, 3, 4, 5]
        
        console.log(newArr);/ / [6]
    </script>

Copy the code

In summary, note that these methods perform a shallow copy, that is, when an array is an object, changing the value of one object changes the value of another