【面經】2018金山WPS前端筆試題 & 面試題

阿新 • • 發佈：2019-02-04

Q: 通過鍵名訪問物件的成員

下面程式碼輸出了什麼？

var a={},
b={key:'b'},
c={key:'c'};
a[b]=123;
a[c]=456;
console.log(a[b]);

A

答案為456，因為鍵名只能為字串，傳入物件只會被轉為字串[object Object]，a[b],a[c]都等價於a[“[object Object]”]。

Q: 陣列的索引值轉換

控制檯輸出了啥？

var arr = [];
arr['a'] = a; 
console.log(arr.length);
arr['2'] = 2;
console.log 
(arr.length);
arr.length = 0;
console.log(arr);

A

0, 3, [];
‘a’, ‘2’作為arr的索引值都會被自動轉化成整數型別。’a’轉為NaN，存不進去，陣列長度不變。’2’轉為arr，陣列長度就變為3，即便前兩個值沒有被賦值。

T: 字串物件

Q1：考察字串物件的型別

function judge(val) {
    switch(val) {
        case "A":
            console.log(1);
            break;
        case "string" 
:
            console.log(2);
            break;
        case "undefined":
            console.log(3);
            break;
        case undefined:
            console.log(4);
            break;
        default:
            console.log(5);
            break;
    }
}
judge(new String("A"));

A1

5；
new的方式創建出一個object，雖說new String(“A”) == ’A’，但switch語句判定用的是全相等啊，兄dei~

Q2：考察字串變數與字串物件的共性

JavaScript中如何檢測一個變數是一個String型別？請寫出函式實現

A2:

function (v) {
    return v.constructor === String;
}

Q3：字串處理

請用js去除字串空格？

A3:

//去除所有空格
function removeAllSpaceOfStr (str) {
    return str.replace(/\s*/g, "");
}

extend:

//去除兩邊空格(正則、trim)
str = str.replace(/^\s*|\s*$/g, "");
str = str.trim();
//去除左邊空格(正則、trim)
str = str.replace(/^\s*/, "");
str = str.trimLeft();
//去除右邊空格(正則、trim)
str = str.replace(/\s*$/g, "");
str = str.trimRight();

Q4:

如何獲取瀏覽器URL中查詢字串中的引數？

A4:

function getParams () {
    let str = window.location.href.split('?')[1];
    let arr = str.split('&');
    let params = {};
    for (let i = 0; i < arr.length; i++) {
        params[arr[i].split('=')[0]] = arr[i].split('=')[1];
    }
    return params;
}

T： DOM操作

Q1:

怎樣使用原生js新增、移除、移動、複製、建立和查詢節點？

A1:

1）建立新節點

　　createDocumentFragment() //建立一個DOM片段
　　createElement() //建立一個具體的元素
　　createTextNode() //建立一個文字節點

2）新增、移除、替換、插入、複製
　　appendChild() //新增
　　removeChild() //移除
　　replaceChild() //替換
　　insertBefore() //插入
　　cloneChild()

3）查詢
　　getElementsByTagName() //通過標籤名稱
　　getElementsByName() //通過元素的Name屬性的值
　　getElementById() //通過元素Id，唯一性

T：演算法

對於一個排好序的陣列，如果當中有兩個數的和為某個給定的數target，返回true，否則false，事件複雜度O(n) 。

A

function search(arr, target) {
    if (!arr.length) return -1;
    let head = 0;
    let tail = arr.length;
    while(head !== tail && head < tail) {
        if (arr[head] === target) return head;
        if (arr[tail] === target) return tail;
        head++;
        tail--;
    }
    return -1;
}

Q:資料結構

用javascript實現map的資料結構，使得外部只能通過map提供的介面訪問資料

A:

//TODO

Q: 網路協議

列出http協議頭部資訊並簡述其作用。

A

General
- Request URL：請求地址
- Request Method：請求型別
- Status Code：狀態碼
- Remote Address：請求傳送的目標IP地址
Request Headers
- Accept：瀏覽器可接受的MIME型別
- Accept-Charset：告知伺服器，客戶端支援哪種字符集
- Accept-Encoding：瀏覽器能夠進行解碼的資料編碼方式
- Accept-Language：瀏覽器支援的語言。
- Referer：請求頁面url
- Content-Type：內容型別
- Content-Length：請求正文的長度
- User-Agent: 包含客戶端的作業系統、瀏覽器和其它屬性等資訊。
- Host：伺服器主機地址
- X-Requested-With： null為同步請求，XMLHttpRequest為ajax的非同步請求
Response Headers
- Date：響應時間
- Content-Type：傳送給客戶端的實體正文的媒體型別
- Content-length：正文長度
- Cache-control：用來操作快取的工作機制；
- Transfer-Encoding：定義請求的傳輸編碼
- Connection：允許客戶端或伺服器中任何一方關閉底層的連線雙方都會要求在處理請求後關閉或者保持它們的TCP連線。

Q: 設計模式

用js實現一個單例模式

A

var Cat = function() {}

Cat.getInstance  = function () {
    var instance;
    return function () {
        return instance || new Cat();
    }
} ();

Q：網路

從輸入URL到瀏覽器顯示頁面，問瀏覽器其中的工作流程。

A

　　1. 輸入網址。
　　2. 瀏覽器查詢域名的IP地址。
　　3. 瀏覽器給web伺服器傳送一個HTTP請求
　　4. 網站服務的永久重定向響應
　　5. 瀏覽器跟蹤重定向地址現在，瀏覽器知道了要訪問的正確地址，所以它會發送另一個獲取請求。
　　6. 伺服器“處理”請求，伺服器接收到獲取請求
　　7. 伺服器發回一個HTTP響應
　　8. 瀏覽器開始顯示HTML
　　9. 瀏覽器傳送請求，以獲取嵌入在HTML中的物件。

Q：機制

瀏覽器是如何渲染顯示頁面的？

A

流程
- 獲取資源：獲取html文字，逐步解析，遇到外部資源如css、js檔案則發出獲取請求。
- 構建物件模型：瀏覽器會將HTML解析成一個DOM樹，類似的，把css解析成CSSDOM。
- 渲染樹的構建：根據DOM樹和CSSOM來構造 Rendering Tree，tree包含了所有可見內容及其樣式資訊。
- 渲染樹的佈局：顧名思義就是計算出每個節點在螢幕中的位置，輸出一個“盒模型”
- 渲染樹的繪製：將渲染樹中的每個節點轉換成螢幕上的實際畫素。
特性
- 阻塞：默認同步執行的指令碼會阻塞DOM的解析，外部指令碼獲取後會被立即執行，然後再繼續構建DOM。預設情況CSS則會阻塞渲染。
- 渲染流程是自上而下、逐步完成的，為了更好的使用者體驗，渲染引擎將會盡可能早的將內容呈現到螢幕上，並不會等到所有的html都解析完成之後再去構建和佈局render樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網路下載其餘內容。