百度前端实习一面凉经

一面糟心，许愿二面

今天的面试除了好多意外，本来约好了10:45开始的，结果我和面试官在十点半的时候都进入了面试房间。
面试官说我可以去喝水上厕所，瞬间感觉这个这个面试官好好。
接下来面试当中，我突然网不太好，面试官小哥哥以为那边网不好，把自己的vpn关了。

分割线~~

首先自我介绍，
我：巴拉巴拉巴拉。
在实验室做过什么项目？
我：巴拉巴拉巴拉
你在项目中使用的什么来发送请求的？
我：巴拉巴拉巴拉
那好我们来看个题吧。
请根据以下css画出box-sizing分别为content-box和border-box的两个盒模型示意图，投屏在画图软件上
```
.block {
  width: 100px;
  height: 100px;
  border: 2px solid #ccc;
  margin: 20px;
  padding: 20px 10px 15px 10px;
  display: block;
}
```
我这道题，大概画了一下，但是该死的紧张我居然想不太起来border-box的实际content了，还是面试官提醒，我才勉强能答出来，自己在底下记得很清楚。那个时候就是想不起来。

-看下一道题吧 ,列出你知道的块状元素和行内元素，谈谈你对html语义化的理解
看见这道题我狂喜，这个题算是我准备比较充分的了，所以说答得还算比较全面。

position: static/relative/absolute/fixed/sticky 各自的特性和定位基点，哪些属性会脱离文档流，脱离文档流后的表现是什么?
这道题也是同样的令人愉悦
请说明px,em,rem,vw,vh,rpx等单位的特性
将一个元素垂直水平居中方式(定宽高、不定宽高等方案，flex, grid)
Javascript有哪几种数据类型？

console log 输出了什么值

const obj = {
dev: 'bfe',
a: function() {
  return this.dev
},
b() {
  return this.dev
},
c: () => {
  return this.dev
},
d: function() {
  return (() => {
    return this.dev
  })()
},
e: function() {
  return this.b()
},
f: function() {
  return this.b
},
g: function() {
  return this.c()
},
h: function() {
  return this.c
},
i: function() {
  return () => {
    return this.dev
  }
}
}
console.log(obj.a())
console.log(obj.b())
console.log(obj.c())
console.log(obj.d())
console.log(obj.e())
console.log(obj.f()())
console.log(obj.g())
console.log(obj.h()())
console.log(obj.i()())

这道题开始就比较炸，开始说的还行，到了后面就自己把自己说晕了，然后就慌了，啥也不记得了。

还是一样的看输出，看完之后让我改进上面的方法去实现和下面的那个一样的效果。
for (var i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 0)
}
for (let i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 0)
}
我这个题答得还行，改进也是写出来了。
实现Array.prototype.flat
flat() 方***按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
语法： var newArray = arr.flat([depth])， depth参数可选，默认为1
```
//示例：
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```
这道题还是写了挺长时间的，刚开始的思路有点问题，面试官给我了点思路，最后算是写出来了，但是还是有点小bug就是会重复。面试官看了之后发现我有个地方传参传错了，大意了啊。

实现classnames
在React中，可以使用className添加CSS class name，其为字符串，可以添加多个class name。

<p className="classname1 classname2">
BFE.dev can help
</p>

但如果class name是动态生成的，写起来就比较麻烦了。

<p
className={`classname1   'classname2' : ''`}>
1234567
</p>

为了解决这个问题，classnames 也许能帮上忙。
classNames()接受任意的参数，其将过滤其中的falsy值，然后生成最终的class name字符串。请实现这样的classNames()

// feature1: string 和 number 的话，直接使用
classNames('BFE', 'dev', 100) // 'BFE dev 100'
// feature2: 其他类型的值被忽略
classNames(null, undefined, true, false) // ''
// feature3: 对象的可枚举属性，如果key是string而且value是truthy的话将被保留。支持嵌套数组
const obj = {cool: '!'}
classNames({BFE: [], dev: true, is: 3}, obj) // 'BFE dev is cool'
classNames(
  [
      'BFE',
      [
          {dev: true},
          [
              'is',
              [obj]
          ]
      ]
  ]) 
// 'BFE dev is cool'

面试官说这道题让我讲讲思路就行，可能也是看出我不太会写吧。

总体上来说这次面试感觉还是很糟糕，许愿二面。

面试官第二天就发消息过来了，挂了，不过经过这次面试学到的知识挺多的。

#实习##面经##百度##前端工程师#