“This is the first day of my participation in the August More Text Challenge. For details, see: August More Text Challenge.”

Write in front: this is actually equivalent to the previous JavaScript advanced supplement (modification)(increase), there are also some interview questions encountered in the previous interview, write down, with you to encourage.

It’s about my advanced supplement to JS

Shallow copy and deep copy

Simple type data is stored directly in the stack, through the assignment operation can be copied directly out of the value, but complex type data is stored in the heap, the stack only holds its address value (pointer) in the heap, hence the concept of shallow copy and deep copy.

Shallow copy concept

An object can copy attributes and methods of the first level through assignment or operation, but if the object has child objects, the child objects will not copy successfully, or reference the address value of the child object, still receive interference, this is called shallow copy

// Let arr1 = {name:"Ace"}; let arr2 = {name:"Bob"}; arr1 = arr2; Arr1 = object.assign (arr2); / / Object. The assign () function let arr3 = [arr1,... arr2] / / extension stringCopy the code

Deep copy concept

Each object and its children are deeply assigned by recursive traversal until there are no more children, or the whole object is first converted to string data of simple type, and then transferred back to object data of complex type.

Let arr1 = {name:"Ace"}; let arr2 = {name:"Bob"}; arr1 = Json.parse(Json.stringify(arr2)); Arr1 = deepClone(arR2) arR1 = deepClone(ARR2) arR2 = deepClone(ARR2) arR1 = deepClone(ARR2 deepClone (obj={}){ //1. If (typeof obj! == 'object' || obj == null{ return obj; } let result = null; //2. Determine whether the data is an object or data obj instanceof Array? result = [] : result = {}; For (let key in obj){if(obj. HasOwnProperty (key){result[key] = deepClone(obj[key]); }}}Copy the code

Event bubble, delegate, monitor, agent

The event bubbling

The events of the child element bubble up to the parent element up to the root element

StopPropagation ()

Event capture

Capture from the root element all the way down to the child element

Prevent the default event on preventDefault()

Event delegate (Event agent)

Registers child elements loaded asynchronously by giving the parent element event delegate

Event listeners

Get the Nodelist of an element and add event listeners to each child element by iterating.

Take the intersection of two arrays, the union and the difference

Take the union of arrays

Const Values = [...new Set([...arr1,...arr2])]; console.log(Values.join(''))Copy the code

Take the intersection of arrays

// Pass each item in arR1 to include. Return true if it exists. Otherwise, false to check whether the current item intersects Set(arr1)].filter(item => { if(arr2.includes(item)){ return item; } }) // const Values = [...new Set(arr1.filter(items => arr2.some(ele => ele === items)))] console.log(Values.join(''))Copy the code

Take the array difference set

// const Values = arr1.filter(items => ! arr2.some(ele => ele === items)) console.log(Values.join(''))Copy the code

Shake and throttling

Image stabilization

When an event is fired continuously, the event handler executes only once if the event is not fired again within a certain period of time

Function debounce(fn,delay){return function() {if(timer){clearTimeout(timer); Indicates that a timing process is underway and the same event has been fired. So want to cancel the current timing, start the clock timer = setTimeout (fn, delay)} else {timer = setTimeout (fn, delay) / / in the branch current is not in time, start a timer}}}Copy the code

The throttle

When an event is fired continuously, no matter how many times it is fired within a certain period of time, it is actually only executed once

function throttle(fn,delay){ let valid = true return function() { if(! Valid){return false} // During the rest time, execute the function and set the status bit to invalid valid = false setTimeout(() => {fn() Valid = true; }, delay) } }Copy the code

JS garbage collection mechanism

A memory leak

Memory leaks occur when variables or objects are defined that are never used, or when they are no longer needed but are not deleted

How to prevent memory leaks

  • Avoid unnecessary global variables, or objects with long life cycle, and garbage collect useless data in a timely manner

  • Pay attention to program logic, avoid “infinite loop” and so on;

  • Rule of Avoiding creating too many objects: Return things when you don’t use them

  • Use the timing function to periodically clean up

What is the garbage collection mechanism

It is a browser mechanism to constantly look for variables and data in the code that will not be used, and delete them to prevent browser memory leaks. The most common garbage collection method is flag cleanup

The working principle of

Is to mark the variable as “enter environment” when it enters the environment. When a variable leaves the environment, it is marked “out of the environment.” Those marked “out of the environment” reclaim memory, and when variables that hold the flag remain uncalled and unreferenced, the garbage collector removes them.

End