Their roots

Javascript data types:

  • Value types, basic data types: String, Number, Boolean, Null, and Undefined, Symbol

  • Reference data type data

  • Object,Array,Function,Date…

    Undefined and Null;

  • Undefined indicates that a variable has no value.

  • Null: A variable can be emptied by setting its value to NULL;

    { var person, car="moto"; console.log(person); //undefined; console.log(car); // moto; car=null; console.log(car); // null }Copy the code

The heap and stack

What is heap memory && what is stack memory?

  • Heap: a dynamically allocated memory space of uncertain size and not automatically released;
  • Stack: Automatically allocated memory space, which is automatically released by the system.

Why heap memory and stack memory design

  • Related to the garbage collection mechanism, in order to make the program run with the minimum memory;

    • Stack memory: Basic data type storage and reclamation mechanism

      • As a method executes, each method creates its own stack, and variables defined in the method are placed in the stack memory in turn. As the execution of the method completes, the memory stack for the method is automatically destroyed. So that’s what we call basic data type variables are usually in stack memory;

    • Heap memory: Reference data type storage and recycling mechanisms

      • When we create an object in a program, the object is stored in the runtime data area, known as heap memory, for reuse. Objects in heap memory are not destroyed at the end of a method. Even after the method is executed, the object may be referenced by another reference variable. For example, if an object is passed as a parameter, the object will not be destroyed. Only when an object is not referenced by any variables will the garbage collection mechanism perform memory reclamation at the appropriate time. That’s what we call reference data type variables are usually in heap memory;

Reference value &&

  • The variables and values of the value data type are stored in the stack memory. After the variable is declared, a memory area is dynamically allocated. Assignment between basic data types: the value stored in the stack memory is directly passed to the variable; (by value)
  • Variables of reference type are stored in stack memory, but values are stored in heap memory; What the stack actually holds is a reference to an address in the heap. A reference type directly assigns, essentially assigning a “reference” to a variable (address) so that it points to the same value in heap memory;

Deep copy and shallow copy

  • Usage Scenarios:
    • Deep copy: in complex objects, the properties of the object are also objects;
    • Shallow copy: Copies only one layer of objects. When the attribute of an object is a reference type, the reference is copied. When the reference value changes, the value of the original object property changes as well.

Shallow copy

Assign a reference to the original object/array directly to the new object/array. The new object/array is Just a reference to the original object, Just show the code:

Example 1: let obj={a:1,arr:[2,3]}; let shallowObj=shallowCopy(obj); function shallowCopy(srcObj){ var dest={}; for(let prop in srcObj){ console.log(prop); if(srcObj.hasOwnProperty(prop)){ dest[prop]=srcObj[prop] } }// end of loop return dest; } // 1. Example: When the reference value of one object property changes, it causes another to change; shallowObj.arr[1]=5; console.log(obj.arr[1]); // 5 // 2. For example: console: let obj2=obj; obj2 {a: 1, arr: Array(2)} obj2.arr (2) [2, 3] obj2.arr[1]=4 4 obj2.arr (2) [2, 4] obj.arr (2) [2, 4]Copy the code

Deep copy:

We’re going to create a new object and array, and we’re going to copy in the values of the properties of the original object, not the references, and we want to change the new array without changing the original array.

1. Only layer 1 deep copy is used

1. Direct traversal:

var array = [1, 2, 3, 4];
function copy (array) {
   let newArray = []
   for(let item of array) {
      newArray.push(item);
   }
   return  newArray;
}
var copyArray = copy(array);
copyArray[0] = 100;
console.log(array); // [1, 2, 3, 4]
console.log(copyArray); // [100, 2, 3, 4]
Copy the code

2.slice(); arrObj.slice(start,end);

The slice() method returns a new array composed of snippet elements from an existing array

var array = [1, 2, 3, 4];
var copyArray = array.slice();
copyArray[0] = 100;
console.log(array); // [1, 2, 3, 4]
console.log(copyArray); // [100, 2, 3, 4]
Copy the code

3.concat(); arrObj.concat(arr1,arr2…) ;

var array = [1, 2, 3, 4];
var copyArray = array.concat();
copyArray[0] = 100;
console.log(array); // [1, 2, 3, 4]
Copy the code

Var copyArray = array.concat(); Var copyArray = array.concat([]);

That is, merge the returned array with an empty array

4. The Object ES6. Assign ();

Object.assign: Merge objects. Copy all the enumerable attributes of the source Object to the target Object and return the merged target object. assign(target, source1, source2).

Var obj = {name: 'createjob ', job:' createjob '} var copyObj = object.assign ({}, obj); Copyobj.name = 'My name is not Penghu Bay! Hum (. ` ´, omega) '; console.log(obj); / / {name: "peng's bay," job: "students"} the console. The log (copyObj); // {name: "My name is not Peng Hu wan! Hum (. · 'ω´ ·)", job: "student "}Copy the code

So copyObj = Object. Asssign ({}, obj); Copy the first level property of obj from the code to {} and return it to copyObj;

5 ES6 Extended operators:

Extended operators (…) Retrieves all traversable properties of the parameter object and copies them to the current object

var copyObj=[...arr] function copy(obj){ if(typeof obj ! ==="object"){ return ; } let newObj= obj.constructor===Array? [] : {}; if(newObj instanceof Array){ newObj=[...obj]; return newObj; }else if(newObj instanceof Object){ newObj={... obj}; return newObj; }}Copy the code

Multilevel deep copy;

1. Deep copy is implemented recursively

function deepCopy(obj){ if(obj instanceof Array){ let n=[]; for(let i=0; i<obj.length; i++){ n[i]=deepCopy(obj[i]); }// end of for return n; }// end of if ; if(obj instanceof Object){ let n={}; for(let i in obj){ n[i]=deepCopy(obj[i]); }// end of for return n; } else { //// end of if return obj; }}Copy the code

2.JSON.parse(JSON.stringify(strObj));

	var arrObj=[
		{num:1},
		{num:2},
		{num:3}
	];
	var copyArray=JSON.parse(JSON.stringify(arrObj));
	
	copyArray[2].num=4;

    console.log(arrObj); // [{num:1},{num:2},{num:3}];
	console.log(copyArray); // [{num:1},{num:2{num:4}];
Copy the code

3. Recursion 2:

function copy(obj){ let newObj=obj.constructor===Array? [] : {}; if(type of obj ! ="object"){ return; } for(let i in obj){ newObj[i]= typeof obj[i]==="object"? copy(obj[i]):obj[i] } return newObj; }Copy the code