大搜车面试总结

面试总结

工作久了有时候也需要出去看看。

前几天大搜车的hr约了面试，就记录一下关于这次面试的具体内容。

一、笔试

先填写了个人信息，第一步就是笔试。

• 哪种盒模型包含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)()=3、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)()=3、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;

    }

}

二面详情我会再整理