What are the deep and shallow copies of arrays and objects?

1. What is a deep copy and what is a shallow copy?

1. Deep copy
Deep copy means that when copying or cloning a data structure, all nested sub-objects are recursively copied to create a brand new independent copy. The copy after deep copy is completely independent from the original object, and modifications to the copy will not affect the original object.
Deep copy is to copy an object from the memory completely, and open up a new area from the heap memory to store the new object.
2. Shallow copy
Shallow copy refers to only copying the content of one layer of the data structure, but not copying the nested sub-objects. The shallow copied copy shares the same sub-objects as the original object, so modifications to shared sub-objects in the copy or the original object affect each other.
A shallow copy creates a new object that has an exact copy of the original object's property values. If the attribute is a basic type, the value of the basic type is copied, and if the attribute is a reference type, the memory address is copied.

2. What are the deep and shallow copies of arrays and objects?

Deep and shallow copies of arrays:

shallow copy:

Using the slice() method: const shallowCopy = originalArray.slice(0);
Using the concat() method: const shallowCopy = originalArray.concat();
Using the spread operator...: const shallowCopy = [...originalArray];
Using Array.from( ) method: const shallowCopy = Array.from(originalArray);

Deep copy:

Use the JSON.parse() and JSON.stringify() methods: const deepCopy = JSON.parse(JSON.stringify(originalArray));
Implement the deep copy yourself using a recursive method, traversing the original array and recursively copying nested subarrays or object.

Deep and shallow copies of objects:

shallow copy:

Using the Object.assign() method: const shallowCopy = Object.assign({},originalObject);
Using the spread operator...: const shallowCopy = { ...originalObject };

Deep copy:

Use the JSON.parse() and JSON.stringify() methods: const deepCopy = JSON.parse(JSON.stringify(originalObject));
Use a recursive method to implement the deep copy yourself, traversing the original object and recursively copying nested sub-objects or array.
Use third-party libraries (such as lodash's cloneDeep() method) to perform deep copy operations.

3. Examples

1. Assignment

//对象赋值
let obj1 = {
    
     name: '张三', action: {
    
     say: 'hi'}};
let obj2 = obj1;
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1) 
// obj1 { name: '李四', action: { say: 'hello'}}
console.log('obj2',obj2) 
// obj2 { name: '李四', action: { say: 'hello'}}

2. Shallow copy
Object.assign()Changing the new object will change the original data together

//对象赋值
//浅拷贝
let obj1 = {
    
     name: '张三', action: {
    
     say: 'hi'}};
let obj2 = Object.assign({
    
    }, obj1);
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1) 
// obj1 { name: '张三', action: { say: 'hello'}}
console.log('obj2',obj2) 
// obj2 { name: '李四', action: { say: 'hello'}}

Expand operator...The spread operator is an ES6 feature that provides a very convenient way to perform a shallow copy, which is the same functionality as Object.assign().

//浅拷贝
let obj1 = {
    
     name: '张三', action: {
    
     say: 'hi'}};
let obj2 = {
    
    ... obj1};
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1) 
// obj1 { name: '张三', action: { say: 'hello'}}
console.log('obj2',obj2) 
// obj2 { name: '李四', action: { say: 'hello'}}

Note: concat(), slice() also belong to shallow copy
3, deep copy
JSON.parse(JSON.stringify())

//深拷贝
let obj1 = {
    
     name: '张三', action: {
    
     say: 'hi'}};
let obj2 = JSON.parse(JSON.stringify(obj1));
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1) 
// obj1 { name: '张三', action: { say: 'hi'}}
console.log('obj2',obj2) 
// obj2 { name: '李四', action: { say: 'hello'}}

jQuery.extend()$.extend(deepCopy, target, object1, [objectN])//The first parameter is true, which is deep copy

//深拷贝
let obj1 = {
    
     name: '张三', action: {
    
     say: 'hi'}};
let obj2 = $.extend(true, {
    
    }, obj1);
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1) 
// obj1 { name: '张三', action: { say: 'hi'}}
console.log('obj2',obj2) 
// obj2 { name: '李四', action: { say: 'hello'}}