刷前端面經筆記(九)

大翰仔仔發表於2019-02-12

1.JavaScript實現二分法查詢?

二分法查詢,也稱折半查詢,是一種在有序陣列中查詢特定元素的搜尋演算法。 查詢過程可以分為以下步驟: (1)首先,從有序陣列的中間的元素開始搜尋, 如果該元素正好是目標元素(即要查詢的元素),則搜尋過程結束,否則進行下一步。 (2)如果目標元素大於或者小於中間元素, 則在陣列大於或小於中間元素的那一半區域查詢,然後重複第一步的操作。 (3)如果某一步陣列為空,則表示找不到目標元素。 程式碼:

 // 非遞迴演算法
 function binary_search(arr, key) {
   var low = 0,
   high = arr.length - 1;
   while(low <= high){
   var mid = parseInt((high + low) / 2);
       if(key == arr[mid]){
           return  mid;
       }else if(key > arr[mid]){
           low = mid + 1;
       }else if(key < arr[mid]){
           high = mid -1;
       }else{
           return -1;
        }
   }
};

 var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
 var result = binary_search(arr,10);
 alert(result); // 9 返回目標元素的索引值

 // 遞迴演算法
 function binary_search(arr,low, high, key) {
     if (low > high){
       return -1;
        }
     var mid = parseInt((high + low) / 2);
      if(arr[mid] == key){
        return mid;
     }else if (arr[mid] > key){
        high = mid - 1;
        return binary_search(arr, low, high, key);
     }else if (arr[mid] < key){
        low = mid + 1;
        return binary_search(arr, low, high, key);
     }
};

 var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
 var result = binary_search(arr, 0, 13, 10);
 alert(result); // 9 返回目標元素的索引值
複製程式碼

2.有一樓梯共M級,剛開始時你在第一級,若每次只能跨上一級或二級,要走上第M級,共有多少種走法?

這個問題要倒過來看,要到達n級樓梯,只有兩種方式,從(n-1)級 或 (n-2)級到達的。 所以可以用遞推的思想去想這題,假設有一個陣列s[n], 那麼s[1] = 1(由於一開始就在第一級,只有一種方法),s[2] = 1(只能從s[1]上去 沒有其他方法)。 那麼就可以推出s[3] ~ s[n]了。 下面繼續模擬一下,s[3] = s[1] + s[2], 因為只能從第一級跨兩步, 或者第二級跨一步。

function cStairs(n) {
    if(n === 1 || n === 2) {
        return 1;
    } else {
        return cStairs(n-1) + cStairs(n-2)
    }
}
複製程式碼

3.遞迴設計。 實現一個函式,給該函式一個DOM節點,函式訪問其所有子元素(所有子元素,不僅僅是直接子元素),每次訪問子元素的時候,併為其傳一個callback?

//訪問一個DOM tree,是一個經典的深度優先搜尋的演算法

function Traverse(DOM,callback) {
    callback(DOM);
    var list = DOM.children;
    Array.prototype.forEach.apply(list,(item)=>{
        Traverse(item,callback); //遞迴
    })
}
複製程式碼

4.介紹一下對webpack的認識?

WebPack是一個模組打包工具,可以使用WebPack管理模組依賴,並編繹輸出模組們所需的靜態檔案。 它能夠很好地管理、打包Web開發中所用到的HTMLjavaScriptCSS以及各種靜態檔案(圖片、字型等),讓開發過程更加高效。 對於不同型別的資源,webpack 有對應的模組載入器。webpack模組打包器會分析模組間的依賴關係,最後 生成了優化且合併後的靜態資源。 webpack的兩大特色: 1)code splitting(可以自動完成) 2)loader 可以處理各種型別的靜態檔案,並且支援串聯操作 webpack 是以commonJS的形式來書寫指令碼,但對 AMD/CMD的支援也很全面,方便舊專案進行程式碼遷移。 webpack具有requireJsbrowserify的功能,但仍有很多自己的新特性: 1) 對CommonJSAMDES6的語法做了相容 2) 對jscss、圖片等資原始檔都支援打包 3) 串聯式模組載入器以及外掛機制,讓其具有更好的靈活性和擴充套件性,例如提供對CoffeeScriptES6的支援 4) 有獨立的配置檔案webpack.config.js 5) 可以將程式碼切割成不同的chunk,實現按需載入,降低了初始化時間 6) 支援 SourceUrlsSourceMaps,易於除錯 7) 具有強大的Plugin介面,大多是內部外掛,使用起來比較靈活 8)webpack 使用非同步 IO並具有多級快取。這使得 webpack 很快且在增量編譯上更加快

5.關於HTTP2.0的認識

HTTP/2引入了“服務端推(server push)”的概念,它允許服務端在客戶端需要資料之前就主動地將資料傳送到客戶端快取中,從而提高效能。 HTTP/2提供更多的加密支援,HTTP/2使用多路技術,允許多個訊息在一個連線上同時交差。 它增加了頭壓縮(header compression),因此即使非常小的請求,其請求和響應的header都只會佔用很小比例的頻寬。

6.對AMD和Commonjs的理解?

CommonJS是伺服器端模組的規範,nodejs採用了這個規範。 CommonJS規範載入模組是同步的,也就是說,只有載入完成,才能執行後面的操作。 AMD規範則是非同步載入模組,允許指定回撥函式。 AMD推薦的風格通過返回一個物件做為模組物件,CommonJS的風格通過對module.exportsexports的 屬性賦值來達到暴露模組物件的目的。

7.mongoDB和MySQL的區別?

MySQL是傳統的關係型資料庫,MongoDB則是非關係型資料庫 mongodbJSON結構(二進位制)進行儲存,對海量資料儲存有著很明顯的優勢。 對比傳統關係型資料庫,NoSQL有著非常顯著的效能和擴充套件性優勢,與關係型資料庫相比,MongoDB的優點有: ①弱一致性(最終一致),更能保證使用者的訪問速度: ②文件結構的儲存方式,能夠更便捷的獲取資料。

8.講講304快取的原理?

伺服器首先產生ETag,伺服器可在稍後使用它來判斷頁面是否已經被修改。 本質上,客戶端通過將該記號傳回伺服器,要求伺服器驗證其(客戶端)快取。 304HTTP狀態碼,伺服器用來標識這個檔案沒修改,不返回內容,瀏覽器在接收到個狀態碼後,會使用瀏覽器已快取的檔案。 客戶端請求一個頁面A。 伺服器返回頁面A,並在給A加上一個ETag。 客戶端展現該頁面,並將頁面連同ETag一起快取。 客戶再次請求頁面A,並將上次請求時伺服器返回的ETag一起傳遞給伺服器。 伺服器檢查該ETag,並判斷出該頁面自上次客戶端請求之後還未被修改,直接返回響應304(未修改——Not Modified)和一個空的響應體。

9.用node模擬客戶端發起請求?

var http = require("http");
var request = http.request({
    host:"localhost",
    port:"8080",
    path:"/request",
    method:"post"
},function(res){
    res.on("data",function(chunk){
        console.log(chunk.toString());
    });
});
request.write("user=zhang&pass=111");
request.end("請求結束");//結束本次請求
複製程式碼

10.CommonJS 中的 require/exports 和 ES6 中的 import/export 區別?

CommonJS模組的重要特性是載入時執行,即指令碼程式碼在 require的時候,就會全部執行。 一旦出現某個模組被”迴圈載入”,就只輸出已經執行的部分,還未執行的部分不會輸出。 ES6 模組是動態引用,如果使用 import 從一個模組載入變數,那些變數不會被快取,而是成為一個指向被載入模組的引用,需要開發者自己保證,真正取值的時候能夠取到值。 import/export 最終都是編譯為require/exports 來執行的。 CommonJS 規範規定,每個模組內部,module 變數代表當前模組。 這個變數是一個物件,它的 exports屬性(即module.exports)是對外的介面。 載入某個模組,其實是載入該模組的module.exports屬性。 export 命令規定的是對外的介面,必須與模組內部的變數建立一一對應關係。

歡迎關注

相關文章