一面 2022/7/28 30min

• 自我介绍
• 项目
• 用ts有啥好处
• 有没有了解近一两年的es6语法？
  • 说了没有去了解哪个语法在哪个时间点出的。说了es6语法
• Map和weakmap区别
• 跨域解决方法，为什么会出现跨域
• 如何写一个工具获取网络请求的时间，不改动其他业务代码。比如使用的是最简单的xhr请求

  // 重写 xhr ，获取请求响应时间
  const trackerXHR = () => {
    // 拿到 XMLHttpRequest
    let XMLHttpRequest = window.XMLHttpRequest
    // 保存原有的open方法
    let XMLOriginOpen = XMLHttpRequest.prototype.open
    // 重写 open 方法 目的是为了保存 methods, url 这个参数的值 用于埋点上报
    // 不能用箭头函数
    // 1. 箭头函数没有 arguments
    // 2. 箭头函数会改变指向 我们需要将 this指向 XMLHttpRequest
    // 3. 箭头函数this绑定的是上一层的this
    XMLHttpRequest.prototype.open = function (methods, url, async) {
      // 将值挂在XMLHttpRequest.logData 中
      this.logData = {
        methods,
        url
      }
      // 执行原有的open方法
      return XMLOriginOpen.apply(this, arguments)
    }
    // 保留原有的send方法
    let XMLOriginSend = XMLHttpRequest.prototype.send
    XMLHttpRequest.prototype.send = function (request) {
      // 重写load、error、abort方法
      // 为什么不修改load、error、abort的原型了呢
      // 因为用户有时候可能不会去调用 load、error、abort 方法，去执行他们的回调
      // 比如 xhr.load、xhr.error、xhr.abort 等等
      // 如果不执行回调 就无法达成上报的目的 但是 send 是一定会执行的
      // 所以放到 send 里 去监听
      const startTime = new Date() // 计算接口的duration, send 时记录请求时刻
      const handle = (eventType) => {
        return () => {
          // 上报 status 不为 0 的错误
          if (
            (eventType === 'load' && this.response.status !== 0) ||
            eventType === 'error' ||
            eventType === 'abort'
          ) {
            const duration = new Date() - startTime
            const log = {
              duration,
              status: this.status,
              statusText: this.statusText,
              url: this.responseURL,
              method: this.logData.methods,
              params: request,
              response: JSON.stringify(this.response || ''),
              type: 'xhr',
              eventType
            }
            // 拿到之后去上报
            console.log(log, 'log----')
          }
        }
      }
      this.addEventListener('load', handle('load'), false)
      this.addEventListener('error', handle('error'), false)
      this.addEventListener('abort', handle('abort'), false)
      return XMLOriginSend.apply(this, arguments)
    }
  }
  trackerXHR()

• 写一个函数 getValue(a, 'a.b.c.d.e.f', 1)，按传的字符串获取所传对象中的值，若没有则返回默认值。其实就是写个lodash get函数
  • 只需要说思路，不用手撕
  • 面试官只给了 'a.b.c.d.e.f' 这个例子，由于前两天抱佛脚看过，所以我扩展了 'a[0].b.c'，'a.0.b.c' 两种情况

    // path 有三种形式'a[0].b.c'，'a.0.b.c'，['a','0','b','c']
    function myLoadshGet(obj, path, defaultValue) {
    if (obj === undefined || obj === null || typeof obj !== 'object') {
      return defaultValue;
    }
    // 把 path 转成数组形式
    let parsePath = Array.isArray(path) ? path : path.replace(/\[/g, '.').replace(/\]/g, '').split('.');
    return parsePath.reduce((pre, cur) => {
      if (cur >= '0' && cur <= '9') {
          cur = Number(cur);
      }
       return pre[cur];
    }, obj) || defaultValue;
    }

  • 面试官提醒了忘记做类型判断后补了判断是否为对象，于是有了下面这题
• 如何判断数据类型
• css写一个居中的圆
• 这个圆要让他隔段时间转一圈怎么用css实现
  • 说了css动画不太熟，后面用js实现了
• 性能优化的指标
  • 说了白屏时间和首屏时间，这个实在了解的不多
  • 面试官说下来可以了解一下 lighthouse Chrome插件
• 反问

二面 2022/8/3 40min

• 自我介绍
• vue diff算法
• 实习用的技术战，react版本
• react 印象最深的有哪些
• vue2和vue3的区别
• 对ts的理解，有什么优势
• 实习间有没有自己打包项目上线
  • 答了没有，公司的流程都很方便。补上了之前自己上线的小程序的流程
• webpack的配置
  • 答了entry、output、loader、plugin（webpack真不会）
• 有没有自己写过 plugin
  • 没有，答了怎么写一个plugin，plugin其实就是一个class，这个class里面必须有一个apply函数
• webpack代码优化有了解吗（为啥一直webpack T T）
• 项目node用什么框架
• 数据库使用了字节的轻服务，介绍一下轻服务
• 实习的项目有什么困难的点，这个项目目前还有做吗
• 讲一下实习项目
• 上面遇到的那个困难怎么解决的
• 简历上的另一个项目是怎么合作的
• 简历上的小程序介绍一下
• 讲一下项目用到的jwt的流程
  • 直接讲了小程序项目里的登陆逻辑
• 平时会关注哪些技术，会不会按专题之类的去学习（面向面经学习hhh）
• 平时开发怎么调试
  • console.log一把梭！！
• 用过什么辅助开发的工具
  • f12。。。hhhh
• 写node的时候如果上线了接口出错怎么查找（大概是这个意思，没太理解）
• 有没做过大型的性能优化（。。。）
• 讲一下http 响应状态码
• 502 和 504 的区别
  • 不会，没了解504
• 有没有了解flutter（。。。）
• 感兴趣的方向
• 反问

HR面 2022/8/7 15min

• 自我介绍
• 通过什么了解oppo的
• 为什么不继续深造
• 第一份工作最想收获到什么
• 实习给你带来了什么
• 公司什么是不可以接受的
• 对加班的看法，你觉得什么是无效的加班
• 反问

15min就完事确实有点没想到，咋感觉在刷kpi，别和暑假实习一样直接秒挂。。。
。。。。。直接秒挂，第二次hr面秒挂了，oppo属实恶心人