重点强调

大佬略过就好了，公司是位于三线城市，目前处于上市前期招人，比较重视产品运营以及C++开发，其实前端的部分比较少，不过面试流程还是比较全面的，因此这里拿出来给那些只有一年左右经验的小伙伴，以及希望进大厂的小伙伴一点心理准备，当然这次面试其实也是收获了很多，想来还是值得认真复盘一下。

过程

面试总共有五轮，主要给大家说下流程，当然对于那些大佬们则不必较真了，博主也还是一个菜鸡。

第一轮 笔试

笔试主要是有两个部分，一个是价值观笔试，主要就是考察你对于互联网的一个敏感度，比如，会问你抖音老板是谁，有什么短视频之类的。这些其实自己都有个印象，但是需要你完整的说出来的时候，可能就是想不起来，博主当时就是这样的情况，有印象，但是就是不确定，当然也可能是因为博主平时还是没有过多关注这些，这也是本次面试给了自己一个警醒的地方吧。

另外的笔试则是专业笔试， 侧重还是前端基础的部分，下面主要说说这部分的内容吧。

1. 当元素浮动时，元素的display属性变成了什么值？ 博主平时业务代码写的比较多，还真就没有关注这样的问题，只要实现就完事了，当时写的inline属性，后面面试官也给我提了这个问题，是说block，自己还争论了一番，这里自己写了代码测试一下：

<div style="width: 100%;height: 100%;">
    <span style="width: 100px;height: 100px;border: 1px solid #f2f2f2;">我是浮动元素</span>
</div>

众所周知了，span为行内元素，元素高度由内容撑开，所以我们设置的宽高都是不起作用的，再来看看我们在span上面加上float: left;属性后：

好了，我们设置的宽高起作用了。所以如果想要突破现有的瓶颈就不能只去关注实现，还需要留意原理，这样才能遇到问题时，轻松找到原因。

2. ['1','2','3'].map(parseInt)的结果？ 这道题大家应该都有见过吧，虽然自己也清楚，但是写的时候，还是有疏漏，搞不清楚parseInt的进制问题，所以这里拿出来再次清楚的分析一下。 这道题其实考察的是map和parseInt的方法，map方法中的回调函数包含三个参数，currentValue、index、array，因此传递给parseInt的参数实际有三个:

// 当前项的值，当前项的索引以及当前的数组三个参数
parseInt(currentValue,index,arr)
parseInt('1',0,arr)
parseInt('2',1,arr)
parseInt('3',2,arr)

再根据parseInt的第二个参数为转换数字的基数，基数为0时，默认十进制转换，基数小于2或者大于36，则parseInt返回NaN，0则是按照十进制转换，1和2因为都小于2，得到的结果都是NaN，所以最后的结果就是

[1,NaN,NaN]

3. 前端用到的排序算法 这里只是问了排序算法的名称，并没有让我手写排序算法，但是面试复盘，我们还是将排序算法写出来，并且彻底弄明白，因为此前博主对排序算法的双层循环一直没有理解透彻，这次也是借着机会搞清楚。

这里只说下几个常见的排序算法，冒泡排序、选择排序、插入排序、快速排序。

• 冒泡排序

冒泡排序核心就在于两两进行比较，如果后面的项小于前面的项，则交换位置，这样每一轮下来，则可以确定右边较大的项，并且每一轮需要遍历的次数也会减一。

const bubleSort = arr => {
    let len = arr.length
      // 数组长度大于1时，才会进行比较
      // 外层循环后，确定右边较大的值，这样则需要循环的次数为len次
    for (let i = len;i > 1;i--) {
        // 内层循环两两比较，第一次需要遍历的次数为除去自身为len-1
        // 每次外层循环，确定一个较大的值，则内层需要遍历的次数减1
        // 外层可以写成递减的遍历，内层循环的次数随外层次数减1
        for(let j = 0;j < i - 1;j++) {
          if (arr[j] > arr[j + 1]) {
            let temp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
            // 用ES6数组解构，也可以这样
            // [arr[i], arr[j]] = [arr[j], arr[i]]
          }
        }
    }
    return arr;
}

• 选择排序

选择排序实现的思路就是从第一项开始，和其他每一项做比较，这样每次循环下来，可以确定左边较小的值，这样每次循环的次数减一。

const selectSort = arr => {
        let len = arr.length
        // 从数组第一项开始，与剩下的每一项做比较
        // 最后一项的时候其他项已经比较完了，所以总共需要循环len-1次
        for(let i = 0;i < len - 1;i++) {
            // 从第一项开始与剩下项的每次比较
            // 即从开始，与剩下每项的比较
            for(let j = i;j < len;j++) {
                if(arr[j] > arr[i]) {
                    [arr[i], arr[j]] = [arr[j], arr[i]]
                }
            }
        }
    return arr
}

• 插入排序

插入排序的实现思路和选择排序相反，选择排序是先找到较大的值，都排列在数组右边。而插入排序是先找到较小的值，排列在数组的左边。

const insertSort = arr => {
    const len = arr.length
    // 以第一项为基准，从第二项开始和左边的值比较
    for (let i = 1;i < len;i++) {
        // 根据外层循环开始的值i为基准，比较左边的值，则每次比较j-1
        for(let j = i;j > 0;j--) {
          if(arr[j] < arr[j - 1]) {
            [arr[j - 1], arr[j]] = [arr[j], arr[j - 1]]
          }
        }
    }
    return arr
}

• 快速排序 快速排序的实现思路个人觉得是最容易理解的一个，就是我们从数组中找到一个基准值，按照这个基准值将数组分成两个数组，再将分成的数组继续递归下去

const quickSort = arr => {
      // 递归出口条件
      if (arr.length < 2) return arr
      // 这里删除了数组的第一项，因此后面concat的时候需要加上这一项
      const current = arr.splice(0, 1)
      let leftArr = [],rightArr = []
      // 遍历数组，如果小于基准值放入左边数组，大于则放入右边
      for (let i = 0;i < arr.length;i++) {
        if (arr[i] < current) {
          leftArr.push(arr[i])
        } else {
          rightArr.push(arr[i])
        }
      }
      // 这里继续递归分割的数组，需要注意要将之前删除的current的值加上
      return quickSort(leftArr).concat(current, quickSort(rightArr))
}

其他笔试的部分都是前端很基础的题目，例如基本类型有哪些，display的值有哪些，所以这里就不赘述了，接下来就说说技术面的过程。

第二轮 技术面

技术面基本面试官就是对照你简历上面说的哪些技术点以及参与的项目等等进行询问，这里问到了vue的生命周期方法，响应式原理等等，还问了之前笔试题目中的浮动问题，当然这个我回答错了，面试官也是给我指了出来，另外则是问到了浏览器打开多标签之间的通信问题，我只回答了postMessage，回去之后也查了资料，发现其实还有很多方法，诸如localStorage、webSocket等等都能实现页面间的通信。

最后问了一个比较发散的问题，就是前端如何去优化上万条数据的展示性能。关于这个问题，一开始自己的想法就是使用分页加载这样的方式，但是他好像对这个回答并不是很满意，然后依然回去查了一下资料，发现有时间分片的方法，就是使用requestAnimation的API来渲染数据，这样可以避免出现闪屏等体验差的现象，另外则是有虚拟列表方式来实现，这块博主知道的不多，也就不误人子弟了。

第三轮 五人面

这里五人面就是未来可能是你的同事、上级，HR这些人组成的一个面试阵容，其实主要还是考察你的应变能力以及价值观这部分的事。这块感觉自己面试的时候做的并不好，因为一般开始的时候，都会做一个自我介绍，感觉这里自己可以做的更好一点，突出自己的一个好的性格等，而不是一味简单的介绍自己多大，来自哪里，什么学校这样的。大家可以结合自己的经历，让自己的表达看起来更加有自信，有吸引力一些。

第四轮 主管面 第五轮 BOSS面

其实到这里差不多整个面试流程就走的差不多了，剩下的只要不是表现的太差劲，基本就确定了，虽然这次面试难度不大，不过博主我还是要从中学习到更多的东西，这不根据他们的笔试考察的关于this指向问题，回去在网上看到了这样的题目，和大家分享一下

var count = 20;
var test = {
    count: 40,
    init: function() {
        function Go() {
            // this.count = 45
            console.log(this.count)
        }
        Go.prototype.count = 50
        return Go
    }
}
var t = test.init()
t()
new (test.init())()
// 问：上述代码的执行结果，以及如果去除上面的注释部分的执行结果

这题主要考察this以及原型的用法，一开始看到这题，就被这种嵌套给弄糊涂了，但是仔细分析了一下，发现还是非常清晰的，有兴趣的小伙伴可以一起来讨论一下哟。

尾声

郑重声明：以上内容可能在很多人眼里比较简单，不过还是希望记录下来给自己一个总结，也希望能帮助到那些经验不太丰富的小伙伴们。此次面试因为个人原因，还是最后没有去，如果有小伙伴想要了解，也可以留言给我。