一些前端面試題彙總

題目一 : 統計字符串中出現次數最多的字符

eg : var s = "abcdefghijklabcdaaaefadca" ; // 其中a出現次數最多，7次

拿到這個題目，會怎麼作呢？

首先我想到兩種思路：

• 暴力查找，一個一個元素拿出來，再循環，獲得次數放入json鍵值對中，再比較大小

• 找到一個刪除一個，利用正則表達式替換，長度之差即是其重複的次數

暴力查找：

var s = "abcdefghijklabcdaaaefadca";
var json = {};
var Max = {
    key:"",
    value:0
};
var arr = s.split("");
for(var i=0;i<arr.length;i++){
    json[s[i]] = 0;
    for(var j=0;j<arr.length;j++){
        if(s[i] == arr[j]){
            json[s[i]]++;
        }
    }
}
for(prop in json){
    if(json[prop] > Max.value){
        Max.key = prop;
        Max.value = json[prop]
    }
}
console.log(Max); //得出正確結果

正則法：

var s = "abcdefghijklabcdaaaefadca";
//用於存放各字母出現的次數
var json = {};
//用於存放出現次數爲最大值的字母
var Max = {
    key:"",
    value:0
};
//正則替換，長度之差就是出現的次數
while(s){
    var len1 , len2;
    len1 = s.length;
    var first = s.charAt(0);
    s = s.replace(new RegExp(first,"g"),'');
    len2 = s.length;
    json[first] = len1-len2;
}
//找最大值
for(prop in json){
    if(json[prop] > Max.value){
        Max.key = prop;
        Max.value = json[prop]
    }
}
console.log(Max); //得出答案

這個題目還有一個好方法：

var s = "abcdefghijklabcdaaaefadca";
var json = {};
var Max = {
    key:"",
    value:0
};
for(var i=0;i<s.length;i++){
    if(!json[str.charAt(i)]){
        json[str.charAt(i)] = 1;   //不存在就自動建立，
    }else{
        json[str.charAt(i)]++;     //若是已經存在就加1.
    }
}
console.log(json);
//找最大值
for(prop in json){
    if(json[prop] > Max.value){
        Max.key = prop;
        Max.value = json[prop]
    }
}
console.log(Max); //得出答案

這種算法時間複雜度爲O（n）,能夠說是很簡單了！

題目二 : 求下面的輸出值

function Show(){
    getName = function(){
        console.log(1);
    }
    return this;
}; 
Show.getName = function(){
    console.log(2);
};
Show.prototype.getName = function(){
    console.log(3);
};
var getName = function(){
    console.log("4");
}
function getName(){
    console.log(5);
};

求這些問題的解：
一、Show.getName();    
二、getName();        
三、Show().getName();   
四、getName();          
五、new Show.getName();  
六、new Show().getName();  
七、new new Show().getName();

這道題目考察的是Javascript基礎，

首先要明白JS執行過程：

1. 先提高（先提高函數，再提高變量，若是名字同樣，變量提高會覆蓋函數提高）

2. 再執行，若是遇到閉包建立

3. 在閉包空間中反覆1和2

4. 先定義（提高），在執行

5. 變量提高

6. 函數提高

本題目解答以下：

1. 形如 func.method(函數名.屬性),函數也是對象，發現Show.getName()有定義，就執行方法屬性，輸出2

2. 根據JS執行過程，先提高函數getName()，再提高變量getName , 同名覆蓋，就知道變量getName覆蓋了其同名函數，執行變量getName，結果是 「4」

3. 形如 func().method() ，意思是先執行 func() , 由 func() 的返回值執行method方法，因此先要知道 func() 返回值是什麼？ return this; this指什麼呢？ 誰調用指向誰，func是全局調用 ， 因此this指向window ,Show()函數執行後，裏面把getName的定義該變了，因此，window.getName() 輸出是 1

4. getName() , 在當前環境等同於 window.getName() ,輸出是 1

5. new Show.getName() 先執行show.getName()輸出2 在new一下

6. new Show().getName() 使用了new關鍵字，是把函數show當成了構造器，此時return沒有做用，getName在構造器裏沒有，找原型對象 輸出 3

7. new new Show().getName() 就是在第六問基礎之上輸出 3 以後，在new一個

javascript全部的函數均可以使用 new func()關鍵字，表示生成一個對象。這點理解了，理解上面的就簡單

Javascript 簡單概念

javascript的typeof返回哪些數據類型

• object , number , function , boolean , undefind , string

檢測數組的幾種方法 , 檢測obj是不是數組類型

• Array.isArray(obj);

• obj instanceof Array

• arr.constructor.name

• toString.call()

傳統事件綁定和符合W3C標準的事件綁定有什麼區別？

傳統事件綁定：

<div onclick=」」>123</div>
<script>
   div1.onclick=function(){};
</script>
<button  onmouseover=」」></button>

• 若是說給同一個元素綁定了兩次或者屢次相同類型的事件，那麼後面的綁定會覆蓋前面的綁定

• 不支持DOM事件流 事件捕獲階段è目標元素階段=>事件冒泡階段

符合W3C標準的事件綁定的方式 addEventListener/attachEvent
A、非IE瀏覽器：
addEventListener

• 若是說給同一個元素綁定了兩次或者屢次相同類型的事件，因此的綁定將會依次觸發

• 支持DOM事件流的

• 進行事件綁定傳參不須要on前綴

• addEventListener(「click」,function(){},true);//此時的事件就是在事件捕獲階段執行

• 第三個參數：表明是否在捕獲階段執行，默認值是false

• ddEventListener(「click」,function(e){})

• addEventListener(「click」,function(){},false) 事件在冒泡階段執行

B、IE瀏覽器

• ie9開始，ie11 edge：addEventListener

• ie9之前 ie8：attachEvent/detachEvent

• 進行事件類型傳參須要帶上on前綴

• dom1.attachEvent(「onclick」,functioin(){});
  這種方式只支持事件冒泡，不支持事件捕獲

call和apply的區別

call和apply相同點：
都是爲了用一個本不屬於一個對象的方法，讓這個對象去執行

• toString.call([],1,2,3)

• toString.apply([],[1,2,3])

• Object.call(this,obj1,obj2,obj3)

• Object.apply(this,arguments)
  區別：

• call第二個參數開始接受一個參數列表

• apply第二個參數開始接受一個參數數組

jQuery框架中$.ajax()的經常使用參數有哪些？

• type

1. 類型：String

2. 默認值: "GET")。請求方式 ("POST" 或 "GET")， 默認爲 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也能夠使用，但僅部分瀏覽器支持。

• url

1. 類型：String

2. 默認值: 當前頁地址。發送請求的地址。

• success

1. 類型：Function 請求成功後的回調函數。

2. 參數：由服務器返回，並根據 dataType 參數進行處理後的數據；描述狀態的字符串。
   這是一個 Ajax 事件。

• options

1. 類型：Object

2. 可選。AJAX 請求設置。全部選項都是可選的。

• async

1. 類型：Boolean

2. 默認值: true。默認設置下，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲 false。
   注意，同步請求將鎖住瀏覽器，用戶其它操做必須等待請求完成才能夠執行。

• beforeSend(XHR)

1. 類型：Function

2. 發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。
   XMLHttpRequest 對象是惟一的參數。

3. 這是一個 Ajax 事件。若是返回 false 能夠取消本次 ajax 請求
   。

cache

1. 類型：Boolean

2. 默認值: true，dataType 爲 script 和 jsonp 時默認爲 false。設置爲 false 將不緩存此頁面。