19/12/19面試題

前言

很多面試題還可以從牛客網獲取的,面試的時候可以多刷刷牛客網題庫

連接地址: https://www.nowcoder.com/

廣州廣燊企業管理諮詢有限公司前端面試題

選擇題

  1. Linux系統中某文件的權限是d-r-xrw---x,那麼一下描述正確的有(D)

    A. 該文件類型爲塊設備文件
    B. 文件的所屬組成員的權限爲可讀,可寫,可以通過cd命令進入目錄
    C. 文件的所有者權限爲可讀,可寫
    D. 文件的非本組成員的權限爲只可執行
    
    解析:
       d:表示文件類型,代表文件類型爲目錄。
       r-:代表所有者的權限。只讀。
       xrw-:所有者所屬組的權限。x(可執行),r(只讀),w(可寫).
       x:非本組成員的權限.可執行
  2. Node.js中,下列哪個選項能取得當前腳本文件的路徑?(C)

    A.path.filename()
    B.path.dirname()
    C.__filename
    D.__dirname
    
    解析:
       C 當前模塊文件的帶有完整絕對路徑的文件名
       D 當前文件所在目錄的完整目錄名
  3. 元素的alt和title有什麼異同,選出正確的說法?(B)

    A.不同的瀏覽器,表現一樣
    B.alt和title同時設置的時候,alt作爲圖片的替代文字出現,title是圖片的解釋文字
    C.alt和title同時設置的時候,title作爲圖片的替代文字出現,alt是圖片的解釋文字
    D.以上說法都不正確
    
    解析:
       alt是html標籤的屬性,而title既是html標籤,又是html屬性。title標籤這個不用多說,網頁的標題就是寫在<title></title>這對標籤之內的。title作爲屬性時,用來爲元素提供額外說明信息。例如,給超鏈接標籤a添加了title屬性,把鼠標移動到該鏈接上面是,就會顯示title的內容,以達到補充說明或者提示的效果。而alt屬性則是用來指定替換文字,只能用在img、area和input元素中(包括applet元素),用於網頁中圖片無法正常顯示時給用戶提供文字說明使其瞭解圖像信息。
  4. str.replace(/\s+$/g, '')這個表達式的效果是(D)

    A.去掉str的所有空格
    B.去掉str開頭和末尾的空格
    C.去掉str開頭的空格
    D.去掉str末尾的空格
  5. 下述有關css屬性position的屬性值的描述,說法錯誤的是?(B)

    A.static:沒有定位,元素出現在正常的流中
    B.fixed:生成絕對定位的元素,相對於父元素進行定位
    C.relative:生成相對定位的元素,相對於元素本身正常位置進行定位
    D.absolute:生成絕對定位的元素,相對於static定位以外的第一個祖先元素進行定位
  6. 下面這個JS程序的輸出是什麼:(A)

    function foo() {
       var i = 0;
     return function() {
         console.log(i++);
     }
    }
    
    var f1 = foo(),
     f2 = foo();
    f1();
    f1();
    f2();
    
    A. 0 1 0
    B. 0 1 2
    C. 0 0 0
    D. 0 0 2
  7. 請給出這段代碼的運行結果(C)

    <SCRIPT LANGUAGE="JavaScript">
    var bb = 1;
    function aa(bb) {
     bb = 2;
     alert(bb);
    };
    aa(bb);
    alert(bb);
    </SCRIPT>
    
    A. 1 1
    B. 1 2
    C. 2 1
    D. 2 2
  8. 以下代碼執行的結果(C)

    for(var i=0;i<3;++i){
     setTimeout(function(){
       console.log(i);
     },100);
    }
    
    A. 0,1,2
    B. 1,2,3
    C. 3,3,3
    D. 0,0,0
  9. 下列說法錯誤的是(A)

    A. 設置display:none後的元素只會導致瀏覽器的重排而不會重繪
    B. 設置visibility後的元素只會導致瀏覽器重繪而不是重排
    C. 設置元素opacity: 0後,也可以觸發點擊事件
    D. visibility: hidden的元素無法觸發其點擊事件
    
    解析:
       display:none指的是元素完全不陳列出來,不佔據空間,涉及到了DOM結構,故產生reflow與repaint
       visibility:hidden指的是元素不可見但存在,保留空間,不影響結構,故只產生重繪,但不可觸發綁定事件
       opacity=0:指的是元素不可見但存在,保留空間,不影響結構,並且,如果該元素已經綁定一些事件,如click事件,那麼點擊該區域,也能觸發點擊事件的
  10. 數組arr = [1, 2, 3, 4, 5],以下返回值爲5的是(B)

    A. arr.push()
    B. arr.pop()
    C. arr.shift()
    D. arr.unshift()
    
    解析:
      push:在數組的末尾增加一個或多個元素,並返回數組的新長度。
      pop:  刪除數組的最後一個元素,並返回這個元素。
    
      unshift: 在數組的開頭增加一個或多個元素,並返回數組的新長度。
      shift: 刪除數組的第一個元素,並返回這個元素。
  11. 下列關於HttpCode說法不正確的是(B)

    A. 404:服務器找不到請求的網頁
    B. 302:請求的網頁已永久移動到新位置
    C. 500:服務器內部錯誤
    D. 200:服務器已成功處理了請求
    
    解析:
      • 200:請求被正常處理 
      • 204:請求被受理但沒有資源可以返回 
      • 206:客戶端只是請求資源的一部分,服務器只對請求的部分資源執行GET方法,相應報文中通過Content-Range指定範圍的資源。 
      • 301:永久性重定向 
      • 302:臨時重定向 
      • 303:與302狀態碼有相似功能,只是它希望客戶端在請求一個URI的時候,能通過GET方法重定向到另一個URI上 
      • 304:發送附帶條件的請求時,條件不滿足時返回,與重定向無關 
      • 307:臨時重定向,與302類似,只是強制要求使用POST方法 
      • 400:請求報文語法有誤,服務器無法識別 
      • 401:請求需要認證 
      • 403:請求的對應資源禁止被訪問 
      • 404:服務器無法找到對應資源 
      • 500:服務器內部錯誤 
      • 502:服務器掛了
      • 503:服務器正忙
  12. 以下javascript代碼,在瀏覽器中運行的結果是(A)

    var arrTemp = [1, 2, 3];
    arrTemp.shift(); //[2, 3]
    arrTemp.push(1); //[2, 3, 1]
    arrTemp.unshift(2); //[1]
    var arrNew = arrTemp.concat([1,2]);//[1, 1, 2]
    console.log(arrNew);
    
    A. [2, 2, 3, 1, 1, 2]
    B. [2, 1, 2, 1, 1, 2]
    C. [2, 2, 3, 1, [1, 2]]
    D. [2, 1, 2, 1, [1, 2]]
  13. 運行如下代碼,請問兩處console的輸出結果(D)

    var count = 0;
    var Product = {
      count: 1,
     getCount: function() {
         return this.count++;
     }
    }
    console.log(Product.getCount());
    var func = Product.getCount;
    console.log(func());
    
    A. 1 1
    B. 2 2 
    C. 1 2
    D. 1 0
    
    var Product = {
      count: 1,
      getCount: function( ) {
          return this.count++;
      }
    };
    console.log(Product.getCount());
    var func = Product.getCount;
    console.log(func());
    //輸出:1 NaN
  14. 在大數據量場景下,以下哪種js中字符串連接方式較爲高效(C)

    A. a += b
    B. a = a + b
    C. Array.join()
    D. Array.push()
    
    解析:
      +:新建一個臨時字符串,將新字符串賦值爲a+b,然後返回這個臨新字符串並同時銷燬原始字符串,Array.join()不會新建臨時字符串效率更高
  15. ({} + ‘b’ > {} + 'a')返回值是(C)

    A. a
    B. b
    C. true
    D. false
    
    解析:
      當一個 statement 以 {, function, async function, class, let [ 開始的時候,這些符號將不被解釋成表達式的一部分。
    { 將開啓一個block
    function async function 用於函數定義
    class 用於類定義
    let [ 用於 let [x, y] = z; 形式的變量定義
    {}+'a' 中 ,{} 不會被解釋爲一個空對象(這樣{}+'a' 將成爲一個表達式,{ 開啓了一個 Expression Statement),而是一個空 block。它什麼也不做。+'a' 是一個表達式,結果 NaN。
    {} + 'b' > {} + 'a' 這裏第一個 {} 將被解釋爲一個空 block (同上),但是第二個 {} 並不處在語句的起始,因而會被認爲一個空對象,與'a' 相加的結果是 [object Object]a。 NaN > '[object Object]a' ,結果爲 false.
    ({} + 'b' > {} + 'a') 這時兩個 {} 均不處在起始。於是均被解釋爲空對象。'[obejct Object]b' > '[object Object]a' ,結果爲 true 。

填空題

  1. 寫出一個只匹配英文和數字並只能是英文開頭的正則表達式:

    /^[a-zA-Z]+\d+/
  2. JavaScript中改變this關鍵字指向都有哪些方式:

    apply(obj, arg1, arg2, ...)
    call(obj, [arg1, arg2, ...])
    bind(obj)
  3. Html5手機端適配,怎麼實現1rem表示爲50px:

  4. let copy1 = {x: 1},對copy1實現先拷貝

    //淺拷貝:
       let copy2 = Object.assign({}, copy1);
    //深拷貝:
       let copy2 = function(obj) {
           let copy =  obj instanceof Array ? [] : {};
            for (let i in obj) {
                if (obj.hasOwnProperty(i)) {
                    copy[i] = typeof obj[i] === 'object' ? copy2(obj[i]) : obj[i];
                }
            }
            return copy;
       }
  5. 如何準確判斷一個變量是數組類型(請寫出代碼)

    let a = [1,2,3]
    let test = function(arg) {
        if (arg instanceof Array) {
            return true
        }
        return false
    }
    test(a)

簡答題

  1. 請描述一下cookies,sessionStorage和localStorage的區別

    **相同點** 
    > 1. 都儲存在客戶端
    
    **不同點**
    > 1. 儲存大小
    >  - cookie數據大小不能超過4k
    >  - sessionStorage和localStorage雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大
    > 2. 有效時間
    >  - cookie設置的cookie過期時間之前一直有效,即使窗口或瀏覽器關閉
    >  - sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除
    >  - localStorage 存儲持久數據,瀏覽器關閉後數據不丟失除非主動刪除數據
    > 3. 數據與服務器之間的交互方式
    >  - cookie的數據會自動的傳遞到服務器,服務器端也可以寫cookie到客戶端
    >  - sessionStorage和localStorage不會自動把數據發給服務器,僅在本地保存
  2. 簡述瀏覽器發起一個網絡請求(HTTP請求事務)後,都經歷哪些步驟:

    a. 域名解析
    b. 發起TCP的3次握手
    c. 建立TCP連接後發起HTTP請求
    d. 服務器端響應http請求,瀏覽器得到html代碼
    e. 瀏覽器解析html代碼,並請求html代碼中的資源
    f. 瀏覽器對頁面進行渲染呈現給用戶
  3. 寫一個原型鏈接繼承的例子

    function Elem(id) {
        this.elem = document.getElementById(id);
    }
    
    Elem.prototype.html = function(val) {
        var elem = this.elem;
        if (val) {
            elem.innerHTML = val;
            return this;
        } else {
            return elem.innerHTML;
        }
    }
    
    Elem.prototype.on = function(type, fn) {
        var elem = this.elem;
        elem.addEventListener(type, fn);
        return this;
    }
    
    var div = new Elem('#elem');
    div.html('hello word!');
    
    div.on('click', function() {
        alert('clicked');
    })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章