百度前端面试经历（2015年10月）

匿名网友发布于: 2015-10-29 00:00:00

阅读 162 收藏 0 点赞 0 评论 0

面试百度，一面就被刷了，虽然确实有些受打击，但仔细想想，有谁一开始就成功的呢？我还是第一次参加这么大型的面试呢，也算是长了见识，积累了经验，没关系，爬起来再战！在这里回忆一下面试的经历，总结一下还记得的面试题吧。

面试地点是在上海的一家酒店，进入酒店大厅有一个牌子，写着“百度面试”之类的指示，旁边坐着两个应该是HR的漂亮姐姐，走过去填了基本信息，拿着表格到等候区等待。HR叫到名字之后跟着她到一个很大的大厅，面试就在这里进行。里面是一排一排的小桌子，每张桌子后面坐着面试官，前面的位置就是给各interviewee的，interviewer和interviewee面对面坐着，一人面一人，总之场面十分“壮观”，让人有点紧张。

我坐下后，还以为要自我介绍（之前特意准备了一大段的自我介绍，然而并没有用上），结果面试官只是让我介绍一下自己的项目经历，我就介绍了自己学校里加入的团队，团队的工作，具体的项目，说得磕磕巴巴的，他问我具体用到哪些技术，我说操作DOM用jQuery, 自适应用CSS媒体查询和bootstrap栅格系统，用smarty模板引擎。。。

接下来是考察技术水平。

说一说JS的简单数据类型有哪些？我的回答是：Null, Undefined, Number, Boolean, String, Object六个，然后又说“不对，String好像不是”，他问为什么，我说String属于Object（JS和JAVA弄混），但又不确定然而答案应该是：Null, Undefined, Number, Boolean, String五种，Object不属于基本数据类型。String直接量属于String类型，但是new String(“322”)属于Object。
```
> var foo = "foo"
undefined
> var bar = new String("bar");
undefined
> foo
"foo"
> bar
String
> typeof foo
"string"
> typeof bar
"object"
```
JavaScript数据类型相关知识点总结
说说==和===的区别。我：==会进行类型转换后再做比较，===不会。
怎么转换？举个例子吧，null==undefined吗？我：等于。
为什么？是null转成undefined还是undefined转成null？我：（想了很久）不知道。答案：undefined派生自null
{} == {} 吗？我：不等于。因为对象是引用类型，只有当他们指向内存中同一块区域时才相等。答案：确实不等于。
```
> var i = {};
undefined
> var j = {};
undefined
> i == j
false
> i === j
false
```
原始值的比较是值的比较；对象的比较并非值的比较：即使两个对象包含相同的属性及相同的值，它们也是不相等的。我们通常将对象称为引用类型（reference type），以此来和JavaScript的基本类型区分开来。依照术语的叫法，对象值都是引用（reference），对象的比较均是引用的比较： 当且仅当他们引用同一个基对象时，它们才相等。
NaN == NaN吗？我：等于。答案：不等于。NaN不等于任何数，包括它自己。唯一能使x !== x成立的的条件就是x的值为NaN。
手写代码：写一个函数，给数组去重这题做得很烂，确实没想到好的方法。不过现在已经懂了，基本思路：创建一个对象，遍历目标数组，以目标数组的值作为新对象的key, 值都初始为true. 因此可以通过检查某个key是否已存在相应的值来判断当前元素是否是重复元素，如果是，用delete操作符把它删掉，但这样的结果是把数组在该位置的值设为undefined。所以delete所有重复元素后要再遍历一次，把有效元素复制到一个新数组中，最后返回该新数组。

See the Pen wKqXzx by Chris (@zhanziyang) on CodePen.
这两个程序的运行结果分别是什么：A：
```
var test = "Hello, world";
function a() {
  alert(test);
  var test = "Hello, test";
}
a();
```
B:
```
var test = "Hello, world";
function a() {
  alert(test);
  function test() {
    console.log("Hello, test");
  }
}
a();
```
我的回答：A – 弹出“undefined”，因为函数里面的声明提前; B – 弹出“Hello, world”,但是不确定，因为忘记了函数声明语句是否与变量声明有一样的提前效果。答案：A的回答正确，B的回答错误，B应该是alert出test函数的打印形式(test.toString(), 打印整个函数代码)。

函数定义表达式与函数声明语句
手写代码：写一个函数，传入一个DOM节点的id，输入它所有父辈元素的元素名列表，如
```
<div>
  <div>
    <p>
      <img src="" alt="" id="image">
    </p>
  </div>
</div>
```
传入“image”，输出”img, p, div, div”（分隔符随意，这里用逗号）当时我的脑子不知道出了什么毛病，这么简单的程序我竟然用上了递归！！！递归？？？WTF!总之是fucked up了唉。。。

再尝试一次，发现如此简单。。。一个while循环搞定。以下代码用click事件点击节点取代传入id选择器，但是逻辑是一样的： <

See the Pen Parent Nodes List by Chris (@zhanziyang) on CodePen.

下面这三个程序的运行过程中页面分别是怎样的效果？A:

function a() {
    var elem = document.querySelector("body");
    elem.style.background = "red";
    elem.style.background = "green";
}
a();

应该是先变红再变绿没错。但是页面上看不出来变化，因为执行得太快了。如果在red那一行设置断点，就可以看到的确是先变成了红色，再变成绿色。

function a() {
    var elem = document.querySelector("body");
    elem.style.background = "red";
    alert("stop");
    elem.style.background = "green";
}
a();

先变红，alert的时候保持红，alert关闭后变绿，alert会产生阻塞

function a() {
    var elem = document.querySelector("body");
    elem.style.background = "red";
    setTimeout(function() {
        elem.style.background = "green";
    }, 0);
}
a();

变红，然后变绿，但是比A慢：setTimeout会在其后的非异步代码执行完后开始计时。

什么是异步？它有什么效果？JavaScript异步编程学习小结
说一下跨域有哪些方法？JavaScript跨域方法总结
CSS选择器有哪些？按照优先级说出，并说明计算优先级的方法。
说一下块级元素和行内元素的区别。
举例说明有哪些块级元素，哪些行内元素？
考查CSS, 如何把一个设置好固定高度的div内的文字垂直居中？我的说的答案是：vertical-align: middle;，显然是错的。
```
<div><span>asdjfksajdfksjksd</span></div>
```
```
div {
  height: 400px;
  line-height: 400px;
}

span {
  display: inline-block;
  line-heigth: normal;
  vertical-align: middle;
}
```
这里的关键是让div的line-height和height相等，文字就会垂直居中。span里设置的是使多行的文字line-height恢复正常的hack。

ALSO: Centering in the Unknown – CSS Tricks

各种居中方法总结

经验总结

如果实在不确定，就直接说不确定或者不懂，不要拼命挣扎。
练习还很不够，平时还需多写写demo，并定期总结。
想到什么就说什么，不要害怕说错了，做自己。
手写代码的时候不要慌，想好了再写，没说限制时间就慢慢来。不懂API更不要慌，面试官能够理解，主要的是思路。
问“项目用到什么技术”时，记得说自己用过React和Require，不仅仅是Ajax, jQuery, Bootstrap, 媒体查询, Smarty。

published from:https://github.com/zhanziyang/blog/blob/c65e82d0f5481daa5226fe8f1e9b492c5c7145eb/source/_posts/%E7%99%BE%E5%BA%A6%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E7%BB%8F%E5%8E%86.md

评论列表正在加载评论...

文章目录