前端实习生面试总结(一）

谁借莪１个温暖的怀抱￠ 2022-05-20 01:05 260阅读 0赞

今天去面试了一个公司的前端实习生岗位，特意记录下，为下次面试做点经验准备，废话不多说，直接上题目。

*  解析一个逆波兰式

function isOperator(op) { 
      if (op.search('[0-9]+') >= 0) {
        // 表示这是一个数字
        return 0
      }
      else if (['+', '-', '*', '/'].indexOf(op) >= 0) {
        // 表示为一个合法的操作符
        return 1
      }
      else{
        // 表示为一个非法操作符
        return 2
      }
    }
    
    math_op = {
      '+': (first, second) => first + second,
      '-': (first, second) => first - second,
      '*': (first, second) => first * second,
      '/': (first, second) => {
        if (second == 0) {
          throw new Error('第二个数字不能为零')
          return 
        }
        if (first % second != 0){
          return (first/second).toFixed(5)
        } else {
          return (first/second)
        }
      }
    }
    
    function rpn(rpnStr){ 
      let rpnArr = rpnStr.trim().split(' ')
      let len = rpnArr.length
      if (len == 1) return rpnArr[0]
      let arr = []
      let i
      for (i = 0; i< len; i++) {
        let item = rpnArr.shift()
        try{
          if (isOperator(item) == 0) {
            arr.push(Number(item))
          }
          else if (isOperator(item) == 1) {
            let second = arr.pop()
            let first = arr.pop()
            arr.push(math_op[item](first, second))
          }
          else if (isOperator(item) == 2) {
            throw new Error('非法操作符')
          }
        } catch(e) {
          console.log(e.message)
          return 
        }
      }
      if (i != len){
        return 
      }
      if (arr.length != 0) {
        if (arr.length == 1) {
          return arr[0]
        } else {
        console.log('缺少操作符，此时栈中情况如下')
        return arr
        }
      }
    }

*  Vue生命周期  
    `beforeCreate`,`created`,`befoeMount`,`mounted`,`beforUpdate`,`updated`,`beforeDestroy`,`destroyed`,分为组件实例创建，模板编译挂载，数据更新，实例销毁  
    [实例][Link 1]，按F12看生命周期(只看到实例创建和挂载)  
    `app.message = 'updated'`,查看数据更新  
    `app.$destroy`  
    `beforeDestroy`，在销毁前调用，此时Vue实例还在，`destroyed`,啥都没有了

> beforeCreate,可以加loading  
> created, 结束loading,自执行函数  
> mounted, 发起后端请求  
> beforeDestroy, 确认是否删除  
> destroyed, 可以清一些定时器类的  
> 参考[这位兄台的][Link 2]

*  Mysql中主键与外键的区别  
    
    
     *  主键，唯一标识一条记录，不能重复，不能为空，保证数据完整性
     *  外键，该表的外键是另一张表的主键，可以重复，可以为空，用来和其他表建立联系  
        
        
        > 问题：为什么要设置外键，可以通过`where`语句查询也是一样?  
        > 当删除了设置外键的主键之后，所有的外键都会被自动删除，例如：论坛上帖子和回复，在回复上设置外键为帖子的id,当帖子被删除后，回复也会被自动删除
 *  当在浏览器地址栏输入一个URL按enter后发生了什么
    
    1.  向DNS服务器查询ip地址
    2.  浏览器根据ip地址与目标服务器在端口80建立TCP/IP连接
    3.  获取相应的html代码
    4.  渲染html代码
 *  拓展：前端优化
    
    1.  减少http请求，合并文件、图片
    2.  浏览器缓存技术,Last-Modified或者Etag,验证本地是否为最新的，返回304则使用本地，否则下载新版本，or设置缓存过期时间
    3.  文件使用GZIP进行压缩
    4.  脚本放底部，样式放首部，尽量外联JS、CSS
 *  但是当你ping www.baidu.com 时得到的ip却不是同一个,引出Nginx负载均衡
    
     *  轮询（默认），根据请求次数，将每个请求均匀分配到每台服务器
     *  最少连接，将请求分配给连接数最少的服务器，Nginx会自动统计
     *  Ip hash，通过散列函数得到一个HASH值，分配到特定服务器
 *  浏览器实时数据刷新
    
     *  轮询方式实现数据实时更新，通过Ajax实现(每隔一段时间发一次)，缺点是造成服务器较大负载
     *  ajax长连接，客户端发请求，服务器查询有没有新数据，没有新数据就阻塞这个请求，直到有新数据或者超时，客户端收到请求返回结果后立刻再发一次请求
     *  HTML5 Web Socket

今天大致就是这样，发挥的不太好，但从此次面试中可以看出对于前端的要求是越来越高了，需要对网络、算法、Linux、数据库都要有所了解，也对于以后的面试有了一次经验准备。

[Link 1]: https://ctum.github.io/vueLifeCycle/
[Link 2]: https://segmentfault.com/a/1190000008010666