总体来说比较顺利吧，除了hr的问我优点是什么，我没好意思答上来之外，其他的全部回答了，自我感觉也不错

一面

项目

  • 你在项目里面的角色，你在里面是怎么做的？
    • 做前端开发人员和后端开发人员
    • 讲述了项目的背景
    • 讲述了自己项目遇到的难点，比如大量数据的渲染问题
    • 讲述了自己在分工合作中的角色
  • 用过vue吗？
    • 用过，不过是查文档使用的

react相关

虚拟diff讲一下，还有class组件和function组件的区别

  • 虚拟diff是基于虚拟dom的一个算法。虚拟dom是react自己维护的一个对象，这个对象可以和真实dom的元素一一对应。react可以基于虚拟dom的变化来改变真实dom，并且尽量进行更少的操作。虚拟diff算法就是用于快速找出和上一次的虚拟dom的异同，并基于上一次的dom进行高效的修改操作。

    虚拟diff算法是这样实现的：虚拟diff是让新旧虚拟dom对象进行同层遍历，一旦发现节点不同，则将对整个节点及其后面的子节点全部删除，并重新添加。哪怕你只是跨层级的交换对象，也会导致后面的元素删除。

    当然，这样是有一定的弊端的，如果在同层节点上面，只进行节点的顺序修改，但按照上述发现不同就立刻删除的操作，是不合适的。因此引入了一个key机制，key机制就可以用于发现同层之间是否只是节点的顺序改变，进而不直接删除和添加

  • class组件和function组件的区别，在前期，class组件和function组件之间的区别是class组件是有状态和有生命周期的，因此class组件的功能性是很强大的，而function组件仅仅只是用于展示。但是呢，class组件有一个缺点，那就是代码量较重，而且不便于维护，因此在选择组件的时候，通常都是在业务上判断该组件是否需要状态，如果不需要状态，就选用函数组件。但是随着业务的发展，函数组件可能真的需要状态和生命周期了，这个时候要改换class组件是不便于维护的，因此这时候就有了hooks的诞生。hooks让函数组件也有了像类组件一样的状态和周期，而且代码量少，便于维护

setState的工作机制讲一下

  • 讲到了异步机制
  • 讲到了有两种方法传入，一种是直接传入，一种是函数回调传入，函数回调的变量就是之前的状态

讲一下数组的方法

  • 数组的方法有，map，forEach，filter，splice，pop，push，shift，unshift，includes等
  • 用过reduce吗？回答了少用，但是大概知道是怎么做的，它是根据里面一个回调函数，以前一个元素和后一个元素作为变量传入，返回一个数，这样就会不断减少数组里面的个数

讲一下ES6里面常用的方法

  • 提到了解构赋值还有箭头函数的this
  • 面试官就开始问了箭头函数的this和普通函数的this有何区别：箭头函数是没有自己的this的，箭头函数的this取决于它所在的作用域，因此，这是不可以this换绑的，另外，箭头函数的this因为没有换绑的方法，所以导致了它不可以使用构造函数

在这里，给面试官扩展了一下，在react中用了箭头函数的好处：在react中，如果我想要写一个点击触发事件，如果这个事件在函数内部不是箭头函数的话，那么就需要进行换绑操作，这样是较为繁琐的，当事件越来越多，越来越复杂的时候就不是很好了，但是用了箭头函数就可以轻松解决换绑的问题，因为箭头函数的this始终指向着它的函数内部的this，因此不用换绑，可以减少将近一倍的操作

写一下url转化对象

面试官对这里很满意，因为在这里，?a=1&a=2&b=3也可以变成{a: [1, 2], b: 3}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function format_ (url) {
    let query = url.split('?')[1];
    let object_ = {};
    let keyAndValueArray = query.split('&');
    for (let item of keyAndValueArray) {
        let keyAndValue = item.split('=');
        let key = keyAndValue[0];
        let value = keyAndValue[1];
        if (object_[key]) {
            if (object_[key] instanceof Array) {
                object_[key].push(value)
            } else {
                object_ = {
                    ...object_,
                    [key]: [object_[key], value]; 
                }
            }
        } else {
            object_ = {
                ...object,
                [key]: value
            }
        }
    }
}

面试官：你有什么问我的吗？

  • 对本人的评价：还行，技术扎实，项目经验丰富，代码书写也十分规范，除了语言表达需要加强之外没有任何问题
  • 公司用的什么框架比较多：用react多【那问我vue干嘛？】

二面

讲一下虚拟dom的机制

  • 讲到了虚拟dom是js维护的一个对象，和真实dom上的元素节点有着一一对应的关系

  • 虚拟dom是通过diff算法，来判断是否进行对该节点的变化渲染

  • 虚拟dom并不比直接操作真实dom快，但是它将一个文档对象用了一个js对象来描述，本质上可以利用这个js对象，来实现一些跨平台的功能

讲一下计算机网络的7个层

  • 被我万象天引，引到http了
  • 讲了http1.0 1.1 2.0 3.0 之间的区别

写两道题，金额变换和url转化对象【带哈希】

比较简单，就不多赘述了

hr面

简要介绍一下你的项目：注意，她当时想要的是非技术讲解，也就是业务介绍

全程聊天一样，问的比较多的就是对工作地点是怎么考虑的。

还有会问你，你的优点和缺点是什么