DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS搜狐面試題分析
JS搜狐面試題分析
編輯:關於JavaScript     

本文實例講述了幾道JS搜狐面試題。分享給大家供大家參考,具體如下:

一、實現一個遍歷數組或對象裡所有成員的迭代器。

var each = function(obj, fn){
    //+++++++++++答題區域+++++++++++
    //+++++++++++答題結束+++++++++++
};
try{
    var data1 = [4,5,6,7,8,9,10,11,12];
    var data2 = {
        "a": 4,
        "b": 5,
        "c": 6
    };
    console.group(data1);
    each(data1, function(o){
        if( 6 == this )
            return true;
        else if( 8 == this )
            return false;
        console.log(o + ": \"" + this + "\"");
    });
    console.groupEnd();
    /*------[執行結果]------
    1: "4"
    2: "5"
    4: "7"
    ------------------*/
    console.group(data2);
    each(data2, function(v, n){
        if( 5 == this )
            return true;
        console.log(n + ": \"" + v + "\"");
    });
    console.groupEnd();
    /*------[執行結果]------
    a: "4"
    c: "6"
    ------------------*/
}catch(e){
    console.error("執行出錯,錯誤信息: " + e);
}

【思路分析】

1.首先判斷傳進來的是數組還是對象,用到instanceof,typeof和instanceof都可以用來判斷js變量類型,用法區別

typeof(obj) //typeof會返回一個基本數據類型

obj instanceof Array //instanceof一般是用來驗證一個對象是否屬於某類

注:typeof遇到null,數組,對象都會返回object類型

var each = function(obj, fn){
  if(obj instanceof Array){
  }
  else if(obj instanceof Object){
  }
};

2.遍歷數組和遍歷對象的區別

遍歷數組:

for(var i=0,j=array.length;i<j;i++){
  alert(array[i]);
}

遍歷對象:

for(var e in data){
  alert(data[e]);
}

3.分析結果

each(data1, function(o){
  if( 6 == this )
    return true;      //表示跳過並繼續遍歷
  else if( 8 == this )
    return false;     //表示停止遍歷
  console.log(o + ": \"" + this + "\"");
});

如果直接for循環,那會輸出數組所有元素,現在有個each函數,應該讓他指向obj中的元素(即改變this指向,讓this代表obj[i])

fn.call(obj[i],i+1); //fn是each的第二個參數,讓這個函數指向obj中的元素,第一個參數o,讓讓它傳值i+1

僅僅這樣會輸出4,5,7,8,9,10,11,12,所以還需要限定讓它等於8的時候跳出整個循環

if(obj instanceof Array){
  for(var i=0,j=obj.length;i<j;i++){
    var temp=fn.call(obj[i],i+1);
    if(temp===false){    //===值和類型都要等,==只是值相同null==false
      return;
    }
  }
}

同理,遍歷對象

else if(obj instanceof Object){
  for(var e in obj){
    fn.call(obj[e],obj[e],e);    //第一個參數v(對象值),第二個n(對象索引)
  }
}

注:obj instanceof Object要在obj instanceof Array之後,因為數組屬於對象,Object在前面的話,後面的判斷就不執行了

二、實現一個叫Man的類,包含attr, words, say三個方法。

var Man;
//+++++++++++答題區域+++++++++++
//+++++++++++答題結束+++++++++++
try{
    var me = Man({ fullname: "小紅" });
    var she = new Man({ fullname: "小紅" });
    console.group();
    console.info("我的名字是:" + me.attr("fullname") + "\n我的性別是:" + me.attr("gender"));
    console.groupEnd();
    /*------[執行結果]------
    我的名字是:小紅
    我的性別是:<用戶未輸入>
    ------------------*/
    me.attr("fullname", "小明");
    me.attr("gender", "男");
    me.fullname = "廢柴";
    me.gender = "人妖";
    she.attr("gender", "女");
    console.group();
    console.info("我的名字是:" + me.attr("fullname") + "\n我的性別是:" + me.attr("gender"));
    console.groupEnd();
    /*------[執行結果]------
    我的名字是:小明
    我的性別是:男
    ------------------*/
    console.group();
    console.info("我的名字是:" + she.attr("fullname") + "\n我的性別是:" + she.attr("gender"));
    console.groupEnd();
    /*------[執行結果]------
    我的名字是:小紅
    我的性別是:女
    ------------------*/
    me.attr({
        "words-limit": 3,
        "words-emote": "微笑"
    });
    me.words("我喜歡看視頻。");
    me.words("我們的辦公室太漂亮了。");
    me.words("視頻裡美女真多!");
    me.words("我平時都看優酷!");
    console.group();
    console.log(me.say());
    /*------[執行結果]------
    小明微笑:"我喜歡看視頻。我們的辦公室太漂亮了。視頻裡美女真多!"
    ------------------*/
    me.attr({
        "words-limit": 2,
        "words-emote": "喊"
    });
    console.log(me.say());
    console.groupEnd();
    /*------[執行結果]------
    小明喊:"我喜歡看視頻。我們的辦公室太漂亮了。"
    ------------------*/
}catch(e){
    console.error("執行出錯,錯誤信息: " + e);
}

思路分析:

1.先來一個構造函數

Man=function(info){
};

2.

var me = Man({ fullname: "小紅" });
var she = new Man({ fullname: "小紅" });

更多關於JavaScript相關內容可查看本站專題:《javascript面向對象入門教程》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved