大搜車面試總結

面試總結

工做久了有時候也須要出去看看。

前幾天大搜車的hr約了面試，就記錄一下關於此次面試的具體內容。

1、筆試

先填寫了我的信息，第一步就是筆試。

• 哪一種盒模型包含padding
• header中哪一種標記不影響文件的緩存(age, etag, last-modify,cache-control)
• 設計一個tree組件，使用react、或者vue。可無限嵌套，最大程度的去適應各類需求。給出大體思路，參數、回調函數、事件。
• 使一個div寬度100px;高100px;居中至少三種方式(不考慮瀏覽器兼容)
• 說出你在過去項目中最滿意的一部分。
• 存在字符串a、b。找出a是否包含在b中，若是包含多個返回第一個位置，沒有包含則返回-1.如:a='123' b='4512356123' 則返回2。不能使用indexOf、substr等。
• 設計一個plus函數、實現plus(1)(2)()=三、plus(1)(2)(3)()=6。

題目大體是這樣的。細節部分可能有誤差，可是大致的意思是這樣的。針對筆試部分後兩個函數我寫了挺久、只完成了字符串部分，後面手寫確實有點難(多是我太菜了吧)
如下是我回去後給出的答案

1. 哪一種盒模型包含padding。

主要分爲兩種盒模型。標準盒模型、和IE盒模型。

就如圖上表示的，IE模型中width包含了content+padding+border。標準模型中width只包含content。開發者能夠顯示的用box-sizing去設置想要的盒模型。

2.header中哪一種標記不影響文件的緩存(age, etag, last-modify,cache-control)。
age：請求頭中的age表明的意思是當代理服務器用本身緩存的實體去響應請求時，用該頭部代表該實體從產生到如今通過多長時間了。etag:web服務器響應請求時，告訴瀏覽器當前資源在服務器的惟一標識（生成規則由服務器以爲）。Apache中，ETag的值，默認是對文件的索引節（INode），大小（Size）和最後修改時間（MTime）進行Hash後獲得的。Last-Modified：標示這個響應資源的最後修改時間。web服務器在響應請求時，告訴瀏覽器資源的最後修改時間。Cache-Control與Expires的做用一致，都是指明當前資源的有效期，控制瀏覽器是否直接從瀏覽器緩存取數據仍是從新發請求到服務器取數據。只不過Cache-Control的選擇更多，設置更細緻，若是同時設置的話，其優先級高於Expires。

3.設計一個tree組件，使用react、或者vue。可無限嵌套，最大程度的去適應各類需求。給出大體思路，參數、回調函數、事件。
這部分我是根據本身開發的經驗去寫的，純粹是我的經驗。我使用Vue採用Vue提供的slot去作嵌套，這樣提升了組件適應的不一樣需求的能力。採用emit去觸發事件，在tree組件註冊相應的事件來達到交互的目的。

回答的不夠好，僅提供參考

4.使一個寬度100px高100px的div橫向居中至少三種方式(不考慮瀏覽器兼容)

.box{ position:absolute;left: 50%;trasition: translate(-50%, 0) };

.box{ position:absolute;left: 50%;margin-left: -50px; }

.box{ position: absolute;margin: 0 auto; }

5.說出你在過去項目中最滿意的一部分。
是作了一個vue-barrel插件，是UI佈局更加美觀。詳情能夠查看個人一篇文章木桶插件。

6.存在字符串a、b。找出a是否包含在b中，若是包含多個返回第一個位置，沒有包含則返回-1.如:a='123' b='4512356123' 則返回2。不能使用indexOf、substr等。
這是我本身的代碼，多是面試比較緊張吧，一時沒想起來最優的方案，這個複雜度較高，暴力查找.

function findStr(a, b){
    let tmpA = a.split('');
    let tmpB = b.split('');
    let lastIndex = -1;
    let lengthA = tmpA.length;
    let lengthB = tmpB.length;
    
    for( let i = 0; i< lengthB; i++ ){
        let tag = true;
        for( let j =0; j<lengthA; j++ ){
            if( tmpB[i+j] !== tmpA[j] ){
                tag = false;
                break;
            }
        }
        
        if( tag ){
            lastIndex = lastIndex > -1 ?  lastIndex : i;
            break;
        }
    }
    
    return lastIndex;
}

7.設計一個plus函數、實現plus(1)(2)()=三、plus(1)(2)(3)()=6。

這部分我當時沒有答出來，當時只是模糊的記得柯里化函數，沒能手寫出來。

function plus() {

    if (arguments.length === 0) {

        let sum = 0;

        plus.list.forEach((item) => {

            sum += item;

        })

        plus.list = [];

        return sum;

    } else {

        plus.list = plus.list ? plus.list:[];

        plus.list = plus.list.concat(Array.prototype.slice.call(arguments, 0));

        return plus;

    }

}

二面詳情我會再整理