坐标杭州，18年毕业，算上实习一年半开发经验。是外派的面试，后面两面都是阿里的面试官。

本来是给我发的在线测评，但是那边服务器出现问题，我一直打不开网页，最后只好以电话问答的形式。下面我写的大部分都是测评里的题目，部分是电话里新增的题目。。。

尽量使用尽可能多的方式实现子元素的垂直水平居中

<div class="father">
    <div class="child">  
    </div>
</div>

<style>
    .father {
        width: 300px;
        height: 300px;
    }
    .child {
          
    }
</style>

child分很多种情况，大致说一下

行内元素：text-align + line-height

.father{
  text-align: center;
  line-height: 300px;
}

定宽定高：absolute + margin

.father{
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -150px;
}
/* 或者 */
.child{
  position: absolute;
  left: 0;
  top: 0; 
  right: 0; 
  bottom: 0;
  margin: auto;
}

不定高：absolute + translate

.father{
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

不定高：flex

.father{
  display: flex; 
}
.child{
  margin:auto;
}
/* 或者 */
.child{
  justify-content: center;
  align-items: center;
}

table方式：

.father{
  display: table; 
}
.child{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

尽可能多的方式实现如下三栏布局，要求 .main 在中间显示

<div class="container">
  <div class="main"></div>
  <div class="sub"></div>
  <div class="extra"></div>
</div>

浮动
flex布局：利用order属性（排序，这个没答上来）
gird布局：grid-template-areas

执行下面的代码，输出结果是什么？

console.log(+false) // 0， 这里是一元运算符进行的弱类型转换，相对应的 +true 则返回 1
console.log('1' + 2 + '3' + 4) // '1234' 遇到字符串就会拼接
console.log(4 + 3 + 2 + '1')  // '91' 先加在一起再拼接

运行下面的代码，输出什么？

var x = 3;
var foo = {
  x: 2,
  baz: {
    x: 1,
    bar: function() {
      return this.x;
    }
  }
}
var go = foo.baz.bar;

console.log(go());  // 3
console.log(foo.baz.bar()); // 1

这题考的是this的指向：

this由调用者提供，由调用函数的方式来决定。如果是一个对象调用的函数，则this指向该对象，比如foo.baz.bar()。如果函数独立调用比如go()，那么该函数内部的this，则指向undefined。但是在非严格模式中，它会被自动指向全局对象window。

实现以下函数，使得输入的字符串逆序输出

function reverse(str) {
  let res = str.split('');
  return res.reverse().join('');
}

reverse('hello world!'); // output: '!dlrow olleh'

进阶问题

'hello world!'.reverse();  // output: '!dlrow olleh'

这个问题需要给String的原型上添加方法，但是要考虑有一些改造：

String.prototype.reverse = function reverse() {
  let res = this.split('');
  return res.reverse().join('');
}

实现sleep 函数

要求用法：

/**
- 使当前运行的异步操作（promise 或者 async）停止等待若干秒
- 
- @param ms */
(async () => {
  console.log('hello')
  await sleep(2000) // 等待两秒
  console.log('world')
})()

const sleep = ms => return new Promise(resolve => setTimeout(resolve, ms))

实现throttle 节流函数

用法：

const throFun = () => console.log('hello');
const thro = throttle(throFun, 300);
document.body.onscroll = () => {
  thro();  // 调用至少间隔 300 毫秒才会触发一次
}

/**
- 频率控制，返回函数连续调用时，action 执行频率限定为 1次 / delay
- @param delay  {number}    延迟时间，单位毫秒
- @param action {function}  请求关联函数，实际应用需要调用的函数
- @return {function}    返回客户调用函数 */
function throttle(action, delay) {
  var previous = 0;
  // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
  return function() {
    var _this = this;
    var args = arguments;
    var now = new Date();
    if(now - previous > delay) {
        action.apply(_this, args);
        previous = now;
    }
  }
}

实现debounce 防抖函数

用法：

const throFun = () => console.log('hello');
const thro = debounce(throFun, 300);
document.body.onscroll = () => {
  thro();  // 若一直调用则不会执行，空闲时间大于 300 毫秒才会执行
}

/**
- 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 delay，action 才会执行
- @param delay   {number}    空闲时间，单位毫秒
- @param action {function}  请求关联函数，实际应用需要调用的函数
- @return {function}    返回客户调用函数 */
function debounce(action, delay) {
  var timer; // 维护一个 timer
  return function () {
      var _this = this; // 取debounce执行作用域的this
      var args = arguments;
      if (timer) {
          clearTimeout(timer);
      }
      timer = setTimeout(function () {
          action.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.action(args);
      }, delay);
  };
}

数组去重有哪些方法？

const arr = [1,2,3,4,4,3,2,1];
// 方法一：new Set ES6
return [...new Set(arr)]; // 这里又问到我...的用法

// 方法二：双层for循环 (然后说这样性能不好，让我只用一层for循环的方法)
function unique(arr){
  var res=[];
  for (var i = 0; i < arr.length; i++) {
    for (var j = i+1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        ++ i;
        j = i;
      }
    }
    res.push(arr[i]);
  }
  return res;
}

// 方法三：单层for循环 + indexOf
function unique(array){
    var res = [];
    for(var i = 0; i < array.length; i++) {
        //如果当前数组的第i项在当前数组中第一次出现的位置是i，才存入数组；否则代表是重复的
        if (array.indexOf(array[i]) === i) {
            res.push(array[i])
        }
    }
    return res;
}
// 方法三点三：或者这样
function unique(array){
    let res = [];
    for(var i = 0; i < array.length; i++) {
        if (res.indexOf(array[i]) === -1) {
            res.push(array[i]);
        }
    }
    return res;
}

// 方法四：面试官说如果可以容忍改变原有数组的情况下，怎么改进性能更好
function unique(array){
    // 注意这里一定要倒叙for循环，否则会出现问题
    for(var i = array.length - 1; i > 0; i--) { 
        if (array.indexOf(array[i]) !== i) {
            array.splice(i, 1);
        }
    }
    // 因为少声明一个变量，节省了内存空间（虽然可以忽略不计，但是面试嘛～）
    return array;
}

场景题，考察事件代理，事件监听，DOM自定义属性等

题目描述：

网页中有一个元素A，它有个data-href属性，里面存放一个链接地址🔗
实现一个函数，当任意点击时，如果点击的元素就是A或其上层节点中找到A，则进行链接跳转

实现思路：

首先给window添加点击事件的监听，然后先声明一个中间变量targetNode记录节点
然后循环判断当前节点targetNode是否存在data-href属性
如果存在则进行跳转，break。不存在则将该节点的父节点赋值给targetNode
一直循环到判断targetNode是最外层节点为止

面试过后整理的代码：

window.addEventListener('click', (e) => {
    let targetNode = e.target
    while (targetNode !== document) { // 只要当前节点不是最外层document
        console.log(targetNode)
        if (targetNode.getAttribute('data-href')) { //  其实用hasAttribute更合适
            window.open(targetNode.dataset.href)
            break
        } else { // 没找到就继续往上找
            targetNode = targetNode.parentNode
        }
    }
})

总结：

感觉这道题出的很好，回答过程中面试官也一直引导我的思路，比如最开始我想到判断节点是否为上下级关系的方法用DOM的contains()方法，然后面试官考虑性能，最好用原生api。然后我就说用parentNode。后来我查了一下MDN，发现contains这个方法就是原生的api，IE5以上就支持了：
但是这也不是重点，重点是用contains这个方法不能实现这个场景，因为你需要父节点（上层节点）是已知的。但这个场景是通过已知子节点（点击事件返回的target）来向上寻找节点。
我说到用dataset获取自定义属性的时候，面试官说考虑到兼容性，有没有别的方法。我回答getAttribute()。
在说怎么一层一层的往上找节点的时候，最开始我想到了用递归调用函数，面试官当即打断我说没有必要，而且浪费性能。然后提示我说有什么循环的方法。最后想到了while

其他问题

ES6数组有哪些方法
React使用中用过哪些状态管理工具，紧接着问了redux和mobx的区别，面试遇到三四次了，故总结一下：

1.Redux 鼓励一个应用只用一个 Store，Mobx 鼓励使用多个 Store； 2.Redux 是函数式编程，而Mobx的模式是面向对象的； 3.Redux 使用“拉”的方式使用数据，这一点和 React是一致的，但 Mobx 使用“推”的方式使用数据； 4.Redux 鼓励数据范式化，减少冗余，Mobx 容许数据冗余，但同样能保持数据一致。 5.Redux更严格，必须调用reducer触发action来改变state， Mobx 最初的一个卖点就是直接修改数据，但是实践中大家还是发现这样无组织无纪律不好，所以后来 Mobx 还是提供了 action 的概念。和 Redux 的 action 有点不同，Mobx 中的 action 其实就是一个函数，不需要做 dispatch。如果想强制要求使用 action，禁止直接修改 observable 数据，使用 Mobx 的 configure，如下：
import {configure} from 'mobx';

configure({enforceActions: true});

让讲了一下react的虚拟DOM，简单讲一下diff算法原理
React中key的作用