百度面试篇——百度的一面会遇到怎样的题?

悟明 2019-07-01

前言

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

题目

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

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.先总结这么多,想到了再继续补充。

后记

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

相关推荐