前端開發(fā)面試題總結(jié)之——JAVASCRIPT（二）

相關(guān)知識點(diǎn)

數(shù)據(jù)類型、運(yùn)算、對象、function、繼承、閉包、作用域、原型鏈、事件、RegExp、JSON、Ajax、DOM、BOM、內(nèi)存泄漏、跨域、異步加載、模板引擎、前端MVC、前端MVVM、路由、模塊化、Http、Canvas、jQuery、ECMAScript 2015（ES6）、Node.js、AngularJS、Vue、React......

題目&答案

  • documen.write和 innerHTML的區(qū)別
document.write只能重繪整個(gè)頁面
innerHTML可以重繪頁面的一部分
  • 瀏覽器檢測通過什么？
（1） navigator.userAgent
（2） 不同瀏覽器的特性，如addEventListener
  • JavaScript有哪幾種數(shù)據(jù)類型？
簡單，Number，Boolean，String，Null，Undefined
復(fù)合，Object，Array，F(xiàn)unction
  • 截取字符串“abcdefghi”的“fghi”
var myvalue=”abcdefghi”;
var jiequ=myvalue.substring(myvalue.length-4,myvalue.length);
alert(jiequ);

-寫出下面的運(yùn)算結(jié)果

alert(typeof(null)); // object
alert(typeof(undefined)); // undefined
alert(typeof(NaN)); // number
alert(NaN==undefined); // false
alert(NaN==NaN); // false
var str="123abc";
alert(typeof(str++)); // number
alert(str);// NaN
  • 問執(zhí)行完畢后 x, y, z 的值分別是多少？
var x = 1, y = z = 0;
function add(n) {
    n = n+1;
}
y = add(x);
function add(n) {
    n = n + 3;
}
z = add(x);
1、undefined、undefined
  • 如何阻止事件的冒泡?
//阻止冒泡的方法
function stopPP(e)
{
    var evt = e|| window.event;
    //IE用cancelBubble=true來阻止而FF下需要用stopPropagation方法
    evt.stopPropagation ?evt.stopPropagation() : (evt.cancelBubble=true);
}
  • 寫出程序運(yùn)行的結(jié)果?
for(var i=0, j=0; i<10, j<6; i++, j++){
    k = i + j;
}
10
  • 編寫一個(gè)方法 求一個(gè)字符串的字節(jié)長度
/*假設(shè)：一個(gè)英文字符占用一個(gè)字節(jié)，一個(gè)中文字符占用兩個(gè)字節(jié)*/
function getBytes(str){
    var len = str.length,
        bytes = len,
        i = 0;
    for(; i<len; i++){
        if (str.charCodeAt(i) > 255) bytes++;
    }
    return bytes;
}
alert(getBytes("玩,as"));
  • JavaScript中如何對一個(gè)對象進(jìn)行深度clone？
function cloneObject(o) {
    if(!o || 'object' !== typeof o) {
        return o;
    }
    var c = 'function' === typeof o.pop ? [] : {};
    var p, v;
    for(p in o) {
        if(o.hasOwnProperty(p)) {
            v = o[p];
            if(v && 'object' === typeof v) {
                c[p] = Ext.ux.clone(v);
            }
            else {
                c[p] = v;
            }
        }
    }
    return c;
};
  • 如何控制alert中的換行？
\n alert(“p\np”);

function parseQueryString(url){
    var params = {},
        arr = url.split("?");
    if (arr.length <= 1)
        return params;
    arr = arr[1].split("&");
    for(var i=0, l=arr.length; i<l; i++){
        var a = arr[i].split("=");
        params[a[0]] = a[1];
    }
    return params;
}
var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2",
    ps = parseQueryString(url);
console.log(ps["key1"]);
  • 如何控制網(wǎng)頁在網(wǎng)絡(luò)傳輸過程中的數(shù)據(jù)量?
啟用GZIP壓縮
保持良好的編程習(xí)慣，避免重復(fù)的CSS，JavaScript代碼，多余的HTML標(biāo)簽和屬性
  • 以下代碼運(yùn)行結(jié)果
function say() {
    // Local variable that ends up within closure
    var num = 888;
    var sayAlert = function() { alert(num); }
    num++;
    return sayAlert;
}
var sayAlert = say();
sayAlert();//889
  • 請實(shí)現(xiàn)ECMAScript 5中的Object.getPrototypeOf() 函數(shù)
function proto(object) {
    return !object?                null
        : '__proto__' in object?  object.__proto__
        : /* not exposed? */      object.constructor.prototype
}
  • 如何實(shí)現(xiàn)Array.prototype.forEach？
if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(fn){
        for ( var i = 0; i < this.length; i++ ) {
            fn( this[i], i, this );
        }
    };
}
["a", "b", "c"].forEach(function(value, index, array){
    assert( value, "Is in position " + index + " out of " + (array.length - 1) );
});
  • 如何將arguments轉(zhuǎn)為數(shù)組？
Object.prototype.slice.call(arguments);
  • 以下程序運(yùn)行結(jié)果？
var ninja = function myNinja(){
    alert(ninja == myNinja);
};
ninja();
myNinja();
true、報(bào)錯(cuò)（error - myNinja is not defined.）
  • 如何獲取光標(biāo)的水平位置？
function getX(e){
    e = e || window.event;
    //先檢查非IE瀏覽器，在檢查IE的位置
    return e.pageX || e.clentX + document.body.scrollLeft;
}
  • 兼容瀏覽器的獲取指定元素（elem）的樣式屬性（name）的方法
function getStyle(elem, name){
    if(elem.style[name]){//如果屬性存在于style[]中，直接取
        return elem.style[name];
}
else if(elem.currentStyle){//否則 嘗試IE的方法
        return elem.currentStyle[name];
}//嘗試W3C的方式
else if(document.defaultView && document.defaultView.getComputedStyle){ 
        name = name.replace(/([A-Z])/g, "-$1");//W3C中為textAlign樣式，轉(zhuǎn)為text-align
        name = name.toLowerCase();
        var s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    }else{
        return null;
    }
}
  • Javascript中實(shí)現(xiàn)類似PHP的print_r函數(shù)
function print_r(theObj) {
    var retStr = '';
     if(typeof theObj == 'object') {
          retStr += '<div style="font-family:Tahoma; font-size:7pt;">';
          for(var p in theObj) {
                if (typeof theObj[p] == 'object') {
                      retStr += '<div><b>['+p+'] => ' + typeof(theObj) + '</b></div>';
                      retStr += '<div style="padding-left:25px;">' +  print_r(theObj[p]) + '</div>';
                } else {
                      retStr += '<div>['+p+'] => <b>' + theObj[p] +  '</b></div>';
                }  
           }
          retStr += '</div>';
      }
      return  retStr;
}
  • 以下程序運(yùn)行結(jié)果？
var b = parseInt("01");
alert("b="+b);
var c = parseInt("09/08/2009");
alert("c="+c);
b=1、c=0。
  • 以下程序的運(yùn)行結(jié)果？
var foo = 'hello';
(function() {
       var foo= foo || 'world';
       console.log(foo);
})();
world
  • 如何規(guī)避javascript多人開發(fā)函數(shù)重名問題？
(1) 可以開發(fā)前規(guī)定命名規(guī)范，根據(jù)不同開發(fā)人員開發(fā)的功能在函數(shù)前加前綴
(2) 將每個(gè)開發(fā)人員的函數(shù)封裝到類中，調(diào)用的時(shí)候就調(diào)用類的函數(shù)，即使函數(shù)重名只要類名不重復(fù)就行
  • 前端開發(fā)有哪些優(yōu)化問題？
減少http請求次數(shù)：cssspirit,data uri
JS，CSS源碼壓縮
前端模板JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)
用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能
用setTimeout來避免頁面失去響應(yīng)
用hash-table來優(yōu)化查找
當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style
少用全局變量
緩存DOM節(jié)點(diǎn)查找的結(jié)果
避免使用CSS Expression
圖片預(yù)載
避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會顯示出來，顯示比div+css布局慢
  • AJAX請求總共有多少種CALLBACK
Ajax請求總共有八種Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException
  • 請給出異步加載js方案，不少于兩種
異步加載方式：
defer，只支持IE
async：
創(chuàng)建script，插入到DOM中，加載完畢后callBack，見代碼：
function loadScript(url, callback){
      var script = document.createElement("script")
      script.type = "text/javascript";
      if(script.readyState){ //IE
          script.onreadystatechange = function(){
               if (script.readyState == "loaded" ||script.readyState == "complete"){
                      script.onreadystatechange = null;
                      callback();
               }
         };
     } else {
//Others: Firefox, Safari, Chrome, and Opera
         script.onload = function(){
            callback();
         };
    }
    script.src = url;
    document.body.appendChild(script);
}

相關(guān)系列：
前端開發(fā)面試題總結(jié)之——HTML
前端開發(fā)面試題總結(jié)之——CSS3
前端開發(fā)面試題總結(jié)之——JAVASCRIPT（一）
前端開發(fā)面試題總結(jié)之——JAVASCRIPT（三）

以上所有資料來源于網(wǎng)絡(luò)，如有不對的地方，還請及時(shí)告知，歡迎大家批評指正！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容