前端面试

面试考评

面试准备
候选人考评点
具体考评内容项

1. 技术热情。我面试人的时候一般很少用“提问式面试”，不会刻意提一个技术问题让你去解决然后搞得对方紧张兮兮，我主要靠引导，会引导出一些技术话题来，例如一些热门话题，一些技术热点难点，一些新工具。
2. 做事态度。今天中午我还跟朋友出去吃饭的时候谈起这个话题。创业公司有时候真的就是个坑，需要面对很多不如意，例如薪资、福利或者是业务流程之类的问题，面对这些问题你的态度是怎样的？为什么离开上一个公司？
3. 学习总结能力。例如谈到某个技术的时候，我会问一下，学这个是为了做什么？什么时候学的，如何学习的。又或是问一些“平常看什么书？什么时候看？从什么渠道了解最新的知识？
4. 分析解决问题的能力。问他在前公司做过什么项目，如何做的，使用了什么技术，是怎么考虑的，遇到了什么问题如何解决的之类的问题。
5. 技术经验和成长潜力。包括 技术广度和深度方面的经验，项目管理经验，架构经验工具化经验开发流程经验，协调管理经验。我一般会给应届生讲一些知识点，有的面试者会充满兴趣，问这问那，或者试着自己给出解决方案。遇到从未接触过的需求或无法解决的问题时怎么处理

知识点

html

1. html5新特性
2. websocket理解和使用
3. 浏览器模型常见对象
   window、history、xhr、location
4. Cookie、sessionStorage、localStorage的理解和区别
5. 页面dom渲染过程，重流和重绘
6. 文件上传实现

css

1. 行内元素与块级元素区别
2. flex布局
3. css预处理器less、sass
4. css3新特性
5. 伪元素before和after的用法
6. display、float、position的关系
7. 盒模型
8. 垂直居中方法：
   margin 0 auto
   margin和绝对定位计算
   flex布局
9. 上下两个div设置margin为20px，两个div的间距是多少，为什么

js

1. es6新特性
2. promise异步和async/await
3. 浅拷贝和深拷贝的理解，实现深拷贝
4. dom事件流，事件委托
5. 跨域的理解和解决方法
6. Array对象的一些常用方法
7. js数据类型：undefined、null、boolean、number、string、object、function、array
8. jquery链式调用实现原理
9. 防抖节流，如：
   监听一个输入框的文本变化，变化时调用接口，如何优化实现当输入停顿一段时间才调用接口
10. 如何判断一个变量是数组类型还是对象类型
11. for in for of forEach map的区别
12. 模块机制，amd和commonjs
13. this对象和bind,call函数使用
14. proptype原型对象的理解，实现一个方法，传入一个string类型的参数，然后将string的每个字符间加个空格返回

spacify('hello world') // => 'h e l l o  w o r l d'
'hello world'.spacify();
String.prototype.spacify = function(){
  return this.split('').join(' ');
};

13. 函数申明与函数表达式的区别

// 函数声明
    function funDeclaration(type){
        return type==="Declaration";
    }
// 函数表达式
    var funExpression = function(type){
        return type==="Expression";
    }

Javascript 中函数声明和函数表达式是存在区别的，函数声明在JS解析时进行函数提升，因此在同一个作用域内，不管函数声明在哪里定义，该函数都可以进行调用。而函数表达式的值是在JS运行时确定，并且在表达式赋值完成后，该函数才能调用。

14. 考察侯选人是否理解参数（arguments）对象。定义log，然后它可以代理console.log的方法。

function log(msg)　{
  console.log(msg);
}
function log(){
  console.log.apply(console, arguments);
};

15. 上下文的理解,如何确保可以访问到count

var User = {
  count: 1,
  getCount: function() {
    return this.count;
  }
};

console.log(User.getCount());
var func = User.getCount;
console.log(func());
// 1和undefined。

var func = User.getCount.bind(User);
console.log(func());

16. 函数式编程,实现函数multi(2)(3)(4)=24

function multi(n){
  var fn = function(x) {
    return multi(n * x);
  };
  fn.valueOf = function() {
    return n;
  };
  return fn;
}
multi(1)(2)(3)(4) == 24; // true

vue

1. vuex的原理
2. vue-router传参和监听变化
3. 过滤器和指令的使用，是否使用过全局过滤器
4. 组件通信方式了解几种？
   props传递
   event.emit,on
   bus组件
   vuex
5. 计算属性compute和侦听器watch，可否修改compute里的值，怎么改
6. slot插槽，slot-scope使用

react

1. 创建组件的方式
   createClass、stateless function、extend Component/PureComponent
2. redux工作流程
3. 组件生命周期
4. react-router-v4理解
5. 高阶组件

webpack

1. 介绍一下webpack的工作原理
2. 简单介绍一下webpack里面的配置项
3. 使用过哪些webpack的插件和loader
4. webpack中如何配置实现多入口页面

小程序

1. 谈谈你对小程序开发的理解
2. 小程序点击按钮传参是怎么做的
3. 小程序开发中是否用了框架，ui组件样式怎么写的

业务相关

1. 项目文件结构，代码规范
2. 权限控制如何实现，页面级和按钮功能级
3. 登录流程
4. 项目中有没有遇到特别困难的问题，是如何解决的

其他

1. 前端性能优化
2. 有哪些好的习惯或方法可以提高工作效率
3. 前端开发的理解，职业规划，发展方向
4. 开发中遇到过什么难点问题，项目上有什么对自己提升很大的心得体会
5. 分享一个最近学习的新技术，平时是通过哪些途径来提升自己的技术水平
6. 是否有封装过自己的函数库或组建
7. 介绍一下上个团队的情况，自己在其中担当什么角色
8. 为什么考虑离职，对公司或团队有什么改进建议或看法
9. 你认为前端开发工程师的核心价值体现在哪里
10. 是否采用前后端分离，前后端如何协调定义数据模型
11. 工作中使用那些开发工具，git的使用
12. 平时是否写博客，有没有给团队做过技术分享，有什么心得
13. 你认为前端开发工程师的核心价值体现在哪里
14. 是否采用前后端分离，前后端如何协调定义数据模型
15. 工作中使用那些开发工具，git的使用
16. 分享你最近在学习或想了解的新技术，你学习新知识的途径有哪些
17. 你为什么从上家公司离职呢，对上家公司有什么不满意的地方
18. 浏览器调试工具经常用到那些模块
    console、element、sources、network、application（storage、catch）

19. 封装一个时间轴的组件

    
    image.png

// 线条样式
.timeline-item-line {
    position: absolute;
    left: 4px;
    top: .75em;
    height: 100%;
    border-left: 2px solid #e8e8e8;
}
// 圆圈项样式
.timeline-item-circle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 100px;
    border: 2px solid transparent;
}
// 文本内容样式
.timeline-item-content {
    margin: 0 0 0 18px;
    position: relative;
    top: -6px;
}

20. 封装一个弹出框组件

// 遮罩层样式
.overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0,0,0,0.8);
}

// 弹窗内容样式
.overlay article {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -200px 0 0 -200px;
  width: 400px;
  height: 400px;
}

// 点击遮罩关闭弹窗，点击弹出内容冒泡导致关闭，防止事件冒泡
$('.overlay').click(function(e){
  if (e.target == e.currentTarget)
    closeOverlay();
});

笔试编程

1. 给定一个数组，编写一个函数去除重复元素，如:
   输入：arr=[1,2,3,2,3,4,5,2,3]
   输出：uniq(arr) = [1,2,3,4,5]

2. 实现一个flatten函数，将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。如：

flatten([1,[2],[3,[4]]]) = [1,2,3,4]

3. 实现一个find函数，模拟原生的find函数，find(list, predicate)。

在list中逐项查找，返回第一个通过predicate迭代函数真值检测的元素值，如果没有元素通过检测则返回 undefined。 如果找到匹配的元素，函数将立即返回，不会遍历整个list。

var even = find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
// 2

4. 实现一个parseQuery函数，能够解析location的search字符串(不包括'?')。

输入一个search，输出一个object，同名参数则是会成为数组。

let str = "http://localhost:3000/index.html？phone=12345678901&pwd=123123";
var result = parseQuery(str);
console.log(result) // { phone: '12345678901', pwd:'123123' }

5. 将一个扁平数组转换成树状结构

function toChildrenStruct(pidArray, expandLevel) {
    // 将pid结构的树型数据转换成children结构
    const childrenArray = []
    const expandedItems = []
    const itemMap = {}
    if (!pidArray) {
      return childrenArray
    } else {
      for (const item of pidArray) {
        item.key = item.id
        item.value = item.id
        item.label = item.name
        itemMap[item.id] = item
      }
      for (const item of pidArray) {
        const parent = itemMap[item.parentId]
        if (typeof parent === 'undefined') {
          // pid不存在，是顶级元素
          childrenArray.push(item)
        } else {
          if (typeof parent.children === 'undefined') {
            parent.children = []
            if (expandLevel === -1) expandedItems.push(parent.id)
          }
          parent.children.push(item)
        }
      }
    }
    return childrenArray
  }