面试分享：专科半年经验面试阿里前端P6+总结(附面试真题及答案)

前言

先介绍一下本身的状况吧

• 成都青城山下某大学毕业，专科，软件测试专业毕业
• 22岁，15年出来实习，工做经验接近三年，以前主要作后端写PHP，本身喜欢瞎折腾，从去年六月份开始研究前端，算下来前端经验半年多

年末因为种种缘由想换一份工做，但因为太忙，没认真搞简历，也没怎么复习基础，致使不少原本会的都没敢往简历上写。因而写了一个简版的简历挂在Boss直聘上，准备年过完再认真筹备这件事情。

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

如下是阿里面试过程

第一轮 电话面试

1. 自我介绍

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

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

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

3. 说下React的生命周期

   实例化

   • getDefaultProps
   • getInitialState
   • componentWillMount
   • render
   • componentDidMount

   存在期

   • componentWillReceiveProps
   • shouldComponentUpdate
   • componentWillUpdate
   • componentDidUpdate

   销毁时

   • componentWillUnmount

4. React方法中，调用事件处理方法(里面要用到this)怎么调用

   this.foo.bind(this)
   复制代码

5. 接问题4，为何须要bind(this)

   做用域的问题，foo() {} 与 const foo = () => {}里面的this做用域不同，foo() {}里面使用外部成员，须要bind(this)，直接使用的this做用域仅在该方法内部

6. 接问题4，能不能不使用bind(this)

   • 可使用箭头函数
   • 可使用lodash-decorators里面的Bind装饰器

7. 装饰器的原理

   语法糖，实则调用Object.defineProperty，能够添加、修改对象属性

8. 本身实现一个通用方法，作到不须要使用bind与装饰器达到问题4的目的

   柯里化 + apply，详细过程不赘述...

9. 闭包里面的this做用域

   内部函数的this指向外部包裹它的做用域

10. React render作了什么

    主要分首次渲染与更新来讲，说的比较多，不赘述，网上react源码分析一大堆...这期间顺带提到了利用redux-saga在shouldComponentUpdate时所作优化，以及本身的开源项目

11. 说说xss与csrf，怎么防止

    • xss：跨站脚本攻击，若是不过滤执行了js代码，可能致使cookie泄露等。防止：过滤
    • csrf：跨站请求伪造，挟制用户在当前已登陆的Web应用程序上执行非本意的操做。防止：设置token、写操做用post、JSON API禁用CORS、禁用跨域请求、检查referrer

12. Ajax的原理，你日常怎么发送网络请求的

    • 经过XMLHttpRequest/ActiveXObject新建Ajax请求
    • 经过onreadystatechange注册回调函数
    • 使用open、setRequestHeader、send结合发送请求
    • 日常发送网络请求：用next作同构应用时，使用isomorphic-fetch发送请求，若是只是客户端发送请求时，使用axios

13. 有三个元素，第一个与第三个宽度都为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>
    复制代码

14. 讲讲box-sizing

    • 标准模式：width与height指的是内容区域的宽高，增长padding、border、margin会影响整体尺寸
    • 怪异模式：width与height指内容区+padding+border，增长padding、border不会影响整体尺寸

15. 作项目有没有遇到什么坑

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

16. 你以为搭建EKL有那些难点

    相关服务器搭建却是没什么难点，我以为使用EKL最麻烦的是写grok match正则，匹配不一样的日志，须要不一样的正则，不过写到后面也习惯了，还OK

17. 讲讲印象比较深的后端项目

    以前实习时，作智能硬件项目，是一个宠物智能项圈，能记录宠物的运动数据，硬件每隔一段时间会发送大量的陀螺仪与加速计数据到服务端，经过swoole创建tcp，接受二进制数据，而后将接受到的数据经过map reduce处理...

18. 停一下，你讲处处理大数据用map reduce，那为何不用redis之类的

    我我的以为应该是当时团队比较小，须要一个快速且简单的解决方案，因此map reduce正是咱们所须要的，redis我也知道，可使用zset，求和很方便

19. 说说mysql的事务

    BEGIN、事务回滚ROLLBACK、事务提交COMMIT

20. 说说你最满意的业务项目

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

21. 说说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)
复制代码

欢迎小伙伴们在评论区贴上本身的答案哦😀

第三轮 电话面试

主要谈到本身所开源的两个前端项目，这固然是我最喜欢的地方，遇到本身喜欢的东西根本停不下来，balabala说了太多（生活中个人话不多，属于比较内向的那种，哈哈），还有一些职业发展啊、我的想法啊之类的...

遗憾的是三面挂了，给的反馈是话太多，说不到重点。其实如今回想起来，我的以为三面应该是我表现最好的一面，当时面完以为稳过了，哈哈😀。由于谈的全是我了解的东西，随便一个问题，我均可以说上几分钟，但也正是这个缘由致使了面试失败，说的太多也不必定是好事，有时候须要简洁，直击重点。

结语

很幸运一个专科生以半年的前端经验能得到阿里的面试机会，结局虽挂了，但也不是由于技术缘由，心里仍是很欣慰的，还有阿里的面试官都很nice，面完也会及时的反馈，当你紧张的时候会给你留时间调整，结局没过到也会给建议与鼓励。最后各位程序猿看官，丰富技术的同时不要忘了提高本身的表达能力哦😝