专科毕业的我既然得到了阿里的面试机会？专科面试阿里前端P6凉经（总结）

Posted 2021-09-05 不爱码字的程序员-

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了专科毕业的我既然得到了阿里的面试机会？专科面试阿里前端P6凉经（总结）相关的知识，希望对你有一定的参考价值。

前言

博主17年毕业于重庆某专科学校，17年出来实习，之前一直在写php后端，自己比较喜欢瞎折腾，从去年的七月份开始研究前端，算下来前端也是有个一年经验了吧。

由于种种原因想要换一份工作，但由于平时太忙，没怎么认真搞过简历，也没怎么复习基础，导致很多会的也没敢往简历上面写。然后就写了个简版的简历挂在BOSS上，准备过段时间再认真筹备下这件事。

令我意外的是，一周竟收到八条阿里的面试邀请，看了网上前辈的一些心得：阿里三个月内只能应聘一次，于是选了两个心仪的部门投了简历，其中一个内推完没下文，多半是学历没过。

面试过程

第一轮电话面试

自我介绍

balabala....，好久没面试过，自我介绍居然显得很紧张，说了一些简历上没有的东西，比如之前写PHP、用Swoole做智能硬件通讯啊之类，以及为什么写前端啊，balabala...

会ES6吗，什么是解构赋值？直接举了个例子

const { a, b, c } = { a: 'aa', b: 'bb', c: 'cc' }
复制代码

说下React的生命周期

实例化
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
存在期
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
销毁时
- componentWillUnmount
React方法中，调用事件处理方法(里面要用到this)怎么调用
```
this.foo.bind(this)
复制代码
```
接问题4，为什么需要bind(this)

作用域的问题，foo() {} 与 const foo = () => {}里面的this作用域不一样，foo() {}里面使用外部成员，需要bind(this)，直接使用的this作用域仅在该方法内部
接问题4，能不能不使用bind(this)
- 可以使用箭头函数
- 可以使用lodash-decorators里面的Bind装饰器
装饰器的原理

语法糖，实则调用Object.defineProperty，可以添加、修改对象属性
自己实现一个通用方法，做到不需要使用bind与装饰器达到问题4的目的

柯里化 + apply，详细过程不赘述...
闭包里面的this作用域

内部函数的this指向外部包裹它的作用域
React render做了什么

主要分首次渲染与更新来说，说的比较多，不赘述，网上react源码分析一大堆...这期间顺带提到了利用redux-saga在shouldComponentUpdate时所做优化，以及自己的开源项目
说说xss与csrf，怎么防止
- xss：跨站脚本攻击，如果不过滤执行了js代码，可能导致cookie泄露等。防止：过滤
- csrf：跨站请求伪造，挟制用户在当前已登录的Web应用程序上执行非本意的操作。防止：设置token、写操作用post、JSON API禁用CORS、禁用跨域请求、检查referrer
Ajax的原理，你平常怎么发送网络请求的
- 通过XMLHttpRequest/ActiveXObject新建Ajax请求
- 通过onreadystatechange注册回调函数
- 使用open、setRequestHeader、send结合发送请求
- 平常发送网络请求：用next做同构应用时，使用isomorphic-fetch发送请求，如果只是客户端发送请求时，使用axios

有三个元素，第一个与第三个宽度都为100px，中间元素占用剩余空间，怎么做到中间元素随着浏览器宽度的变化而变化

<div className="main">
    <div className="div-1"></div>
    <div className="div-2"></div>
    <div className="div-3"></div>
    <style jsx>{`
      .main {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: space-around;
      }
      .div-1,.div-3 {
        min-width: 100px;
        height: 100vh;
      }
      .div-2 {
        width: 100%;
        height: 100vh;
      }
    `}</style>
</div>
复制代码

讲讲box-sizing
- 标准模式：width与height指的是内容区域的宽高，增加padding、border、margin会影响总体尺寸
- 怪异模式：width与height指内容区+padding+border，增加padding、border不会影响总体尺寸
做项目有没有遇到什么坑

最近做的这些项目项目也没有遇到什么大坑，印象很深的是之前实习搭建EKL中央日志服务器的时候，被一个时间问题坑了一天，EKL收集的日志时间与服务器的时间（时区）不一致，导致收集不到日志
你觉得搭建EKL有那些难点

相关服务器搭建倒是没什么难点，我觉得使用EKL最麻烦的是写grok match正则，匹配不同的日志，需要不同的正则，不过写到后面也习惯了，还OK
讲讲印象比较深的后端项目

之前实习时，做智能硬件项目，是一个宠物智能项圈，能记录宠物的运动数据，硬件每隔一段时间会发送大量的陀螺仪与加速计数据到服务端，通过swoole建立tcp，接受二进制数据，然后将接受到的数据通过map reduce处理...
停一下，你讲到处理大数据用map reduce，那为什么不用redis之类的

我个人觉得应该是当时团队比较小，需要一个快速且简单的解决方案，所以map reduce正是我们所需要的，redis我也知道，可以使用zset，求和很方便
说说mysql的事务

BEGIN、事务回滚ROLLBACK、事务提交COMMIT
说说你最满意的业务项目

说了一个next.js的触屏版同构项目，项目中使用到了prefech预先加载，以及next的动态加载，体验相当的快，用nprogress展示滚动条，在next.js还没有发布5.0版本/解决style-jsx中使用less、sass问题的时候，自己用postcss解决了，整个项目使用flexible + rem做响应式，自己改写了video-react组件，兼容触屏版，还有一些自认为不错的业务思想不赘述...
说说rem与em的区别

rem是根据根的font-size变化，em是根据父级的font-size变化

一面面试的时候时不时顺带表现一下自己，根据面试官的问题回答时顺带提了一下看过的开源项目，比如react(redner过程)、next(postcss解决style-jsx编写less、isomorphic-fetch的使用等)、ant pro(lodash-decorators的使用)等

第二轮笔试

1.实现destructuringArray方法，达到如下效果

// destructuringArray( [1,[2,4],3], "[a,[b],c]" );
// result
// { a:1, b:2, c:3 }
复制代码

2.需要通过threshold参数控制调用函数频率

const yourFunction = function(func, threshold) {
 // 请实现
}
const triggerSearch = yourFunction((val) => {
  const {
    onSearch
  } = this.props
  onSearch(val)
}, 300)
triggerSearch(searchText)
复制代码

我的答案（可以先不看，自己现实一下）

// 第一题
const targetArray = [1, [2, 3], 4];
const formater = "[a, [b], c]";
const formaterArray = ['a', ['b'], 'c'];

const destructuringArray = (values, keys) => {
  try {
    const obj = {};
    if (typeof keys === 'string') {
      keys = JSON.parse(keys.replace(/\\w+/g, '"$&"'));
    }
    
    const iterate = (values, keys) =>
      keys.forEach((key, i) => {
        if(Array.isArray(key)) iterate(values[i], key)
        else obj[key] = values[i]
      })
      
    iterate(values, keys)
    
    return obj;
  } catch (e) {
    console.error(e.message);
  }
}

console.dir(destructuringArray(targetArray,formater));
console.dir(destructuringArray(targetArray,formaterArray));

// 第二题
const yourFunction = function(func, threshold) {
  let timeOut;
  return function() {
    if (!timeOut) {
      timeOut = setTimeout(() => {
        timeOut = null;
        func.apply(this, arguments)
      }, threshold)
    }
  }
}

const triggerSearch = yourFunction((val) => {
  const {
    onSearch
  } = this.props
  onSearch(val)
}, 300)
triggerSearch(searchText)
复制代码

欢迎小伙伴们在评论区贴上自己的答案哦