悲喜交加的前端面试

在如此恶劣的这经济大环境下，勇敢的试水还在招聘的公司，将近一个月的时间，四家公司的面试，有喜有悲，让我不得不感叹，大城市的房价真的是太贵了，愿此时此刻在读这篇文章的你能够找的满意的工作。

用友

1.js的数据存储？

答：说明白堆栈。

2.如何实现一个深拷贝？

答：递归。

3.数组返回本身的方法都有哪些？push返回什么？

4.Object.assign 是深拷贝吗？

答：不是。多层就不是了。

5.如何遍历一个树？

5.如何遍历一个一维数组成为一个树？

{
                   menuId: 1,
                   name: "系统管理",
                   parentMenu: null
               },
               {
                   menuId: 2,
                   name: "系统管理",
                   parentMenu: null
               },
               {
                   menuId: 3,
                   name: "系统管理",
                   parentMenu: 1
               },
               {
                   menuId: 4,
                   name: "系统管理",
                   parentMenu: 1
               },  {
                   menuId: 5,
                   name: "系统管理",
                   parentMenu: 2
               },
               {
                   menuId: 6,
                   name: "系统管理",
                   parentMenu: 5
               },
               {
                   menuId: 7,
                   name: "系统管理",
                   parentMenu: null
               }
           ]）
复制代码

答：

function getTree(arr) {
          var arrs = []
          arr.forEach((item)=>{
              if (!item.parentMenu) {
                  arrs.push(item)
              }
          })
          return arr.reduce((h, m) => {
              if (m.parentMenu) {
                  foo(h, m)
              }
              function foo(arr, cur) {
                  arr.forEach(item=>{
                      if (item.menuId === cur.parentMenu) {
                          if (!item.children) {
                              item.children = []
                          }
                          item.children.push(cur)
                      } else if (item.children) {
                          foo(item.children, cur)
                      }
                  })
              }

              return h
          }, arrs)

      }
复制代码

6.你们在工作中哪些地方用到了树型数据？

答：权限控制。 7.vue如何实现双向数据绑定？

答：主要就说说defineProperty

二面

二面主要就是聊了聊业务，然后就是谈钱。

同程艺龙

1.vue的项目如何想转成小程序的，有什么思路？

答：将vue项目三部分拆分把。

2.你们在项目中如何使用axios？

答：就是分层调用，然后做了下全局拦截。

3.vue的生命周期有哪些？常用的有哪些？

4.列表的key有什么作用？

答：能够在操作列表数据的时候优化计算。

5.讲一下你们的权限控制是如何实现的？

1.你在项目开发中所负责的部分？

2.你是如何做技术选型的？

答：要看业务需求，时间，人员的技术掌握情况。

3.vue和react区别？

4.说一下你们如何对性能进行优化？

答：举了一个实际情景的例子。

5.你在项目中遇到过哪些问题？

答：请看其他文章。

6.你平时都是怎么学习新知识的？

答：看掘金

7.rn和flutter的性能哪个好？为什么？

答：flutter

8.你们是如何收集用户操作习惯的？

答：这个真没做过。。

9.你有什么问题想问的吗？

VipKid

一面

1.说一下你比较感兴趣的知识？

2.数组的map方法用ts如何定义参数类型？

答：简单的写了下参数和返回值的类型，然后面试官说你这不是和没写一样。。。

3.解释一下ts的泛型？

答：大概就是动态类型把。

4.vue在数据发生变化的时候是不是只更新对应的dom，而不改变其他？是怎么做的？

答：大概说了下 虚拟dom 和 diff算法。

5.实现一个函数，传入一个数字，返回一个包含小于该数字的所有质数的数组？

答：for循环这个数字，然后将质数放到一个数组里，在这个循环里面循环这个质数的数组，看看能不能整除。

6.实现一个函数，将给定数组[1,2,2,3,3,3,4]输出成[[2, 2], [3,3,3]](如果相邻的数字是重复的，放在一个数组里)？

答：

function fooRe(arr) {
          return arr.reduce((h,m,i,a)=>{
              if (h.length===0) {
                 var itemArr = []
                  itemArr.push(m)
                  h.push(itemArr)
              } else if (h[h.length-1].indexOf(m)>-1) {
                  h[h.length-1].push(m)
              }else {
                  if (h[h.length - 1].length === 1) {
                      h.splice(h.length-1,1)
                  }
                  if (i === a.length - 1) {
                      return h
                  }
                  var itemArr = []
                  itemArr.push(m)
                  h.push(itemArr)
              }
              return h
          }, [])
      }
复制代码

7.输入一个url到能看见网页内容这个过程的几个关键节点是什么？

8.你工作中遇到的问题有什么？

9.工作之外遇到过什么技术问题？

答：请看其他文章。

二面

1.介绍一下你自己？

2.你是如何安排你和小组成员之间的工作的？

3.关于工期的评估你是怎么做的？哪个部分是最耗时的？

4.看你用到了react和vue的技术栈，他们的区别是什么？和jq比哪个渲染效率高？他们究竟在解决什么问题？

答：大概就是前端工程化的问题。

5.你们是如何优化性能的？

6.看你在做rn和flutter的调研，结果是什么？

7.你们有什么交互复杂的情景，或者你遇到过的交互复杂的情景？这个情景在技术实现上有什么难点？

答：说的是携程机票的例子。

8.关于动画你了解多少？

人人

一面

1.vue是如何实现双向数据绑定的？

2.vuex的作用是什么？

3.你们发送请求是如何做的？

4.vue的生命周期都有什么？我想请求一个本地的文件要在哪发送请求合适？

5.在开发过程，静态资源引入不进来需要怎么处理？

答：放到static里面

6.session和cookie的区别？

7.实现一下new和instanceof？

8.了解promise吗？如何让他中止.then?

9.为什么js中null是Object？

10.实现一个person.execute().sleep(3000)过3000ms之后执行execute方法？如果没有execute方法直接执行sleep也要实现和刚才一样的效果，怎么实现？

答：

// machine('ygy').execute()
      // start ygy
      // machine('ygy').do('eat').execute();
      // start ygy
      // ygy eat
      // machine('ygy').wait(5).do('eat').execute();
      // start ygy
      // wait 5s（这里等待了5s）
      // ygy eat
      // machine('ygy').waitFirst(5).do('eat').execute();
      // wait 5s
      // start ygy
      // ygy eat
      和这个题类似。
    // 答案
       function machine(name) {
              return new Person(name)
          }

          class Person{
              constructor(name) {
                  this.name = name
                  this.list = ['']
              }
              async execute (){

                  const str = `start ${this.name}`;
                  if (!this.list[0]) {
                      console.log(str);
                  }
                  else {
                      this.list.splice(1,0,()=>{
                          return new Promise(resolve => {
                              setTimeout(()=>{
                                  console.log(str);
                                  resolve()
                              }, 0)
                          })
                      })
                  }
                  if (this.list.length !== 0) {

                      for (let i = 0; i < this.list.length; i++) {
                          if (this.list[i]) {
                              await this.list[i]()
                          }
                      }
                  }
              }
              do (type) {
                  this.list.push(()=>{
                      return new Promise(resolve => {
                          setTimeout(()=>{
                              console.log(`${this.name} ${type}`)
                              resolve()
                          }, 0)
                      })
                  })
                  return this
              }
              wait(num) {
                  this.list.push(()=>{
                      return  new Promise(resolve => {
                          setTimeout(()=>{
                              console.log(`wait ${num}s`)
                              resolve()
                          }, num*1000)
                      })
                  })
                  return this
              }
              waitFirst(num) {
                  this.list.pop()
                  this.list.unshift(()=>{
                      return  new Promise(resolve => {
                          setTimeout(()=>{
                              console.log(`wait ${num}s`)
                              resolve()
                          }, num*1000)
                      })
                  })
                  return this
              }
          }
复制代码

后面那问题直接执行异步执行构造函数就行了

11.讲一下事件循环？

答：执行栈和事件队列。

12.说一下如何实现一个发布订阅？

class EventBus {
        constructor() {
            this.event = {}
        }
        on(type, fn) {
            if (!this.event[type]) {
                this.event[type] = fn
            }
        }
        emit(type, msg) {
            this.event[type](msg)
        }

    }


    const eve = new EventBus()

    eve.on('test',function (res) {
        console.log(res)
    })


    eve.emit('test','haha')
复制代码

超简单的一个。

13.路由的两种模式？区别是什么？

答：hash和history，后者需要后台做处理。

很多问题的答案没写，有些是重复的，有些是开放性的，有些在我的其他文章里面，

总结

这四家面试是投了将近一个月的结果，应该都只能算是中级前端的水平把，前三家基本技术上都通过了，最后一家一面没过，面的其实还不算难，但是对细节要求比较高，面了2个多小时，感觉还是挺遗憾的。不过整体来说，面试的收获不小，能够更加看清自己的不足，有些东西确实掌握的没有那么到位，还需要继续学习。如有大佬路过，还请指导一二。

最后，依然在等offer中。。。 - . -!|||