What is the difference between javascript deep copy and shallow copy

In JavaScript, a shallow copy only copies the memory address of the original data, which is equivalent to two data pointers pointing to the same address. If any one data element changes, it will affect the other; while the two data elements of the deep copy The data points to different addresses, and changes to any one element will not affect the other.

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What is the difference between deep copy and shallow copy in javascript

Before exploring shallow copy and deep copy, let’s first understand the concepts of heap and stack

Both heap and stack It is an area divided into memory for storage. The stack is automatically allocated memory space, which is automatically released by the system; the heap is dynamically allocated memory, and its size is variable and will not be automatically released.

Let’s look at basic data types & reference data types (also known as complex data types)

1. Basic types: String, Number, Boolean, null, undefined, Symbol (new in ES6, represents a unique value); basic type values ​​occupy a fixed size in memory and are stored in stack memory.

2. Reference types: Object, Array, Date, Function, etc.; the value of the reference type is an object and is stored in the heap memory.

The concept of deep and shallow copy

Note: The difference between deep and shallow copy only applies to complex objects such as Array and Object.

1. Shallow copy: It only copies the memory address of the original data, which is equivalent to two data pointers pointing to the same address. Changes in any one of the data elements will affect the other.

2. Deep copy: The two data point to different addresses, and the data elements will not affect each other when they change.

Example study

1. Shallow copy

var arr = [0, 1, 2];
var arrB;
 
//把arr赋值给arrB
arrB = arr;
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

Operating results: arr array elements change with changes in arrB array elements

2. Deep copy ( Only do first-level deep copy)

Note: When using deep copy, you must clarify the requirements for deep copy, whether to deep copy only the first-level object attributes or array elements, or recursively Copy object properties and array elements at all levels?

Deep copy array

①. Direct traversal

var arr = [1, 2, 3, 4];
function copy(arr){
    var newArr = [];
    for(var i=0;i<arr.length;i++){
        newArr.push(arr[i]);
    }
    return newArr;
}
 
var arrB = copy(arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

Running result: The change of arrB array element does not affect the value of arr array element

②.concat (): used to connect two or more arrays. This method does not modify the existing array, it simply returns a copy of the concatenated array.

var arr = [0, 1, 2];
var arrB;
 
//把arr赋值给arrB
arrB = arr.concat();
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

Run result: The elements of the arr array have not changed with the changes of the elements of the arrB array

③. slice(): This method returns a fragment of elements intercepted from the existing array to form a new array (the original array is not changed).

var arr = [0, 1, 2, 4, 5];
var arrB;
 
//把arr赋值给arrB
arrB = arr.slice();
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 10;
arr[4] = 8;
console.log("arr:", arr);
console.log("arrB:", arrB);

Run result: Changes in the elements in the array will not affect each other

The above three methods are only for simple arrays where the array elements are basic data types. For first-level array elements, they are objects. Or for arrays of reference type variables such as arrays, the above methods will fail.

Related recommendations: javascript learning tutorial

The above is the detailed content of What is the difference between javascript deep copy and shallow copy. For more information, please follow other related articles on the PHP Chinese website!