Copying has a major premise, is the operation of an object, when you want to copy an object, there is a shallow copy and a deep copy. Both shallow copy and deep copy are for reference types in JS. Shallow copy only copies references of objects. If the copied objects change, the original objects will also change. Only a deep copy is a true copy of an object.
Shallow copy implementation (shallow copy means that only references are copied, not the actual values)
1.Object.assign() copies property values. If the attribute value of the source object is a reference to the object, it copies only that reference value. You can copy any number of the source object’s own enumerable properties to the target object and then return the target object.
2…. Expansion operator
let obj1 = {name:"Kobe",address:{x:100,y:100}} let obj2 = {... obj1} obj1.address.x=200; obj1.name="wade"; console.log(obj2) //{name:"Kobe",address:{x:200,y:100}} // ... The implementation is a deep copy of the first layer of the object, followed by only copied reference valuesCopy the code3. Concat () This method can concatenate two or more arrays, but instead of modifying an existing array, it returns a new one
Let arr = [1,3,{username:"Kobe"}]; let arr2 = arr.concat(); arr2[2].username = 'wade'; console.log(arr); / / [1, 3, {username: "wade"};Copy the codeSlice simply makes a deep copy of the first layer of the array
Let arr = [1,3,{username:'kobe'}]; let arr2 = arr.slice(); arr2[2].username = 'wade'; The console. The log (arr) / / [1, 3, {the username: 'wade'}]Copy the codeConcat and slice are two methods that make copies of arrays. Both methods do not modify the array, but return a modified array.
Deep copy implementation (A deep copy is a full copy of the target, unlike a shallow copy where only one reference layer is copied, even the values are copied)
1. JSON.parse(JSON.stringify())
Json. stringify converts a JavaScript value to a JSON string.
Json. parse converts a JSON string to a JavaScript value or object.
You can handle deep copies of arrays and objects, but you can’t handle functions and regees, which are no longer regees/functions based on these two functions
Disadvantages:
1. Undefined is ignored
2. Will ignore symbol
3. Functions cannot be serialized
4. Cannot resolve objects referenced by loop
2. If the object you are copying contains built-in objects, but does not contain functions, you can use ‘messagechannel’ to copy objects referenced by undefined and loop
function structuralClone(obj) { return new Promise(resolve => { const { port1, port2 } = new MessageChannel() port2.onmessage = ev => resolve(ev.data) port1.postMessage(obj) }) } var obj = { a: 1, b: { c: 2}} obj.b.d = obj.b const test = async () => {const clone = await structuralClone(obj) console.log(clone) } test()Copy the code3. Recursion (the idea of recursion is very simple, that is, for each layer of data to implement a create object -> object assignment operation)
function deepClone(source){ const targetObj = source.constructor === Array ? [] : {}; For (let keys in source){if(source.hasownProperty (keys)){if(source[keys] && typeof Source [keys] === 'object'){constructor === Array? [] : {}; targetObj[keys] = deepClone(source[keys]); }else{// If not, set targetObj[keys] = source[keys]; } } } return targetObj; } // display const originObj = {name:'axuebin', sayHello:function(){console.log('Hello World'); } } console.log(originObj); // {name: "axuebin", sayHello: ƒ} const cloneObj = originObj; console.log(cloneObj); // {name: "axuebin", sayHello: ƒ}Copy the codeConclusion:
1. The assignment operator = implements a shallow copy, copying only the reference value of the object;
2. The original copy method of arrays and objects in Javascript is “shallow first-layer copy”;
3. Json.stringify () implements deep copy, but has requirements for the target object
4. Deep copy is recursive.