摘要：前言對于一個(gè)前端來說，面試的時(shí)候，難免會遇到的面試題。有幾道面試題，有些是我面試遇到的，有些是在網(wǎng)上看到的，但是都印象深刻。

對于一個(gè)web前端來說，面試的時(shí)候，難免會遇到j(luò)avascript的面試題。就我自己而言。有幾道面試題，有些是我面試遇到的，有些是在網(wǎng)上看到的，但是都印象深刻。今天就來簡單分析一下我遇到的，印象深刻的一些面試題！主要目的希望能讓小伙伴學(xué)到一些東西，如過以后遇到類似的情況，就記得不要掉坑了！

預(yù)解析：在當(dāng)前作用域下,js運(yùn)行之前，會把帶有var和function關(guān)鍵字的事先聲明，但不會賦值（個(gè)人見解）

對預(yù)解析印象深刻，并不是因?yàn)殡y，而是要細(xì)心，稍微一粗心，答案就寫錯(cuò)了！我遇到預(yù)解析的題目不止一道，有兩道我現(xiàn)在還能記住，我說下！

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

看到這個(gè)代碼，當(dāng)時(shí)答錯(cuò)了。后來請教了朋友，然后自己再理解下，就理順了！
考點(diǎn)其實(shí)就兩個(gè)，第一變量聲明提前，第二函數(shù)聲明優(yōu)先于變量聲明！
下面我簡單分析一下，
第一部分運(yùn)行結(jié)果：
1.函數(shù)聲明優(yōu)先于變量聲明，所以，剛開始，a就是function a(){alert(10)} ，就會看到這個(gè)函數(shù)。
2.a()，執(zhí)行函數(shù)，就是出現(xiàn)alert(10)
3.執(zhí)行了var a=3; 所以alert(a)就是顯示3
4.由于a不是一個(gè)函數(shù)了，所以往下在執(zhí)行到a()的時(shí)候， 報(bào)錯(cuò)。
第二部分運(yùn)行結(jié)果：
1.underfind
2.報(bào)錯(cuò)
在之前說過，預(yù)解析是把帶有var和function關(guān)鍵字的事先聲明，但不會賦值。所以一開始是underfind，然后報(bào)錯(cuò)是因?yàn)閳?zhí)行到a()的時(shí)候，a并不是一個(gè)函數(shù)。

//函數(shù)表達(dá)式，和變量聲明同等
var a=function(){
    alert(10)
} 
//函數(shù)聲明，優(yōu)于變量聲明    
function a(){
    alert(10)
} 

var a=0;
function aa(){
    alert(a)
    a=3
}
//結(jié)果是什么都沒發(fā)生，因?yàn)橐獔?zhí)行aa函數(shù)才會執(zhí)行alert(0)

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

var a=0;
function aa(){
    alert(a)
    var a=3
}
aa();
//underfind  在aa函數(shù)里面，有var a=3，那么在aa作用域里面，就是把a(bǔ)這個(gè)變量聲明提前，但是不會賦值，所以是underfind

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

var a=0;
function aa(a){
    alert(a)
    var a=3
}
aa(5)
alert(a)
//5,0   在函數(shù)體內(nèi)，參數(shù)a的優(yōu)先級高于變量a

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

var a=0;
function aa(a){
    alert(a)
    a=3
}
aa(5)
alert(a)
//5,0   在函數(shù)體內(nèi)，執(zhí)行alert(a)和a=3,修改的的并不是全局變量a，而是參數(shù)a

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

var a=0;
function aa(a){
    alert(a)
    var a=3
    alert(a)
}
aa(5)
//5,3
//這個(gè)我也有點(diǎn)不理解，請教網(wǎng)上的說法，有兩個(gè)答案(小伙伴如果知道怎么理解，歡迎在評論上指點(diǎn))
//1.參數(shù)優(yōu)先級高于變量聲明，所以 變量n的聲明其實(shí)被忽略了，此時(shí)相當(dāng)于
//var a=0;
//function aa(a){
//  var a=5;
//    alert(a)
//    a=3
//    alert(a)
//}
//aa(5)

//2.形參和局部變量優(yōu)先級一樣，此時(shí)相當(dāng)于
//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 
//首先，參數(shù)優(yōu)先級高于全局變量，由于沒傳參數(shù)，所以是underfind
//a=3，實(shí)際上修改的時(shí)形參a的值，并不是全局變量a，往下alert(a)也是形參a
//最后的alert(a)，你懂的

這個(gè)不多說了，很簡單，但是很經(jīng)典。就是當(dāng)前項(xiàng)等于前兩項(xiàng)的和

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)

比如 123454321 23456765432
這個(gè)怎么做呢？當(dāng)時(shí)我的做法的分兩步寫，先展示前面，再展示后面
代碼是

//01234543210
//先展示前面的   01234
//n：開始的數(shù)字    m:結(jié)束的數(shù)字
function num1(n,m){
    for(var i=n;i=n;i--){
        console.log(i)
    }
}
test(2,5)  //2345432

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

function num(n,m){
    console.log(n);
    if(n
解釋如下
1.首先執(zhí)行num(2,5)，就是
console.log(2); ->  test(3,5);  ->  console.log(2);      
//執(zhí)行test(3,5);  就是是相當(dāng)于   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
//仔細(xì)看就知道了
4-2
網(wǎng)上看到的題目，我自己改造下  80%應(yīng)聘者都不及格的JS面試題
for (var i = 0; i < 5; i++) {
  console.log(i);
}
console.log(i);
//這個(gè)大家應(yīng)該很快就知道了，012345



for (var i = 0; i < 5; i++) {
 setTimeout(function() {
  console.log(i);
 }, 1000);
}
console.log(i);
//這個(gè)大家就要小心一點(diǎn)了，答案是5    55555
//在setTimeout執(zhí)行之前，for循環(huán)早就執(zhí)行完了，i的值早已經(jīng)是5了，所以一開始是執(zhí)行，最后面的console.log(i);
//在for循環(huán)的時(shí)候一下子自定義5個(gè)setTimeout，大概一秒后，就是輸出55555



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



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

//這里的解析和上面基本一樣，把i當(dāng)參數(shù)傳進(jìn)output，記錄每一次循環(huán)的i,
//所以答案是5     01234



for (let i = 0; i < 5; i++) {
 setTimeout(function() {
  console.log(i);
 }, 1000);
}
console.log(i);
//結(jié)果是  報(bào)錯(cuò)   01234 
//注意i是用let定義的，不是var
5.小結(jié)
首先，要說一個(gè)就是這些是我自己遇到的題目里面，印象比較深刻的一些題目，并不一定是常見的題目。
然后，這篇文章可以說是我的一個(gè)筆記，記錄著我遇到過的題目。我發(fā)這樣的面試題文章給小伙伴看，目的不是為了讓小伙伴們記住題目和答案，或者是應(yīng)付面試，這樣沒有意義，也不現(xiàn)實(shí)！我的目的是為了讓大家可以學(xué)習(xí)一下，通過題目來知道一些原理和運(yùn)行的機(jī)制，或者是知道一些可能的‘陷阱’。
另外，我遇到過的實(shí)際的操作題也很多，比如數(shù)組去重，打亂數(shù)組，統(tǒng)計(jì)數(shù)組各個(gè)元素出現(xiàn)的次數(shù)， 字符串各個(gè)字符的出現(xiàn)次數(shù)，獲取地址鏈接的各個(gè)參數(shù)等等。這些題目不僅在面試題出現(xiàn)的比較多，在實(shí)際項(xiàng)目開發(fā)也會經(jīng)常用到，小伙伴可以自己學(xué)習(xí)。當(dāng)然我自己也有封裝過一些函數(shù)，就是實(shí)現(xiàn)上面說的那些操作的函數(shù)，這個(gè)我近期也會寫文章，記錄我封裝過哪些函數(shù)，封裝過哪些常用的功能，到時(shí)候再分享。有什么需要改正的，或者好的建議，也歡迎指出！
-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號：守候書閣