記一個css面試題和一個js算法題

近日在Experian去面了一個angular前端崗位，有兩道題以爲比較有意思並且比較常考，因此拖出來講說：

CSS

官：你怎麼居中一個文本或塊？

我：項目裏大部分狀況下直接用Bootstrap的.text-center便可居中文本，新的v4還提供了.align-items-center和.justify-content-center配合柵格系統便可解決

官：excellent！（鄙視地）那不讓你用第三方庫呢，以下我html裏只有個div，你css居一下？

<div class="target"> </div>複製代碼

我：一般網頁不會直接垂直居中的，左右居中的話常見的方式就是加個margin: 0 auto;固然這個div得有寬度才行。

我：要所有居中能夠把這個塊的位置設置成絕對的，而後移動到父節點的水平垂直一半的位置上。由於本身也有寬高，最後把本身往上和左移動本身長度的一半，這裏用translate就好了。

div {
    background: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}複製代碼

官：嗯～！你有據說過flex嗎，能不能用這個作？

我：新版的bootstrap就是基於flex佈局的，它提供了start center end between around 5 個基礎位置，方便排版。

<div class="container"> <div class="target"></div></div>複製代碼

我：首先，咱們須要個容器，應題目要求這個容器得跟html body同樣寬高，把它的display設置爲flex便可對它的子節點進行佈局了，水平用justify-content，垂直用align-items

.container {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.target {
    background: red;
    width: 100px;
    height: 100px;
}

html, body {
    height: 100%;
    margin: 0; // body默認8px的margin，不重製的話會多出來一個滾動條！
}複製代碼

JS

官：給你一個僅包含數字的無序數組和一個數字（和），找出一對數字使得他們的和是這個提供的數字。i.e. [1,2,3], 3 => 1,2

我：直接倆循環遍歷數組，每次相加對比和，以下

function findPairs(arr, sum) {	for (let i = 0; i < arr.length - 1; i++) {
		for (let j = i + 1; j < arr.length -1; j++) {
			if (arr[i] + arr[j] === sum) {
				return {first: arr[i], second: arr[j]};
			}
		}
	}
    
        return null;
}

// test
console.log(alg([1,2,3], 3))複製代碼

官：寫得很快嘛（奸笑），分析下時間複雜度，兄dei。

我：兩次循環因此O(n^2)。

官：咱們常常要處理幾百萬千萬的數據，你以爲你對你的方法滿意麼？

我：。。。

官：想一想若是把數組先弄成有序的，再去找會不會快些？

我：若是mergeSort的話，首先要花個nlogn時間，而後利用sum的大小屬性一遍循環便可出結果。定義左右兩指針，分別從前日後掃，和從後往前掃，若是兩指針的數字加起來小於sum，那麼表示我須要找比這個和大一點的數，由於是排好序的，因此這個數恰好就是左指針下一個數；同理若是和大於sum就要減少一點，因而移動右指針。O(nlogn)

function findPairs(arr, sum) {
    arr = mergeSort(arr);
    
    const left = 0;
    const right = arr.length - 1;

    while (left < right) {
        if (arr[left] + arr[right] < sum) {
            l++;
        } if (arr[left] + arr[right] > sum) {
            right--;
        } else {
            return {first: arr[l], second: arr[right]};
        }    }

    return null;
}複製代碼

官：還能不能更快，咱們但是有超多人的信用記錄的。

我：（你真的打算要前端去遍歷全部人的信用記錄？擺明了爲難我胖虎）

官：若是把數字存在哈希表裏，你每次取值判斷就不須要循環了，很是快

我：但是js沒有原生的哈希表實現啊，可是js的Map或者object機制很是適合這種狀況。對數組作一次遍歷，遇到每一個元素時作減法，若是減出來的值不在map裏面，我就把減數放進這個map，這樣下次你遇到一個減出來的結果等於這個值的數字時，即匹配成功，直接輸出。由於每次作判斷時只是取引用，不會遍歷因此很快 O(n)

function findPairs(arr, sum) {
    const tempMap = {}; // 或者new Map

    for (let i = 0; i < arr.length - 1; i++) {
        let temp = sum - arr[i];
        if (tempMap[temp]) {
            return {first: temp, second: arr[i]};
        }
        tempMap[arr[i]] = arr[i];
    }

    return null;
}複製代碼