2021 CEC written examination summary

Recently, rookies have come up with a way for Dachang to blog , That's when you do questions , Write the doubts on paper , Although it will slow down the speed of doing questions , But it's hard to value , This time, I will write about the problems encountered in several large factories ！

One 、CEC written examination

1、 to Array Add a prototype method to the local object , Used to delete duplicate entries in array entries （ Maybe more than one ）, The return value is a new array of duplicate entries that have been deleted

Array.prototype.deleteItem = function(){
    
    //  A new array containing duplicate entries that have been deleted 
    var arr1 = new Array();
    // this.length Get array length ,this Point to by Array Create a new Array object 
    for(var i = 0 ; i < this.length ; i++){
    
        for(var j = i+1 ; j <= (this.length - i) ; j++){
    
            //  Double loop finds equal value 
            if (this[i] ==this[j]) {
    
                arr1.push(this[i]);
            }
        }
    }
    return arr1;
};

This is before rookies learn to encapsulate linked lists , It really feels a little difficult , But now it feels very simple ！

The advice for readers is ： If you don't know what is Add a prototype method , I won't do this problem at all ！ At that time, the rookie just didn't know , So it's hard , I don't know where to start ！

2、 How to understand js Of Event Loop, And try the code to illustrate setTimeout and Promise The difference of

Event Loop It means Event cycle mechanism ！

I、 Why would there be Event Loop？

because Javascript The beginning of the design is A single threaded language , Only one thing can be done at a time . And this single threaded feature , Related to its use , As a browser scripting language ,JavaScript Its main purpose is to interact with users , And operation DOM. This determines that it can only be a single thread , Otherwise, it will bring complicated synchronization problems . such as ： Assume JavaScript There are two threads at the same time , A thread in a DOM Add content on node , Another thread deleted this node , Which thread should the browser follow ？

To take advantage of multiple cores CPU Computing power ,HTML5 Put forward Web Worker standard ( Rookie didn't learn ) , allow JavaScript The script creates multiple threads , But the child thread is completely controlled by the main thread , And do not operate DOM. therefore , This The new standard has not changed JavaScript The nature of single threads .

Single thread means , All tasks are queued , The previous task is over , Will perform the latter task . If the previous task took a long time , The latter task had to wait ,eg：

var i, t = Date.now()
for (i = 0; i < 100000000; i++) {
    }
console.log(Date.now() - t) // 238

Like above , If it's because it's computationally heavy ,CPU Hands are full , Also calculate .

however , If it's a network request, it's not appropriate . Because when a resource requested by a network is returned is unpredictable , It's not wise to wait in line in this situation , In order to realize that the main thread is not blocked / wait for ,Event Loop Such a plan came into being .

Note that there Not a cycle, but an event cycle , The real meaning is —— Different Web API Registered asynchronous tasks They will enter their corresponding The callback queue ( fifo ) in , then wait for Event Loop In turn, they are pushed into the execution stack for execution . So the event cycle can be understood as ： The browser calls some method in a loop , Judge whether there are unfinished events in the asynchronous task queue , If there is one, move it to the execution stack ！

Pictured ：

Asynchronous tasks are involved here ！

II、setTimeout and Promise What's the difference? ？

The novice here doesn't know very well , Only know One is a macro task, and the other is a micro task , But the specific difference , And how to use code to explain their differences is not very clear , I have asked questions on Zhihu ！

Zhihu link ：http://www.zhihu.com/question/492206921

There is no good answer for the time being , Only what the rookie said , Readers can see ！

III、 Macro task 、 Micro task

The macro task is from node Or browser initiated , And micro tasks are from js Engine initiated .

1. Macro task ： Include The overall code script（ It can be understood as ： Outer synchronization code / The main thread ),setTimeout,setInterval、I/O、UI Interactive events 、setImmediate(Node.js Environmental Science );
2. Micro task ：Promise Of .then Method （ Be careful new Primes() The code inside is the main thread code, not the micro task ）、MutaionObserver、process.nextTick(Node.js Environmental Science )

Secondly, the execution order is ： The main thread （ Equivalent to the original macro task ）> Micro task > Macro task .

notes ：

new Promise The code in will execute immediately ,then The function is distributed to the micro task queue ,process.nextTick Distribute to micro task queue Event Queue

The event loop , Macro task , The relationship between micro tasks is shown in the figure ：

Code

console.log('1 The main thread ');				// whole script Enter the main thread as the first macro task 
setTimeout(function() {
    				//setTimeout, Its callback function is distributed to the macro task Event Queue（ Enforcement rules ： Sort from top to bottom , First in first out ） in 
    console.log('2 Macro task ');
    process.nextTick(function() {
    
        console.log('3 Micro tasks in macro tasks ');
    })
    new Promise(function(resolve) {
    
        console.log('4 Micro task ');
        resolve();
    }).then(function() {
    
        console.log('5 Micro task ')
    })
})
process.nextTick(function() {
    	//process.nextTick() Its callback function is distributed to the micro task Event Queue in 
    console.log('6 Micro task ');
})
new Promise(function(resolve) {
    		//Promise,new Promise Direct execution , Output 7
    console.log('7 Micro task ');
    resolve();
}).then(function() {
    
    console.log('8 Micro task ')			//then To be distributed to micro tasks Event Queue in , be ranked at process.nextTick Behind the micro task .
})
setTimeout(function() {
    			//setTimeout, Its callback function is distributed to the macro task Event Queue in , In front setTimeout Back 
    console.log('9 Macro task ');
    process.nextTick(function() {
    
        console.log('10 Micro tasks in macro tasks ');
    })
    new Promise(function(resolve) {
    
        console.log('11 Micro task ');
        resolve();
    }).then(function() {
    
        console.log('12 Micro task ')
    })
})

The result of sequential execution is ： 1 The main thread —7 Micro task —6 Micro task —8 Micro task —2 Macro task —4 Micro task —3 Micro tasks in macro tasks —5 Micro task —9 Macro task —11 Micro task —10 Micro tasks in macro tasks —12 Micro task

3、 What is hybrid application （Hybrid APP）, With native Native Advantages and disadvantages of application compared with it

This is a concept question , Of course , Rookies really didn't know what hybrid applications were at that time , And the feeling of a rookie ios and Android Isn't it original ？ So it's hard , Here's the direct answer .