Shallow copy
When we want to copy a piece of data, we will use copy; copying data is divided into shallow copy and deep copy. Shallow copy refers to copying the top-level structure of the object or array. If there are reference type attributes in the object or array Value, copies the reference (address) rather than the value; while deep copy recursively copies the complete object or array, including nested sub-objects or sub-arrays, generating a brand new object, the new object and the reference address of the original object different.
Implementation in
JavaScript Different methods can be used to implement shallow copies of objects in JavaScript. Shallow copy only copies the first-level properties of the object and does not copy the properties inside the nested object. The following are several common shallow copy methods:
1. Spread Operator:
Use the spread operator... to create a shallow copy of an object:
const originalObj = { name: 'John', age: 30 };
const newObj = { ...originalObj };
newObj.name = 'Jane';
console.log(originalObj.name); // Output 'John', the original object is not affected
console.log(newObj.name); // Output 'Jane', the new object is modified
2. Object.assign() method:
The Object.assign() method can copy the properties of one or more objects to the target object, and can also be used to create a shallow copy of the object:
const originalObj = { name: 'John', age: 30 };
const newObj = Object.assign({}, originalObj);
newObj.name = 'Jane';
console.log(originalObj.name); // Output 'John', the original object is not affected
console.log(newObj.name); // Output 'Jane', the new object is modified.
These methods can be used to create objects. Shallow copy, but please note that if the object contains nested objects, these nested objects are still reference relationships, so modifying the nested objects will affect the original object. If you need a deep copy, that is, recursively copying the properties of an object and its nested objects, you need to use other methods, such as Lodash's _.cloneDeep() method.
Use the spread operator in vue.js to implement shallow copy
let searchForm = {…this.searchForm};
this.searchForm is an object. Through the expression {…this.searchForm}, a new object is created. The new object contains the same properties and property values of this.searchForm.
This operation actually creates a copy of the searchForm object, rather than assigning the original object directly to searchForm. This means that if you subsequently modify searchForm, it will not affect the original this.searchForm object because they are two different objects.
This operation is typically used to copy objects or arrays so that they can be modified without affecting the original data. This is a shallow copy, because it only copies the first-level properties of the object. If the object contains nested objects, the nested objects are still references, and modifying the nested objects will affect the original object.
Here is an example:
let originalObj = { name: 'John', age: 30 };
let newObj = { …originalObj };
newObj.name = 'Jane';
console.log(originalObj.name); // Output 'John', the original object is not affected
console.log(newObj.name); // Output 'Jane', the new object is modified.
This is a common situation in Vue.js A data processing method usually used to ensure that the original data is not directly modified when processing the data, so that undo or rollback operations can be performed if necessary.