讓我印象深刻的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();</code></pre>
看到這個代碼，當時答錯了。后來請教了朋友，然后自己再理解下，就理順了！
考點其實就兩個，第一變量聲明提前，第二函數聲明優先于變量聲明！
下面我簡單分析一下，
第一部分運行結果：
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)，你懂的</code></pre>
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);</code></pre>
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
//仔細看就知道了</code></pre>
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</code></pre>
5.小結
首先，要說一個就是這些是我自己遇到的題目里面，印象比較深刻的一些題目，并不一定是常見的題目。
然后，這篇文章可以說是我的一個筆記，記錄著我遇到過的題目。我發這樣的面試題文章給小伙伴看，目的不是為了讓小伙伴們記住題目和答案，或者是應付面試，這樣沒有意義，也不現實！我的目的是為了讓大家可以學習一下，通過題目來知道一些原理和運行的機制，或者是知道一些可能的‘陷阱’。
另外，我遇到過的實際的操作題也很多，比如 數組去重，打亂數組，統計數組各個元素出現的次數， 字符串各個字符的出現次數，獲取地址鏈接的各個參數 等等。這些題目不僅在面試題出現的比較多，在實際項目開發也會經常用到，小伙伴可以自己學習。當然我自己也有封裝過一些函數，就是實現上面說的那些操作的函數，這個我近期也會寫文章，記錄我封裝過哪些函數，封裝過哪些常用的功能，到時候再分享。有什么需要改正的，或者好的建議，也歡迎指出！
來自：https://segmentfault.com/a/1190000010114505