shallow ( quote ) Copy : Share the same memory address , If you change the value, I will change

For example, commonly used Object assignment operation

Deep copy : Deep copy is Create a new memory address Save the value ( They don't influence each other )

For example, the following

const shallBasicCopy = obj => {
JSON.parse(JSON.stringify(obj))
}
 
* advantage : The only objects that can be handled correctly are Number、String、Array And so on can be json Data structure represented by
* shortcoming : This function cannot be json The type represented will not be handled correctly

About object.assign The stem ( Deep object 、 Shallow copy )

Some people say deep copy , Some people say shallow copy , No one is wrong or right ( In certain circumstances )

 // Deep copy 
let srcObj = {
'name': 'lilei',
'age': '20'
}; let copyObj2 = Object.assign({}, srcObj, {
'age': '21'
}); copyObj2.age = '23'; console.log('srcObj', srcObj); //{ name: 'lilei', age: '22' } // Shallow copy
srcObj = {
'name': ' bright ',
grade: {
'chi': '50',
'eng': '50'
}
};
copyObj2 = Object.assign({}, srcObj);
copyObj2.name = ' red ';
copyObj2.grade.chi = '60';
console.log(' new objec srcObj', srcObj); // { name: ' bright ', grade: { chi: '60', eng: '50' } }

The stem is right here :

As can be seen from the example , Change the size of the copied object name and grade.chi , Of the source object name There is no change , however grade.chi But it's changed . So we can see Object.assign() It's just the property values that are copied , If the property value of the source object is a reference to the object , It only copies that reference value . 
in other words , about Object.assign() for , If the property value of an object is a simple type (string, number), adopt Object.assign({},srcObj); The new object is ‘ Deep copy ’; If the property value is an object or other reference type , That's actually a shallow copy for this object . This is a Object.assign() Especially noteworthy . 
Many say ,Object.assign({}, src1, src2);  about scr1 and src2 The same properties are directly overridden , If the property value is an object , It doesn't merge attributes between objects Of

Deep copies of objects can take advantage of third parties :underscore Realization

The shallowness of the array 、 So is deep copy !

Details can be found in MDN, Reproduced in :https://segmentfault.com/a/1190000014107100

js - object.assign And shallow 、 Deep copy of more related articles

  1. Object.assign()

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign explain Ob ...

  2. Object.assign() Use

    One .Object.assign() Copy of object 1 Object.assign() Method to copy the values of all enumerable properties from one or more source objects to the target object . It will return the target object . 2 Object.assign(ta ...

  3. Use shallow / Deep copy 、 and HTML5 The solution js Object reference problem

    Let's start with an example Patients with a : var a=[1,2,3]; var b=a; b.push(4); alert(b);//1,2,3,4 alert(a);//1,2,3,4 var a=[1,2,3]; ...

  4. 【JS】307- review Object.assign Principle and its realization

    Click on the above " Front end self study " Focus on , Learn ~ }let b = {    name: "muyiy",    book: {        title: " ...

  5. JS Object Deep Copy & Deep copy

    JS Object Deep Copy & Deep copy For deep copy , Other methods are required JSON.parse(JSON.stringify(obj));, because Object.assign() Copy ...

  6. JS Object Deep Copy & Deep copy & Shallow copy

    JS Object Deep Copy & Deep copy & Shallow copy https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refe ...

  7. Talking about JS Shallow copy and deep copy in

    Front end engineers should be familiar with the concepts of shallow copy and deep copy , In the process of daily business code , Especially when it comes to data processing , Those who do often come across , For example, how to do without modifying the original object , Regenerate as like as two peas , To make use of , Or is it , How to skillfully transport ...

  8. Talking about Object.assign()

    Object.assign() Method to copy the values of all enumerable properties from one or more source objects to the target object . Return value is the target object . 1 Object.assign yes ES6 Newly added interface , The main purpose is to merge multiple Ja ...

  9. js Deep freezing And Shallow freezing Object.freeze

    1. Deep freezing <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...

Random recommendation

  1. Python actual combat : scanning key integrity

    Previously in the international version , Need to support Chinese and English switching function , In so many source files, you need to find the key Is whether the language resource package corresponds to . Just use what I learned before python, I wrote a tool , Support custom replacement label , Batch processing source files . Now it seems , effect ...

  2. XPath summary ( turn )

    XPath brief introduction XPath yes W3C A standard of . Its main purpose is to XML1.0 or XML1.1 The design of the location node in the document node tree . There are XPath1.0 and XPath2.0 Two versions . among Xpath1.0 yes 199 ...

  3. sharepoint 2013 The document library The resource manager opens and reports an error There was a problem opening this location in file explorer , Add this site to the list of trusted sites , And then try again .

    We are using sharepoint 2013 When you need to create a new document library or resource library , Often need to use “ Explorer ” To manage documents , But sometimes , Click on “ Use explorer to open ”, The following error will be prompted : When opening this location in file explorer ...

  4. linux When moving or copying files to cover the same folder , Every file in the folder will prompt whether to overlay

    Link address :http://blog.chinaunix.net/uid-23683795-id-2391087.html # vi ~/.bashrc   If you see the following , The following commands will be executed with aliases , ...

  5. CAD Turn on slow problem solving

    open AutoCAD It is very stuck is very , Probably need 1 minute open Internet Explorer, Click on the tools menu , open "Internet Options ", Check the box " Check if the publisher's certificate is revoked ", ...

  6. Web Import and export directly SHP/CAD Realize the discussion .

    1. Import SHP/CAD file WEB It has direct and beautiful display function , It's better not to go beyond 3S, Then it is necessary to limit the size of the import file and optimize the algorithm . 1.1.SHP Import implementation ideas SHP Open source format ,Git You can find it anywhere on the Internet ...

  7. One computer has two JDK

    cause : Because I think my computer is too messy , I reformatted it last semester . Download the jdk Also for the latest 10 edition , Last time I bought jsp I also encountered this problem when I was working on my virtual host , From the other side jdk Only 7 Version of , I am a 10 Version of , So I played ...

  8. maven Runtime configuration and command details

      The above is the specific port to run the program , You can also specify it first , Write directly on the top jettty:run           Of course , If you are running on the console and have maven, You can go directly into the project file :mvn jetty:r ...

  9. DjangoUeditor Using 7niu cloud storage

    DjangoUeditor It's a pretty good django Rich text editor , You can https://github.com/zhangfisher/DjangoUeditor Check out the information . I've been thinking about D ...

  10. CVPR 2015 papers

    CVPR2015 Papers Shock struck ! CVPR 2015 The article is available for download , If the link cannot be downloaded , Can be in Google By searching paper Name Download ( Friendship tips : have access to filetype:pdf command ). Go ...