1. 程式人生 > >撩課-Web大前端每天5道面試題-Day5

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