Analysis of the latest JS interview questions

For a web front-end, you will definitely encounter some JS interview questions during the interview. Today I will summarize some of the latest JS interview questions for you. Each question is impressive

Pre-parsing: In the current scope, before js is run, the var and function keywords will be declared in advance, but will not be assigned (personal opinion)

I am impressed by the pre-parsing, not because it is difficult , but be careful. If you are a little careless, you may write the wrong answer! I encountered more than one pre-analysis question, and I can still remember two of them. Let me tell you!

2-1. Pre-analysis 1

alert(a)
a();
var a=3;function a(){
    alert(10)
}   
alert(a)
a=6;
a();

------------Separating line---------------- --

alert(a)
a();
var a=3;
var a=function(){
    alert(10)
}   
alert(a)
a=6;
a();

When I saw this code, I answered wrongly. Later, I asked a friend for advice, and then I understood it myself, and it was straightened out!
There are actually two test points. The first is that the variable is declared in advance, and the second is that the function is declared before the variable is declared!
Let me briefly analyze it below,
The first part of the operation results:
1. Function declaration takes precedence over variable declaration, so at the beginning, a is function a(){alert(10)}, you will see to this function.
2.a(), when the function is executed, alert(10) appears
3. Var a=3 is executed; so alert(a) displays 3
4. Since a is not a function, So when executing a(), an error will be reported.
The second part of the operation results:
1.underfind
2. Error report
As mentioned before, pre-parsing is a pre-declaration with the var and function keywords, but no value assignment. So at first it was underfind, and then an error was reported because when a() was executed, a was not a function.

//Function expression is the same as variable declaration

var a=function(){
    alert(10)
}

//Function declaration is better than variable declaration

function a(){
    alert(10)
}

2-2. Pre-parsing and scope

var a=0;function aa(){
    alert(a)
    a=3
}

//The result is that nothing happens, because alert(0) is executed only when the aa function is executed

------ ------Separating line 1------------------

var a=0;function aa(){
    alert(a)
    var a=3
}
aa();

//underfind In the aa function, there is var a=3, then in the aa scope, the variable a is declared in advance, but it will not be assigned a value, so it is underfind

------------Separating line 2-- ----------------

var a=0;function aa(a){
    alert(a)
    var a=3
}
aa(5)
alert(a)

//5,0 In the function body, the priority of parameter a is higher than that of variable a

------------Separating line 3------------------

var a=0;function aa(a){
alert(a)
a=3
}
aa(5)
alert(a)
//5,0 In the function body, execute alert (a) and a=3, what is modified is not the global variable a, but the parameter a

------------Separating line 4--------- ---------

var a=0;function aa(a){
    alert(a)
    var a=3
    alert(a)
}
aa(5)

//5,3
//I also don’t understand this a little bit. Please ask the explanation on the Internet. There are two answers (small If you know how to understand, please give us some advice in the comments)
//1. Parameter priority is higher than variable declaration, so the declaration of variable a is actually ignored, which is equivalent to
//var a=0 ;
//function aa(a){
// var a=5;
// alert(a)
// a=3
// alert(a)
//}
//aa(5)

//2. Formal parameters and local variables have the same priority, which is equivalent to
//var a=0;
/ /function aa(a){
// var a; First declare
// a=5 Since the formal parameters and variable names are the same, they are covered!
// alert(a)
// a=3
// alert(a)
//}
//aa(5)

--- ----------Separation line 5------------------

var a=0;function aa(a){
    alert(a)
    a=3
    alert(a)
}
aa()
alert(a)
//underfind  3  0

//First, parameter priority Higher than the global variable. Since no parameters are passed, it is underfind
//a=3. In fact, the value of the formal parameter a when modified is not the global variable a. Going down alert(a) is also the formal parameter a##. #//The last alert(a), you know it

3. Loop and recursion

3-1. Fibonacci array

This is not To say more, it is very simple, but very classic. That is, the current item is equal to the sum of the previous two items

var arr=[];for(var i=0;i<10;i++ ){
    i<=1?arr.push(1):arr.push(arr[i-1]+arr[i-2]);
}
console.log(arr)

3-2. Data arrangement

For example, 123454321 23456765432

How to do this? At that time, my approach was written in two steps, showing the front first, and then showing the back.
The code is

//01234543210
//先展示前面的   01234
//n：开始的数字    m:结束的数字function num1(n,m){    for(var i=n;i<m;i++){
        //再展示后面的 543210
        console.log(i);        if(i===m-1){
            num2(n,m)
        }
    }
}function num2(n,m){    for(var i=m;i>=n;i--){
        console.log(i)
    }
}
num1(2,5)  //2345432

, which is too much code. Later, I studied this

function num(n,m){
    console.log(n);    if(n<m){
        num(n+1,m);
        console.log(n);
    }
}
num(2,5)  //2345432

and the explanation is as follows

1. First execute num(2,5), which is

console.log(2); ->  num(3,5);  ->  console.log(2);      
//执行num(3,5);  就是是相当于   console.log(3); -> num(4,5); -> console.log(3); 下面以此类推
console.log(2); -> console.log(3); -> num(4,5); -> console.log(3); ->  console.log(2);

, then

console.log(2); -> console.log(3); -> console.log(4); -> num(5,5); -> console.log(4); -> console.log(3); ->  console.log(2);

, and finally

console.log(2); -> console.log(3); -> console.log(4); -> console.log(5); -> console.log(4); -> console.log(3); ->  console.log(2);

Believe it or not After reading these cases, you have mastered the methods. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to create a butterfly flying animation with CSS3

How to use canvas to achieve it The interaction between the ball and the mouse

How to use canvas to create the effect of particle fountain animation

The above is the detailed content of Analysis of the latest JS interview questions. For more information, please follow other related articles on the PHP Chinese website!