记一个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;
}复制代码