oppo-前端-提前批一二面，HR面秒挂（ke tui！）

一面 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;
}