一共两次技术面

线上笔试
线上面试

第一次：线上笔试

一共20题，题目分选择题和代码题，选择题有单选题和多选题，选择题主要是css和js的一些基础知识，基础好的容易做，不好的可以看阮一峰的es和JavaScript教程，上面都有

记得有一题css的, 问a和b的宽度（都是400px）

<div class="a">
    <div class="b">b</div>
    <div class="c">c</div>
</div>

.a {
    display: flex;
    width: 800px;
}
.b {
    flex: 1 2 300px;
 }
 
.c {
    flex: 2 1 200px
}

代码题：总的来说还是很简单的，但是后面由于时间没把握好，EventEmitter实现的不好

熟悉事件循环机制就可以做出来，主要是打印console.log的顺序

console.log(1)
let a = new Promise((resolve) => {
    resolve(2)
    console.log(3)
})
setTimeout(() => {
    console.log(4)
}, 0)
console.log(5)
a.then(() => {
    console.log(6)
})
console.log(7)

// 1 3 5 7 6 4

实现一个EventEmitter类，内部有off、emit、on、once功能

class EventEmitter {
  events = new Map()

  on(eventType, handler) {
    if(!this.events.has(eventType)){
      this.events.set(eventType, new Set())
    }
    handler.type = 'on' 
    this.events.get(eventType).add(handler)
  }

  once(eventType, handler) {
    if(!this.events.has(eventType)){
      this.events.set(eventType, new Set())
    }
    handler.type = 'once' 
    this.events.get(eventType).add(handler)
  }

  off(eventType, handler) {
    if(this.events.has(eventType)) {
      if(!handler) {
        this.events.delete(eventType)
      } else {
        this.events.get(eventType).delete(handler)
      }
    }
  }

  emit(eventType, data) {
    if(this.events.has(eventType)) {
      this.events.get(eventType).forEach(handler => {
        handler(data)
        if(handler.type === 'once') {
          this.events.get(eventType).delete(handler)
        }
      })
    }
  }
}

实现一个方法，把树状数据转换成一维数组

function flat(arr = [], parentId = "", result = []) {
  for (let i = 0; i < arr.length; i++) {
    const { id, name, children } = arr[i];
    result.push(parentId ? { id, name, parentId } : { id, name });
    if (children) {
      flat(children, id, result);
    }
  }
  return result;
}

let arr = [
  {
    id: "1",
    name: "1",
    children: [
      {
        id: "1-1",
        name: "1-1",
        children: [
          {
            id: "1-1-1",
            name: "1-1-1",
          },
          {
            id: "1-1-2",
            name: "1-1-2",
            children: [{ id: "1-1-2-1", name: "1-1-2-1" }],
          },
        ],
      },
      {
        id: "1-2",
        name: "1-2",
        children: [
          {
            id: "1-2-1",
            name: "1-2-1",
          },
        ],
      },
    ],
  },
  {
    id: "2",
    name: "2",
    children: [
      {
        id: "2-1",
        name: "2-1",
      },
    ],
  },
];

flat(arr)

第二次：线上面试

笔试通过后就第二天就开始面试了

简单介绍一下自己
问项目，做过哪些内容，最难的是那一块功能
for of 和 for in 的区别
webpack loader 和 plugin 的区别
如何打包发布npm
如何实现深克隆
有没有关注新的前端知识
vue3 通信方式有哪些
讲一下浏览器事件循环机制
浏览器有哪些缓存方式
如何实现两个tab之间的通信

总结：

技术面试不算很难，没有问算法和框架原理（vue、react），都是问怎么用怎么实现比较多，毕竟是一个外包的面试，不会特别深入，但是js和css基础知识需要扎实，多刷一下面试题基本都可以过技术面试，接下来还有几个面试，需要继续刷算法和框架原理

记录最近一次前端面试

一共两次技术面

第一次：线上笔试

第二次：线上面试

总结：