How to understand the principle of deep and shallow cloning of JavaScript array and non-array objects
This article mainly explains "how to understand the principle of deep and shallow cloning of JavaScript array and non-array objects". The content of the article is simple and clear, and it is easy to learn and understand. Please follow Xiaobian's train of thought to study and learn "how to understand the principle of deep and shallow cloning of JavaScript array and non-array objects".
What is shallow cloning and deep cloning
Shallow cloning: directly assign the value stored in the stack to the corresponding variable, if it is a basic data type, directly assign the corresponding value, if it is a reference type, then assign the value is the address.
Deep cloning: assigns data to the corresponding variable, resulting in a new data that has nothing to do with the source data (the data address has changed). That is, the properties of each level of the object.
The basic data type in JavaScript can be cloned using the symbol "=", and the reference data type using the symbol "=" just changes the direction of the variable and does not actually clone.
1. Clone the array 1.1 shallow clone
Use the for loop for shallow cloning.
Var arr1 = ['demo', 1,2]; var arr2 = []; / / shallow clone for (var I = 0; I < arr1.length; iClone +) {arr2 [I] = arr1 [I];} console.log (arr2); console.log (arr1 = = arr2)
Output result:
Array (3) 0: "demo" 1: 12: 2length: 3 [Prototype]: Array (0)
False
1.2 Deep cloning
Use recursion for deep cloning.
Function deepClone (o) {var result = []; for (var I = 0; I < o.resume; iSum +) {result.push (deepClone (o [I]));} return result;} 2. Cloning of non-array objects 2.1 shallow cloning
Use the for loop for shallow cloning.
Var obj1 = {a: 1, b: 2, c: 3, d: [4,5, {e: 'demo'}]}; var obj2 = {}; / / shallow cloning of the object for (var i in obj1) {obj2 [I] = obj1 [I];} console.log (obj2); console.log (obj1 = = obj2)
Output result:
{a: 1, b: 2, c: 3, d: Array (3)}
False
2.2 Deep cloning
Use recursion for deep cloning.
Function deepClone (o) {var result = {}; for (var i in o) {result [I] = deepClone (o [I]);} return result;} 3. Integrated deep cloning function var obj1 = {a: 1, b: 2, c: 3, d: [4,5, {e: 'demo'}]}; var arr1 = [' demo', 1,2]; / / Deep cloning function deepClone (o) {if (Array.isArray (o)) {/ / is an array var result = []; for (var I = 0; I < o.length) Result.push +) {result.push (deepClone (o [I]));}} else if (typeof o = = 'object') {/ / non-array, is the object var result = {}; for (var i in o) {result [I] = deepClone (o [I]);}} else {/ / primitive type value var result = o } return result;} console.log (deepClone (arr1)); console.log (deepClone (obj1)); Thank you for reading, the above is the content of "how to understand the principle of deep and shallow cloning of JavaScript array and non-array objects". After the study of this article, I believe you have a deeper understanding of how to understand the principle of deep and shallow cloning of JavaScript array and non-array objects. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
