Shulou(Shulou.com)06/01 Report--

This article shares with you the content of the sample analysis of deep and shallow copies in js. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Deep and shallow copy of js

The deep and shallow copy of JavaScript has always been difficult, and if the interviewer asked me to make a deep copy now, I might only be able to write a basic version. So before I wrote this, I read the blog posts written by all the big guys in my favorites. For details, you can take a look at the link I posted below, which is only a simple summary here.

Shallow copy: creates a new object that has an exact copy of the original object property value. If the attribute is a base type, the value of the base type is copied, and if the property is a reference type, the copy is the memory address, so if one object changes this address, it will affect the other object.

Deep copy: a complete copy of an object from memory, opening up a new area from the heap memory to store the new object, and modifying the new object will not affect the original object.

The implementation of shallow copy:

The Object.assign () method is used to copy the values of all enumerable properties from one or more source objects to the target object. It returns the target object.

* * Array.prototype.slice (): * * the slice () method returns a new array object, which is a shallow copy of the original array determined by begin and end (excluding end). The original array will not be changed.

Extension operator.:

Let a = {name: "Jake", flag: {title: "better day by day", time: "2020-05-31"}} let b = {... a}

How to implement deep copy:

Beggar version: JSON.parse (JSON.stringify (object)), with many disadvantages (ignore undefined, symbol, function; cannot solve circular reference; cannot handle regular, new Date ())

Basic version (enough for interview): shallow copy + recursion (only ordinary object and array data types are considered)

Function cloneDeep (target,map = new WeakMap ()) {if (typeOf taret = 'object') {let cloneTarget = Array.isArray (target)? []: {}; if (map.get (target)) {return target;} map.set (target, cloneTarget); for (const key in target) {cloneTarget [key] = cloneDeep (target [key], map) } return cloneTarget} else {return target}}

The ultimate version:

Const mapTag ='[object Map]'; const setTag ='[object Set]'; const arrayTag ='[object Array]'; const objectTag ='[object Object]'; const argsTag ='[object Arguments]'; const boolTag ='[object Boolean]'; const dateTag ='[object Date]'; const numberTag ='[object Number]'; const stringTag ='[object String]'; const symbolTag ='[object Symbol]'; const errorTag ='[object Error]'; const regexpTag ='[object RegExp]'; const funcTag ='[object Function]'' Const deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag]; function forEach (array, iteratee) {let index =-1; const length = array.length; while (+ + index)

< length) { iteratee(array[index], index); } return array;}function isObject(target) { const type = typeof target; return target !== null && (type === 'object' || type === 'function');}function getType(target) { return Object.prototype.toString.call(target);}function getInit(target) { const Ctor = target.constructor; return new Ctor();}function cloneSymbol(targe) { return Object(Symbol.prototype.valueOf.call(targe));}function cloneReg(targe) { const reFlags = /\w*$/; const result = new targe.constructor(targe.source, reFlags.exec(targe)); result.lastIndex = targe.lastIndex; return result;}function cloneFunction(func) { const bodyReg = /(? { cloneTarget.set(key, clone(value, map)); }); return cloneTarget; } // 克隆对象和数组 const keys = type === arrayTag ? undefined : Object.keys(target); forEach(keys || target, (value, key) =>

{if (keys) {key = value;} cloneTarget [key] = clone (target [key], map);}); return cloneTarget;} module.exports = {clone}; Thank you for reading! This is the end of this article on "sample Analysis of Deep and shallow copies in js". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.