百度前端实习一面凉经

一面糟心,许愿二面

今天的面试除了好多意外,本来约好了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'

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


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


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

#实习##面经##百度##前端工程师#
全部评论
啊感觉好难
点赞 回复
分享
发布于 2020-12-30 10:41
怎么感觉比社招还难
点赞 回复
分享
发布于 2020-12-30 12:40
阿里巴巴
校招火热招聘中
官网直投
我们的面试时间,面试问题,包括顺序都一模一样,面试官也·同样问我要不要喝水上厕所
点赞 回复
分享
发布于 2020-12-30 20:25
难度确实有点高
点赞 回复
分享
发布于 2020-12-30 21:39

相关推荐

点赞 评论 收藏
转发
2 28 评论
分享
牛客网
牛客企业服务