【前言】

相比华为的机考题，我更加喜欢蚂蚁金服的面试题，毕竟蚂蚁金服的算法题和平常息息相关。虽然，哎，只能怪自己知识的熟练度运用不够吧。

【面试基础知识】

1：简单自我介绍下？

估计是主要想从我的介绍里找到提问的切入点。然我就开始介绍之前公司的项目。。。

2. 你的技术栈是用vue是吧，说下vue的生命周期，以及什么时候会触发update

然后我说了下vue的生命周期，顺带讲了keep-alive的生命周期和路由的生命周期。

我说了update就是数据发生变化,引起当前组件视图变化完后触发update？但是面试官追问还有其他情况么？我就没答上来了。后来搜了下，忘记了还有个api叫Vue.$forceUpdate

3 说下vue的双向绑定。

我： vue的双向绑定其实本质是语法糖，就是利用了父子之间的通信实现的。那个v-mode不就是在子组件里触发了父组件的事件实现的么。

面试官：我的意思是说数据变化如何触发视图变化。

我：哦哦。就是set的时候会派发更新，dep.notify => 遍历watcher.update => _update => patch => dom

4 说下computed和set的区别

我不清楚他的set指什么，下意识就以为是数据set阶段。我：computed就是开始会置上个lazy的标志位，然后不是马上计算的，只有在get的时候才会计算，并且和其他响应式数据一样，只有在最终的值发生变化才会引发视图变化。 set 没有这些特点。

5 Vue用什么进行数据劫持的

我： Object.defineproperty

【面试算法题】

1. 用 settimeout实现下setinterval和clearinterval

这道题当时可能紧张了，clearinterval一时没想出来，就先去看后面的题了，结果后面的题也卡住了，至于都没时间回来管这道题。下面贴下面试结束后实现的结果。



function _setInterval(callback, time) {
    let res = {//利用引用类型保证target一直是最新的
        target: ''
    }
    function fn() {
        callback();
        res.target = setTimeout(fn, time)
    }
    fn();
    return res;
}


function _clearInterval(timer) {

    clearTimeout(timer.target)

}


//测试用例


function fn() {
    console.log(123)
}

let timeid = _setInterval(fn, 1000);


setTimeout(function() {
    _clearInterval(timeid)
}, 5000)

2. 只输出最后一个promsie的结果

题目的意思刚开始有点绕，经过面试官的一番解释，我大致概括下就是这个意思：

编写一个高阶函数，这个高阶函数接受一个promise参数，然后返回一个函数。每次调用返回的函数的时候，只会输出最后一个promsie的结果。就像下面示例一样。


function lastPromise(promiseFunction) {
    // TODO


}

// 示例
let count = 1;
// 这是一个函数，返回promise
let promiseFunction = () =>
    new Promise(rs =>
        setTimeout(() => {
            rs(count++);
        })
    );

let lastFn = lastPromise(promiseFunction);

lastFn().then(console.log); // 无输出
lastFn().then(console.log); // 无输出
lastFn().then(console.log); // 3

面试官开始和我说效果有点类似于防抖，我开始就一直纠结于如何取消promsie。结果结束发现这道题考察的是事件循环呀。下面附实现结果：


function lastPromise(promiseFunction) {//骚操作版
    // TODO
    lastPromise.target1 = 0;
    lastPromise.target2 = 0;

    return function () {
        lastPromise.target1++;
        return new Promise((resolve, reject) => {
            promiseFunction().then(v => {
                lastPromise.target2++;
                if(lastPromise.target1 === lastPromise.target2) {
                    resolve(v)
                }                
            })
        })
    }

}

function lastPromise(promiseFunction) {//劫持了then方法，虽有有点小bug，但是应付面试问题不大，而且是完善下就是正规军的打法
    // TODO
    var arrs = []
    var target
    function fn() {
        arrs.push(promiseFunction)
        return {
            then
        }
    }
    function then(fnc) {
        clearTimeout(target)
        target = setTimeout(function() {
            arrs.forEach((prom, i) => {
                prom().then((res) => {
                    // console.log(res, arrs.length - 1, i)
                    if ((arr.length - 1) === i) {
                        fnc(res)
                    }
                })
            })
        })

    }
    return fn
}

蚂蚁金服前端面试总结