【20230504】一次面试失败的复盘和自我反思

今天下午去了一个线下面试，笔试+技术面，这是我人生中第一次面着面着心态炸了的面试，结果非常糟糕。现在回想起来，不管是在心态上，还是在基础知识上，我都存在着很多问题。为了直面我自己存在的问题，于是有了这篇复盘文章。

笔试题复盘

下面是在笔试中我回答的不好的题目：

• 什么是防抖和节流，具体怎么实现

• map、forEach 和 for 的区别

• React中setState什么时候是同步的，什么时候是异步的

• 如何做到监听某个组件属性更新时才去调用函数执行

• 说说Vue数据的双向绑定，并说说Model是如何改变View、View是如何改变 Model 的

• 介绍下BFC及其应用

• 异步输出题：

  async function async1() {
  
    console.log("async1 start");
  
    await async2();
  
    console.log("async1 end");
  
  }
  
  async function async2() {
  
    console.log("async2");
  
  }
  
  console.log("script start");
  
  setTimeout(function () {
  
    console.log("setTimeout");
  
  }, 0);
  
  
  
  async1();
  
  new Promise(function (resolve) {
  
    console.log("promise1");
  
    resolve();
  
  }).then(function () {
  
    console.log("promise2");
  
  });
  
  
  
  console.log("script end");
  
  

• 数组扁平化+排序（不能使用数组原生 api）

  var arr = [[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10]

回头看看，这些都是很基础的问题。下面提供上面问题的解答（部分答案来自chatGPT）。

1.什么是防抖和节流，具体怎么实现

这两个函数都是闭包的应用，很常考。

debounce：

function debounce(fn, time) {
  let timer = null;
  return function (...args) {

    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, time);
  };
}

throttle：

function throttle(fn, time) {
  let lock = false;
  return function (...args) {

    if (lock) return;
    lock = true;
    setTimeout(() => {
      fn.apply(this, args);
      lock = false;
    }, time);
  };
}

2.map、forEach 和 for 的区别

三者都可用于数组的遍历，其中map更多用于将一个数组处理成另外一个数组的场景。

至于forEach和for的区别嘛，可以参考：有了 for 循环 为什么还要 forEach？ – 掘金 (juejin.cn)。除了上面文章提及的内容，还有结合async/await使用时的问题：当 async/await 遇上 forEach – 掘金 (juejin.cn)。

3.React 中 setState 什么时候是同步的，什么时候是异步的

在React中，setState有时是同步的，有时是异步的，具体取决于如何调用它。当你在 React 生命周期方法或事件处理程序中调用setState时，它是异步的。这是因为React将所有的setState调用推迟到后续的更新批处理中进行，这样可以减少更新次数并提高性能。在这种情况下，React将更新队列中的所有状态更新合并在一起，然后一次性进行 DOM 更新。

然而，在异步代码中调用setState时，它是同步的。例如，在定时器回调函数中调用setState，React会立即更新状态，而不会等待批处理。

你可以使用回调函数作为setState的第二个参数来处理异步setState的情况。在回调函数中使用最新的状态，而不是依赖于setState的结果。

4.React 如何做到监听某个组件属性更新时才去调用函数执行

在 React 中，你可以使用组件的生命周期方法componentDidUpdate()来监听组件属性的更新，并在属性更新后调用函数执行。

componentDidUpdate()方法会在组件更新后被调用，并且会传入两个参数：prevProps和prevState。你可以在这个方法中比较当前的属性和状态与前一个属性和状态，来确定是否需要调用某个函数。

例如，假设你有一个<Counter>组件，它接受一个count属性和一个onUpdate回调函数。你希望在count属性更新时调用onUpdate函数，你可以在componentDidUpdate()方法中进行比较，如下所示：

class Counter extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.count !== prevProps.count) {
      this.props.onUpdate();
    }
  }

  render() {
    return <div>{this.props.count}</div>;
  }
}

在上面的代码中，我们比较了当前的count属性和前一个count属性，如果它们不相等，就调用了onUpdate回调函数。

当<Counter>组件的count属性更新时，React 会重新渲染组件并调用componentDidUpdate()方法。在方法中，我们检查count属性是否已经更新，如果是，就调用onUpdate回调函数。

需要注意的是，在componentDidUpdate()方法中调用this.setState()会导致无限循环更新，因此应该谨慎使用。

5.说说 Vue 数据的双向绑定，并说说 Model 是如何改变 View、View 是如何改变 Model 的

Vue 中的数据双向绑定是通过数据劫持来实现的。Vue 会在初始化数据时，使用Object.defineProperty()方法将数据模型中的属性转换为“响应式”的，从而在属性被访问或修改时，触发相应的更新操作。这个过程是在 Vue 实例化时进行的，因此，只有在 Vue 实例化后，才能开始双向绑定的工作。

当数据模型中的数据发生变化时，Vue 会自动更新视图。具体来说，当我们改变数据模型中的某个属性时，Vue 会遍历所有使用这个属性的视图，并且更新这些视图中对应的元素的值，从而实现了数据模型到视图的绑定。

6.介绍下 BFC 及其应用

BFC（块级格式化上下文）是CSS中一个很重要的概念，它是指一个独立的块级渲染区域，具有自己的布局规则。BFC 的形成需要满足一定的条件，包括：

• 根元素或包含它的元素的内容；

• 浮动元素（元素的 float 不是 none）；

• 绝对定位元素（元素的 position 为 absolute 或 fixed）；

• 行内块元素（元素的 display 为 inline-block）；

• 表格单元格（元素的 display为 table-cell，HTML 表格单元格默认为这个值）；

• 表格标题（元素的 display 为 table-caption，HTML 表格标题默认为这个值）；

• overflow 值不为 visible 的块元素。

BFC 的应用包括：

1. 清除浮动

在 BFC 中，浮动元素不会影响BFC中非浮动元素的布局，因此可以用BFC来清除浮动。通常将父元素设为BFC，即可清除其子元素的浮动影响。

2. 避免margin重叠

当两个相邻的元素都处于同一个 BFC 中时，它们的垂直margin会发生重叠，这可能会影响布局。可以通过创建新的 BFC 来避免这个问题。

3. 实现自适应两栏布局

可以利用BFC的特性来实现自适应的两栏布局。具体做法是，将左右两个元素都设置为BFC，并设置宽度和浮动等属性，从而实现自适应布局。

4. 防止元素被浮动元素覆盖

在BFC中，浮动元素不会覆盖 BFC 中的其他元素，因此可以利用BFC来防止元素被浮动元素覆盖。

事实上，我对这个概念了解不够深入，仅仅知道BFC可以用来清除浮动……

6.异步输出题

async function async1() {

  console.log("async1 start");

  await async2();

  console.log("async1 end");

}

async function async2() {

  console.log("async2");

}

console.log("script start");

setTimeout(function () {

  console.log("setTimeout");

}, 0);



async1();

new Promise(function (resolve) {

  console.log("promise1");

  resolve();

}).then(function () {

  console.log("promise2");

});



console.log("script end");

下面是输出结果：

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

分析：

• 首先输出：’script start’

• 然后执行async1()函数，输出：’async1 start’

• 接着执行async2()函数，输出：’async2′

• 由于async2()函数中没有异步操作，因此直接返回，继续执行async1()函数

• 在async1()函数中遇到await async2()，此时async1()函数被挂起，等待async2()函数执行完毕

• 执行new Promise()，输出：’promise1′

• 执行console.log('script end')，输出：’script end’

• 然后执行resolve()，接着执行.then()，输出：’promise2′

• async2()函数执行完毕，async1()函数继续执行，输出：’async1 end’

• 最后执行setTimeout()，输出：’setTimeout’

主要难点在于，await后面的代码相当于创建了一个新的微任务执行。

7.数组扁平化+排序（不能使用数组原生 api）

首先是扁平化：

const isArray = (arr) => Object.prototype.toString.call(arr) === '[object Array]'

function flatten(arr) {
  let res = []
  for(let i = 0; i < arr.length; i++) {
    if(isArray(arr[i])) res = [...res, ...flatten(arr[i])]
    else res = [...res,arr[i]]
  }
  return res
}

然后是排序（简单写个冒泡）：

function sort(arr) {
  let tmp = null
  for(let i = 0; i < arr.length; i++) {
    for(let j = i + 1; j < arr.length; j++) {
      if(arr[i] > arr[j]) {
        tmp = arr[i]
        arr[i] = arr[j]
        arr[j] = tmp
      }
    }
  }
}

在面试过程中，由于我是非常抵触直接手写代码的，所以涉及到手写代码的题都没写。当然，在面试中也给面试官教育了，也起了一些口头冲突。回头想想，自己实在是心浮气躁，情商也很低。

面试过程复盘

关于面试，其实这次和面试官的交流谈不上愉快，基本我回答他的一个问题，他的回复都是“你的答案并不是我想听到的，我想听到的是xxx而不是xxx”。作为一个仅仅工作一年多的普通菜鸡前端，我也自知手头项目确实乏善可陈，不过因为之前面试没有遇到过这种场面，所以这次面试我面到一半心态就开始炸了，以至于到后面闹了一些不愉快。

下面先提一下聊项目过程聊到的一些点：

• 请求统一封装：

  • 聊了axios的拦截器处理，以及取消请求的方法

  • 问AbortController的底层逻辑实现，回答不上来（详细的解答参考：中断操作：AbortController学习笔记 – zhoulujun – 博客园）

• webpack优化：

  • 我提了使用swc-loader来增加编译速度，面试官觉得不行，说swc不够稳定不能上生产。

  • 说我没有提到tree-shaking（Webpack 5内部有关于Tree-shaking的一些处理如scope hoisting，不过我寻思着我们聊的是我做了啥呀……）

  • 说我没有提到他想听到的点，如用Webpack做微前端之类的东西，事实上，我只研究了webpack在项目构建层面的东西，这个自然是说不了。

• 业务开发方面：

  • 问了表单是怎么封装的，我提了封装了一个能根据js对象配置去生成表单的组件（事实上也没啥技术含量）。面试官不满意了，说他希望听到关于JSON Schema的应用以及低代码平台的内容。

  • 问了项目中有没有复杂的表单，虚拟表格实现过吗，这个因为没做过也没回答上来。

  • 问了如何实现表单，我就回答了一下Antd表单是怎么实现的，不过还是不满意，说不是自己写出来的东西

  • 问了如何处理有关联关系的表单项（提了使用Antd的useWatch被批了，说只会调库不会自己实现）

在这个难熬的过程和面试官也聊了一些东西，他的意思是他想招做低代码的（岗位jd压根就没写……），然后我也提了下我的看法，因为我目前遇到的场景确实少，以业务开发为主，自然对这些东西接触有限，之后就给批评了。结合前面笔试写的不好的情况，面试官也直接跟我说面试不通过了。在面试过程中由于我心态炸了，回答问题也是有些不耐烦，最后也被面试官指出了面试态度有问题。至此，一场失败的面试结束了。

面试过后，我觉得自己确实问题很大，也在BOSS上托HR向面试官道了个歉。

总结和教训

离职到现在已经有两个月了，由于行情确实不大行，面试机会非常少。这阵子我的心情都是处于一个很down的状态，个人的性格变得有些烦躁易怒，甚至发展到线下笔试都有不耐烦没有写完题的情况。这次的面试算是一个教训，告诉我必须要调整好自己的心态，至少在应对面试这件事上，一定要抱以敬畏和学习的态度去面对，而不是心浮气躁自以为是。

其次是关于面试八股文的问题，八股文里面很多手写题，有些功能我用api很快实现就不管了，实际上自己也不确定如果不使用这些api自己会不会写。然后还有对笔试的抵触问题，这个也是我要去改变的一个点。现在前端面试的话笔试真不少，还要用纸写代码的，所以自己平时得在纸上多练练。

除了这些现有的问题，还有一些对自己项目经历以及未来规划的思考。项目的亮点从何挖掘，如何让自己的项目更加具有深度，当然这些我目前还没有太好的答案，只能说走一步看一步了。