讓我印象深入的javascript面試題

1.前言

對於一個web前端來講，面試的時候，不免會遇到javascript的面試題。就我本身而言。有幾道面試題，有些是我面試遇到的，有些是在網上看到的，可是都印象深入。今天就來簡單分析一下我遇到的，印象深入的一些面試題！主要目的但願能讓小夥伴學到一些東西，如過之後遇到相似的狀況，就記得不要掉坑了！

2.預解析

預解析：在當前做用域下,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.參數優先級高於變量聲明，因此 變量n的聲明其實被忽略了，此時至關於
//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)
    }
}
test(2,5)  //2345432

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

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

解釋以下

1.首先執行num(2,5)，就是
console.log(2); ->  test(3,5);  ->  console.log(2);      
//執行test(3,5);  就是是至關於   console.log(3); -> test(4,5); -> console.log(3); 下面以此類推
console.log(2); -> console.log(3); -> test(4,5); -> console.log(3); ->  console.log(2);  

而後就是

console.log(2); -> console.log(3); -> console.log(4); -> test(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);

4.其它

4-1

function foo1()
{
 return {
     bar: "hello"
 };
}
 
function foo2()
{
 return
 {
     bar: "hello"
 };
}
var a=foo1();
var b=foo2();
console.log(a) //Object {bar: "hello"}
console.log(b) //underfind
//仔細看就知道了

4-2

網上看到的題目，我本身改造下 80%應聘者都不及格的JS面試題

for (var i = 0; i < 5; i++) {
  console.log(i);
}
console.log(i);
//這個你們應該很快就知道了，012345



for (var i = 0; i < 5; i++) {
 setTimeout(function() {
  console.log(i);
 }, 1000);
}
console.log(i);
//這個你們就要當心一點了，答案是5    55555
//在setTimeout執行以前，for循環早就執行完了，i的值早已是5了，因此一開始是執行，最後面的console.log(i);
//在for循環的時候一會兒自定義5個setTimeout，大概一秒後，就是輸出55555



for (var i = 0; i < 5; i++) {
 (function(j) { // j = i
  setTimeout(function() {
   console.log(j);
  }, 1000);
 })(i);
}
console.log(i); 
//這裏的解析和上面基本同樣，只是用閉包來記錄每一次循環的i,
//因此答案是5     01234



var output = function (i) {
 setTimeout(function() {
  console.log(i);
 }, 1000);
};
 
for (var i = 0; i < 5; i++) {
 output(i); // 這裏傳過去的 i 值被複制了
}
console.log(i);

//這裏的解析和上面基本同樣，把i當參數傳進output，記錄每一次循環的i,
//因此答案是5     01234



for (let i = 0; i < 5; i++) {
 setTimeout(function() {
  console.log(i);
 }, 1000);
}
console.log(i);
//結果是  報錯   01234 
//注意i是用let定義的，不是var

5.小結

首先，要說一個就是這些是我本身遇到的題目裏面，印象比較深入的一些題目，並不必定是常見的題目。
而後，這篇文章能夠說是個人一個筆記，記錄着我遇到過的題目。我發這樣的面試題文章給小夥伴看，目的不是爲了讓小夥伴們記住題目和答案，或者是應付面試，這樣沒有意義，也不現實！個人目的是爲了讓你們能夠學習一下，經過題目來知道一些原理和運行的機制，或者是知道一些可能的‘陷阱’。
另外，我遇到過的實際的操做題也不少，好比數組去重，打亂數組，統計數組各個元素出現的次數， 字符串各個字符的出現次數，獲取地址連接的各個參數等等。這些題目不只在面試題出現的比較多，在實際項目開發也會常常用到，小夥伴能夠本身學習。固然我本身也有封裝過一些函數，就是實現上面說的那些操做的函數，這個我近期也會寫文章，記錄我封裝過哪些函數，封裝過哪些經常使用的功能，到時候再分享。有什麼須要改正的，或者好的建議，也歡迎指出！

-------------------------華麗的分割線--------------------
想了解更多，關注關注個人微信公衆號：守候書閣