前言
金三银四，这个春天，比冬天更寒冷，不是因为别的，而是当下严峻的就业形势，希望这篇文章能给各位读者严冬中送去一些温暖。本文将讲述一次面试百度的惨痛经历，包含我的一些思考。
题目
本文将按照顺序将题目分为三类，分别按照题目、答案、思考的顺序去书写。话不多说，正文开始。
CSS类题目
面试官：例如qq聊天界面（此处图省略），左边一个头像右边一个三角，三角右边是聊天内容，如图：
答：定位，三角形，xxxx。
面试官：那你实现一下三角形，头像与三角形垂直方向居中。
三角形
答案
效果图：
思考
这道题实际上考察的知识点为css盒模型。传统的给矩形加border我们觉得没啥疑问。但是矩形的宽和高为0时候，border会怎么渲染呢？这就是这题的考点。
用一段代码说明这个问题如下：
效果图：
可惜这题我没答出来，一个是因为把border跟border-radius搞混了，
以为有个border-left-top-color这样，
二是平时使用的时候没有注意总结，只是拷贝代码。没有深入了解border。
垂直居中
这个题是想考，左边头像的中心点与右边三角的中心点，在一条线上对齐。
答案
这个题我只想到了margin-top与display:flex两种方案，但是被面试官否掉了。我的思路是margin-top值确保他俩对齐，但是面试官觉得不好，我说display:flex配合align-items:center，也被否了。
思考
这个题不想多说什么，之前做过，但是无奈面试官不认账，各位大佬们有什么想法欢迎评论，这个题需要答案的话，F12审查一下其他web页面怎么做的就好了。
----------------以上就是css全部题目了-------------------
JS类题目
js实现数组分组
输入arr = [1,2,3,4,5,6,7] ; size = 3;
输出 arr = [[1,2,3], [4,5,6], [7]]
答案
function splitArr(arr, size) {
var ret = [],tmp = [],count=0;
for(var i = 0; i < arr.length; i++) {
tmp.push(arr[i]);
count += 1;
if(count === size) {
ret.push(tmp);
tmp = [];
count = 0;
}
}
if(count > 0) {
ret.push(tmp);
}
return ret;
}
// test
var arr = [1,2,3,4,5,6,7];
var ret = splitArr(arr, 3);
console.log(ret);思考
1.定义ret变量用来当函数返回值。
2.遍历数组，挨个数组元素推tmp里，凑够size个往ret里推一次且重置tmp与count。
3.最后如果count>0说明有没凑够size的数组。在往ret里推一次。
4.返回ret。
这个题没什么说的。常规题目。
浮点数加法
0 .1+ 0.2为什么会产生误差？怎么解决误差问题，实现floatAdd(a,b)
答案
因为都用了一种特殊的浮点数表示规则，0.1二进制表示会有精度丢失问题。
floatAdd(a,b)实现如下
// 方法一
function floatAdd(a, b) {
return parseFloat((a+b).toFixed(10));
}
// 方法二
function floatAdd2(a, b) {
// a,b转换为字符串
var aStr = String(a);
var bStr = String(b);
// 取小数点后面的部分，可能为undefined，则设为空串
var aDigit = aStr.split('.')[1] || '';
var bDigit = bStr.split('.')[1] || '';
// 计算为了使他们变成整数的最小倍数
var mult = Math.max(aDigit.length, bDigit.length);
// 同乘以多少倍，就同除以多少倍
return (a * Math.pow(10, mult) + b * Math.pow(10, mult)) / Math.pow(10, mult);
}
// test
console.log(floatAdd(0.1, 0.2));
console.log(floatAdd2(0.1, 0.2));思考
第一次解答采用了第一种方法，是在一本书上看到的方法，被面试官否定了。然后询问了面试官第二种方法可以吗？面试官说那你写下来。属于常规的考题。
特别的fn
实现一个fn(callback, wait, arg1, arg2, arg3)的函数，callback在wait秒后调用, arg1~n为callback参数。
答案
function myFn(callback, fn, ...args) {
setTimeout(() => {
callback(...args);
}, wait);
}思考
当我这样写出代码后，面试官说直接用了...args这样啊。其实我想考的是另个，我秒懂了面试官的意思，给出了另一种写法Array.prototype.slice.call(arguments, 2)。含义就是摘除callback与wait两个参数之后的参数。常规考题没什么说的。
----------以上为记得的js的题目-----------------
项目题目
项目主要是根据简历的内容随机提问。
项目优化所做的努力，如何保证代码的可靠性
我的答案
优化：
webpack懒加载、代码分隔，异步加载。
静态资源CDN
可靠性:
Eslint
思考
面试官看起来对于答案不甚满意，欢迎各位看官补充，给的回答方向大概就是两块，优化与可靠性
小程序踩过哪些坑
对答内容
- 答：textArea自动增高的文字溢出问题。
- 问：那最后怎么解决的。
- 答：官方提了issue无果，改用单行输入。
- 问：如果是移动端怎么实现一个自动增高的输入框。
- 答: contenteditable应该可以吧？
- 问：（忘记怎么问了，大概是否定了）
- 答：我算一下元素宽度，然后监听输入，除以一行能放的字数。
- 问：那每一行字数都不确定呢？字符间距如果被样式改了呢？
- 答：那我没有什么更好的答案了。
思考
面试官建议遇到问题不要逃避。我这属于回答的负面教材。再此建议各位好好准备简历上的内容，一定要挑有解决方案的问题。其实这个是我做小程序时候确实有过经验，不过后来都忘了。被面试官提起，没想到太多，说了一个。很尴尬。
至于怎么实现，网上搜了下一般两种做法，一种是直接使用contenteditable属性，兼容性还可以，使用css加下边框就好了。再一种就是监听textarea的input事件，处理函数就是监听滚动条的高度，有滚动条的高度就设置textarea的高度属性，让滚动条消失。
vue scoped样式覆盖问题
因为简历里提到了覆盖iView组件库样式问题，所以问我如何覆盖的。涉及到一个style标签上加scoped的问题
问答情况
我：
分两种情况，
1.组件在模板所属的dom内，可以覆盖。
2.组件在模板所属的dom外，例如modal会直接追加到body中，覆盖不掉。
面试官答：应该都不行吧。我记得是。
我：那这个下去试试吧，我记得是可以的。
思考
这个问题我下来试了下，是可以的。有小伙伴感兴趣的可以试试。
项目组织问题
面试官问如果说我想吧这个项目某个模块外包出去，那如何组织项目。
对答情况
- 我：直接让他们开发业务组件就好了，开发完后我来给加上路由。
- 面试官：那如果外包方需要访问store呢，需要访问router呢。
- 我： emm..那我没有什么更好的思路，因为我这边一般就是gitflow工作流，没接触过这里，涉猎的比较少。临时遇到这个问题，确实没什么好的想法
- 面试官：emm...百度内部好像有个什么系统。处理这类问题。
思考
这个问题确实是因为自身眼界所限，没有遇到这样场景，也就没有想到这样场景，以及对应的解决方案。不知有哪位老铁知道这种一般怎么处理，不吝赐教哈。
结果
- 面试官：你觉得你答的咋样
- 我：觉得css这里没答好，那个三角形我是做过的，但是给忘了。
- 省略一部分忘记的……
- 面试官：我们总结下，css是有点弱，js还行，项目思考少一些。你等下吧，我去问问二面愿不愿意面
过了一会……
告知我挂了。送走了我。
总结
虽然这次面试挂了，但总结还是需要的，首先说说我的感受：
1.css的问题确实是之前开发过程中没有对问题深入的思考，导致的问题，所以平时写代码还是要多想。
2.简历里体现的东西，要一个一个过一遍，确保当面试官问起来的时候，有话可以聊。
3.项目经历这个东西，作为一个整天围绕一亩三分地做增删改查的boy确实有很多硬伤，所以这也是我出去面试，寻求新机会的初衷。
4.先总结这么多，想到了再继续补充。
后记
虽然这次没过，但是还是期望能加入百度的，当然也挺希望能进阿里、腾讯、头条、美团、滴滴的，求大佬带我飞。谨以此文做一次纪念，纪念自己第一次拿到了百度的面试邀请，然后顺利的被挂掉。如果觉得本文对你有用，欢迎点赞或者收藏，同时欢迎各路大佬在评论区积极探讨上述的问题或者非上述的问题，共同成长