最新的JS面試題解析

對於一個web前端來說，面試的時候一定也會遇到一些JS的面試題，今天給大家總結歸納一些最新的JS面試題，每道題都讓人印象深刻

#預解析：在目前作用域下，js運行之前，會把帶有var和function關鍵字的事先聲明，但不會賦值（個人見解）

對預解析印象深刻，並不是因為難，而是要細心，稍微一粗心，答案就寫錯了！我遇到預解析的題目不只一道，有兩道我現在還能記住，我說下！

2-1.預解析1

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

------------分割線---------------- --

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

看到這個程式碼，當時答錯了。後來請教了朋友，然後自己再理解下，就理順了！
考點其實就兩個，第一變數宣告提前，第二函數宣告優先於變數宣告！
下面我簡單分析一下，
第一部分運行結果：
1.函數聲明優先於變數聲明，所以，剛開始，a就是function a(){alert(10)} ，就會看到這個函數。
2.a()，執行函數，就是出現alert(10)
3.執行了var a=3; 所以alert(a)就是顯示3
4.由於a不是一個函數了，所以往下在執行到a()的時候， 報錯。
第二部分運行結果：
1.underfind
2.報錯
在之前說過，預解析是把帶有var和function關鍵字的事先聲明，但不會賦值。所以一開始是underfind，然後報錯是因為執行到a()的時候，a並不是一個函數。

//函數表達式，和變數宣告同等

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

//函數聲明，優於變數宣告   

function a(){
    alert(10)
}

2-2.預解析與作用域

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

//結果是什麼都沒發生，因為要執行aa函數才會執行alert(0)

------ ------分割線1--------------------------------

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

//underfind  在aa函數裡面，有var a=3，那麼在aa作用域裡面，就是把a這個變數宣告提前，但不會賦值，所以是underfind

------------分割線2-- ------------------

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

//5,0   在函數體內，參數a的優先權高於變數a

------------分割線3------------------

var a=0;function aa(a){
   alert(a)
   a=3
}
aa(5)
alert(a)
//5,0   在函數體內，執行alert (a)和a=3,修改的不是全域變數a，而是參數a

------------分割線4--------- ---------

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

//5,3
//這個我也有點不理解，請教網路上的說法，有兩個答案(小夥伴如果知道怎麼理解，歡迎在評論上指點)
//1.參數優先權高於變數聲明，所以變數a的聲明其實被忽略了，此時相當於
//var a=0 ;
//function aa(a){
//  var a=5;
//    alert(a)
//    a=3
//    alert(a)
//}
//aa(5)

//2.形參和局部變數優先權一樣，此時相當於
//var a=0;
/ /function aa(a){
//  var a;    先宣告
//  a=5      由於形參和變數名稱稱呼一樣，覆蓋了！
//    alert(a)
//    a=3
//    alert(a)
//}
//aa(5)

#--- ---------分割線5--------------------------------

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

//首先，參數優先權高於全域變量，由於沒傳參數，所以是underfind
//a=3，實際上修改的時形參a的值，並不是全域變數a，往下alert(a)也是形參a
//最後的alert(a)，你懂的

3.循環與遞歸

3-1.費波納茨數組

這個不多說了，很簡單，但很經典。就是當前項等於前兩項的和

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.資料排列

例如 123454321 23456765432
這個怎麼做呢？當時我的做法的分兩步寫，先展示前面，再展示後面
代碼是

//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

這樣代碼太多了，後來研究了這種

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

解釋如下

1.先執行num(2,5)，就是

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);

然後就是

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

最後就是

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

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS3怎麼製作蝴蝶飛舞的動畫

怎麼用canvas實現小球與滑鼠的互動

怎麼用canvas做出粒子噴泉動畫的效果

以上是最新的JS面試題解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！