1. 程式人生 > >05-撩課大前端-面試寶典-第五篇

05-撩課大前端-面試寶典-第五篇

1.寫一個深度克隆方法(es5)?

/**
 *  深拷貝
 * @param {object}fromObj 拷貝的物件
 * @param {object}toObj  目標物件
 */
function deepCopyObj2NewObj(fromObj, toObj) {
   for(var key in fromObj){
       // 1. 取出鍵值對
       var fromValue = fromObj[key];
       // 2. 檢查當前的屬性值是什麼型別
       if(!isObj(fromValue)){ // 如果是值型別,那麼就直接拷貝賦值
           toObj[key] = fromValue;
       }else {
           // 如果是引用型別,
           // 那麼就再呼叫一次這個方法,
           // 去內部拷貝這個物件的所有屬性
           var tempObj = new fromValue.constructor;
           console.log(fromValue.constructor);
           deepCopyObj2NewObj(fromValue, tempObj);
           toObj[key] = tempObj;
       }
   }
}

/**
 * 輔助函式, 判斷是否是物件
 * @param {object}obj
 * @returns {boolean}
 */
function isObj(obj) {
  return obj instanceof Object;
}

2. es6中let,const,var的區別是什麼?

var :宣告全域性變數;
let :宣告塊級變數,即區域性變數, 定義後可以修改;
const :用於宣告常量,就是定義後
不能再修改值或者引用值的常量,
也具有塊級作用域

3. 對陣列[1,2,3,8,2,8]進行去重,es5或者es6方法?

es四種方式:
Array.prototype.unique1 = function() {
    // 1. 定義陣列
    var temp = [];
    // 2. 遍歷當前陣列
    for(var i = 0; i < this.length; i++) {
        // 3.如果當前陣列的第i已經儲存進了臨時陣列,
        // 那麼跳過,否則把當前項push到臨時數組裡面
        if (-1 === temp.indexOf(this[i])) {
            temp.push(this[i]);
        }
    }
    return temp;
};

Array.prototype.unique2 = function() {
    //1. hash為hash表,r為臨時陣列
    var hash = {}, temp=[];
    // 2.遍歷當前陣列
    for(var i = 0; i < this.length; i++)
    {
        // 3. 如果hash表中沒有當前項
        if (!hash[this[i]])
        {
            // 4.存入hash表
            hash[this[i]] = true;
            // 5.把當前陣列的當前項
            // push到臨時數組裡面
            temp.push(this[i]);
        }
    }
    return temp;
};

Array.prototype.unique3 = function() {
    var n = [this[0]];
    for(var i = 1; i < this.length; i++){
        if (this.indexOf(this[i]) === i) {
            n.push(this[i]);
        }
    }
    return n;
};

Array.prototype.unique4 = function() {
    this.sort();
    var re=[this[0]];
    for(var i = 1; i < this.length; i++)
    {
        if( this[i] !== re[re.length-1])
        {
            re.push(this[i]);
        }
    }
    return re;
};

es6:

Array.prototype.unique =
Array.prototype.unique 
|| function () {
    return [...new Set(this)];
};

4. 說說對es6中=>的理解?

箭頭函式相當於匿名函式,
並且簡化了函式定義,
箭頭左邊是引數,
右邊是返回值。

箭頭函式看上去
是匿名函式的一種簡寫,
但實際上,箭頭函式和
匿名函式有個明顯的區別:

箭頭函式內部的this是詞法作用域,
由上下文確定。

5. 點選一個按鈕,發出ajax請求,如何防止使用者在此請求方式返回之前再次點選?

// 點選提交按鈕的時候,
// 把這個提交這個處理函式給解綁掉,
// 請求完成的時候在繫結回來

function clickHandler(){
  $(this).unbind('click', clickHandler);
    $.ajax({
        url : 'url',
        dataType : 'json',
        type : 'post',
        success : function (data) {
            if (data.success) {
                //提交成功做跳轉處理
            } else {
                //處理失敗,重新繫結點選事件
                $(self).click(clickHandler);
            }
        }
  });
}
$('#itlike').click(clickHandler);


// 可以點選後讓按鈕不可用,
// 如果提交失敗可以再次設定為可用

// 1.讓按鈕不可用
$("#itlike").attr("disabled","disabled");
$.ajax({
    url : 'url',
    dataType : 'json',
    type : 'post',
    success : function (data) {
        if (data.success) {
           // 提交成功做跳轉處理
        } else {
            // 處理失敗,重新繫結點選事件
            // 讓按鈕可用
            $("#itlike").removeAttr("disabled");
        }
    }
});