前端開發--面試題整理（JS篇）

標籤：屬性   false   code   網站   onclick   oda   http請求   length   類型   

1.截取字串abcdace的ace
alert(‘abcdace‘.substring(4));

2.規避javascript多人開發函數重名問題
命名空間
封閉空間
js模組化mvc（資料層、表現層、控制層）
seajs
變數轉換成對象的屬性
對象化

3.javascript物件導向中繼承實現
function Person(name){
        this.name = name;
}

Person.prototype.showName = function(){
        alert(this.name);
}

function Worker(name, job){
        Person.apply(this,arguments)
        this.job = job;
}
for(var i in Person.prototype){
        Worker.prototype = Person.prototype;
}
new Worker(‘sl‘, ‘coders‘).showName();

4.判斷一個字串中出現次數最多的字元，統計這個次數
var str = ‘asdfssaaasasasasaa‘;
var json = {};

for (var i = 0; i < str.length; i++) {
        if(!json[str.charAt(i)]){
                json[str.charAt(i)] = 1;
        }else{
                json[str.charAt(i)]++;
        }
};
var iMax = 0;
var iIndex = ‘‘;
for(var i in json){
        if(json[i]>iMax){
                iMax = json[i];
                iIndex = i;
        }
}
alert(‘出現次數最多的是:‘+iIndex+‘出現‘+iMax+‘次‘);

5.編寫一個方法 求一個字串的位元組長度;
//假設一個中文佔兩個位元組
var str = ‘22兩是‘;

alert(getStrlen(str))

function getStrlen(str){
        var json = {len:0};
        var re = /[\u4e00-\u9fa5]/;
        for (var i = 0; i < str.length; i++) {
                if(re.test(str.charAt(i))){
                        json[‘len‘]++;
                }
        };
        return json[‘len‘]+str.length;
}

6.編寫一個方法 去掉一個數組的重複元素
var arr = [1,2,3,1,43,12,12,1];
var json = {};
var arr2 = [];
for (var i = 0; i < arr.length; i++) {
        if(!json[arr[i]]){
                json[arr[i]] = true;
        }else{
                json[arr[i]] = false;
        }

        if(json[arr[i]]){
                arr2.push(arr[i]);
        }
};

for (var i = 0; i < arr.length; i++) {
        if(!aa(arr[i], arr2)){
                arr2.push(arr[i])
        }
};
function aa(obj, arr){
        for (var i = 0; i < arr.length; i++) {
                if(arr[i] == obj) return true;
                else return false;
        };
}
alert(arr2)

7.寫出3個使用this的典型應用
事件： 如onclick  this->發生事件的對象
建構函式          this->new 出來的object
call/apply        改變this

8.如何深度複製
var arr = [1,2,43];
var json = {a:6,b:4,c:[1,2,3]};
var str = ‘sdfsdf‘;

var json2 = clone(json);

alert(json[‘c‘])
function clone(obj){
        var oNew = new obj.constructor(obj.valueOf());
        if(obj.constructor == Object){
                for(var i in obj){
                        oNew[i] = obj[i];
                        if(typeof(oNew[i]) == ‘object‘){
                                clone(oNew[i]);
                        }
                }
        }
        return oNew;
}

9.JavaScript中如何檢測一個變數是一個String類型？請寫出函數實現
 typeof(obj) == ‘string‘
 obj.constructor == String;

10.網頁中實現一個計算當年還剩多少時間的倒數計時程式，要求網頁上即時動態顯示“××年還剩××天××時××分××秒”
var oDate = new Date();
var oYear = oDate.getFullYear();

var oNewDate = new Date();
oNewDate.setFullYear(oYear, 11, 31, 23, 59, 59);
var iTime = oNewDate.getTime()-oDate.getTime();

var iS = iTime/1000;
var iM = oNewDate.getMonth()-oDate.getMonth();
var iDate =iS

11. 請解釋一下什麼是語義化的HTML。
內容使用特定標籤，通過標籤就能大概瞭解整體頁面的布局分布

12. 為什麼利用多個網域名稱來儲存網站資源會更有效？
確保使用者在不同地區能用最快的速度開啟網站，其中某個網域名稱崩潰使用者也能通過其他鬱悶訪問網站

13.請說出三種減低頁面載入時間的方法
1、壓縮css、js檔案
2、合并js、css檔案，減少http請求
3、外部js、css檔案放在最底下
4、減少dom操作，儘可能用變數替代不必要的dom操作

14.什麼是FOUC？你如何來避免FOUC？
由於css引入使用了@import 或者存在多個style標籤以及css檔案在頁面底部引入使得css檔案載入在html之後導致頁面閃爍、花屏
用link載入css檔案，放在head標籤裡面

15.文件類型的作用是什嗎？你知道多少種文件類型？
影響瀏覽器對html代碼的編譯渲染
html2.0
xHtml
html5

16.瀏覽器標準模式和怪異模式之間的區別是什嗎？
盒模型解釋不同

17.閉包
子函數能被外部調用到，則該作用連上的所有變數都會被儲存下來。

18.請解釋什麼是Javascript的模組模式，並舉出實用執行個體。
js模組化mvc（資料層、表現層、控制層）
seajs
命名空間

19.你如何組織自己的代碼？是使用模組模式，還是使用經典繼承的方法？
對內：模組模式
對外：繼承

20.你如何最佳化自己的代碼？
代碼重用
避免全域變數（命名空間，封閉空間，模組化mvc..）
拆分函數避免函數過於臃腫
注釋

21.你能解釋一下JavaScript中的繼承是如何工作的嗎？
子建構函式中執行父建構函式，並用call\apply改變this
複製父建構函式原型上的方法

22.請儘可能詳盡的解釋AJAX的工作原理。
建立ajax對象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
判斷資料轉送方式(GET/POST)
開啟連結 open()
發送 send()
當ajax對象完成第四步（onreadystatechange）資料接收完成，判斷http響應狀態（status）200-300之間或者304（緩衝）執行回呼函數

前端開發--面試題整理（JS篇）