蚂蚁集团-数字金融线-体验技术部前端一面面经

大三春招试着投了份简历，没想到很顺利地拿到了 offer。

面试官 19:00 打了个电话过来，说往我邮箱里发了个链接，让我先做一个小时的笔试题。

笔试 阿里伯乐系统 60min

笔试是在阿里的伯乐系统上做的，三道手撕代码。

第一题、根据表达式计算字母数量

描述：输入一串字符串，根据字符串求出每个字母的数量并返回结果对象。（数字为 1 时可省略）
示例一：输入：A3B2，输出：{“A”: 3, “B”: 2}
示例二：输入：A(A(A2B)2)3C2，输出：{“A”: 16, “B”: 6, “C”: 2}

这题我放在最后写了，结果因为被第三题最后一个输出卡了很久只剩下五分钟写这题代码，来不及写了。

第二题、手写节流

描述：参数一：执行的函数，参数二：时间间隔。要求实现即使函数被连续处罚多次也只在连续时间内执行一次。
我一看题面描述立马反应过来用节流，刷刷刷写出来了。

1
2
3
4
5
6
7
8
9
10
11

function throttle(func, time) {
    let timeout;
    return function () {
        if (!timeout) {
            func.apply(this, arguments);
            timeout = setTimeout(() => {
                timeout = null;
            }, delay);
        }
    };
}

第三题、对象扁平化

输入：

1
2
3
4
5
6

{
    "a": "a",
    "b": [1, { "c": true }, [3]],
    "d": { "e": undefined, "f": 3 },
    "g": null
}

输入用例记不太清了，应该大致差不多吧

输出：

1
2
3
4
5
6
7
8

{
    a: "a",
    b[0]: 1,
    b[1].c: true,
    b[2][0]: 3,
    d.f: 3
    // null和undefined直接舍去
}

因为没写过这种代码所以一开始也挺没有头绪的，花了很多时间在这题上面。（代码实现挺烂的……时间来不及不够优化了）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function flatten(obj) {
    const res = {};
    const _flatten = function (o, prev = null) {
        if (Array.isArray(o)) {
            for (const index in o) {
                const ele = o[index];
                if (ele instanceof Object) {
                    _flatten(ele, `${prev ? prev : ''}[${index}]`);
                } else {
                    if (ele) {
                        res[`${prev ? prev : ''}[${index}]`] = ele;
                    }
                }
            }
            return;
        }
        for (const key in o) {
            if (typeof o[key] === 'object') {
                if (o[key] !== null) {
                    _flatten(o[key], `${prev ? prev + '.' : ''}${key}`);
                }
            } else {
                if (o[key] !== undefined) {
                    res[`${prev ? prev + '.' : ''}${key}`] = o[key];
                }
            }
        }
    };
    _flatten(obj);
    return res;
}

吐槽一下

阿里的伯乐系统在我写代码的时候出问题了，因为面试官说我可以在浏览器的控制台测试代码所以我是全程开着控制台的。结果我写到一半发现控制台一直在报错：
WebSocket is already in CLOSING or CLOSED state.
我当时一看人都麻了……不会是这系统觉得我一直在控制台里测试觉得我离线自动断开 ws 了吧……
一个小时后笔试结束，面试官问我第三题是不是没写完，我就告诉他好像 ws 断开连接了，他可能看不到我后面的代码了。
最后面试官就让我口述了一下第三题的思路，又问了问我有没有解第一题的思路。我就把两道题的思路说了一下，因为第三题是我已经做出来了的，所以我就解释得比较详细，第一题因为还没怎么做就只讲了基本思路，并且回答了应该使用什么数据结构来处理这道题。

面试 全程电话面 30min

1. 解释一下笔试题
2. 自我介绍
3. 有没有看过 React 的源码？
   我回答说没有看过，但是了解过虚拟 DOM 和 DIFF 算法，面试官让我解释一下这两者。
4. 根据我的回答，面试官又问了一句为什么在 JSX 里循环生成 DOM 需要添加 key
   我就从 DIFF 算法的原理特性解释了这个问题
5. class 组件和使用 hooks 的组件有什么区别
6. 有没有用过 iframe？没有用过
7. 有做过 h5 的手机端的页面吗
8. 在手机端一般用什么单位？我就说比较喜欢用 rem、em、rpx 这些，面试官接着又让我解释一下 rem
9. 现在写代码 Promise 用的比较多哈，你能解释一下 Promise 是什么样的一个概念吗？
   我解释了一下 Promise 的主要用途和用法，也同时讲了一下 async/await 的概念，以及它们和 Promise 之间的关系。
10. 在以往的项目里有遇到什么困难的点吗？
    这个问题给我噎住了，一下子想不起来有什么很牛逼的难点，比较基本的不敢答，最后挑了一个现在在做的 electron 项目的一个小问题的解决办法。并且讲了一下由于项目重构后使用了更新版的 electron 导致原项目的解决方案不再适用，当时也找不到问题所在，于是通过 overstackflow 了解到 electron 这次更新是把我的这部分功能限制了的，而它的中文文档又没有更新，因此得查阅英文文档才能看到更新的细节……后面又想到了目前的解决方式解决了这个问题。

然后问了一下我现在是大几，最后面试官说如果有后续面试会打电话通知我的。

后续进展

• 3 月 14 日 19:30：一面通过，接到二面面试官好友请求（部门主管）
• 3 月 15 日 18:40：二面通过，当晚二面面试官告知我会帮我约下一轮面试
• 3 月 29 日 08:37：接到来自阿里巴巴的邮件告知已被录用