撩課-Web大前端每天5道面試題-Day5

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");
        }
    }
});