前言

金三银四，这个春天，比冬天更寒冷，不是因为别的，而是当下严峻的就业形势，希望这篇文章能给各位读者严冬中送去一些温暖。本文将讲述一次面试百度的惨痛经历，包含我的一些思考。

题目

本文将按照顺序将题目分为三类，分别按照题目、答案、思考的顺序去书写。话不多说，正文开始。

CSS类题目

面试官：例如qq聊天界面（此处图省略），左边一个头像右边一个三角，三角右边是聊天内容，如图：

答：定位，三角形，xxxx。
面试官：那你实现一下三角形，头像与三角形垂直方向居中。

三角形

答案

<style>
.triangle{
    width: 0;
    height: 0;
    border: 10px solid black;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
</style>
<div class="triangle"></div>

效果图：

思考

这道题实际上考察的知识点为css盒模型。传统的给矩形加border我们觉得没啥疑问。但是矩形的宽和高为0时候，border会怎么渲染呢？这就是这题的考点。
用一段代码说明这个问题如下：

<style>
    .triangle{
        position: relative;
        top: 100px;
        left: 100px;
        width: 0;
        height: 0;
        border: 50px solid black;
        border-top-color: rgb(250, 0, 0);
        border-bottom-color: #f0f;
        border-left-color: #00f;
        border-right-color: #ff0;
    }
</style>
<div class="triangle"></div>

效果图：

可惜这题我没答出来，一个是因为把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.先总结这么多，想到了再继续补充。

后记

虽然这次没过，但是还是期望能加入百度的，当然也挺希望能进阿里、腾讯、头条、美团、滴滴的，求大佬带我飞。谨以此文做一次纪念，纪念自己第一次拿到了百度的面试邀请，然后顺利的被挂掉。如果觉得本文对你有用，欢迎点赞或者收藏，同时欢迎各路大佬在评论区积极探讨上述的问题或者非上述的问题，共同成长