一面糟心，许愿二面

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

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

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

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