快手前端暑期实习一面

一、前言

先说一下结果吧——一面秒挂。

这个是我暑期实习的第一次面试，为啥过了这么久才发？当然是我的面试都结束了，现在终于可以抱着轻松的心态复盘一下了！！

我个人感觉自己确实是有很多的不足的地方，对于 Promise 的相关知识以及算法的部分掌握的实在是太不牢固了。在这里先记录一下吧。

二、题目列表

上来老三样，自我介绍+询问实习时间地点要求+询问我的项目经历。由于我在简历里面写了挺多竞赛相关的项目，让他误以为我是一个超级全能的全干工程师，然后就让我挑一个比较有难度的项目来讲。于是我就挑了一个目前正在参与的开源项目：Create-Neat，并详细讲了一下我当初负责的 TemplateAPI 的设计。这个就相当于是偏纯技术的一个项目，因此和面试官聊的还比较多。这个项目聊完了之后，又跟我聊了一个我在目前公司负责的 Markdown 渲染器的设计与实现，这个也聊的比较久。
代码题：JavaScript 事件循环，给我一段代码，让我判断 console.log() 打印输出的顺序。这个题目相对比较经典+我没有录屏这边就不写原题了。
代码题：实现一个 sleep()函数，使用 async/await ，可以向其中传入一个参数 dalay 用于控制其函数内部 console.log() 触发的延迟时间。具体代码如下：
```
const func = async () => {
  await sleep(3);
  console.log("Hello World");
};

const sleep = (delay) => {
  // 编写函数体
};
```
这道题实际上比较简单，就是利用了 Promise 的机制，我们可以把 await 语句下面的代码看成 Promise.then() 回调内部的代码，我们只要在 sleep 函数里面返回一个 Promise ，然后在 delay 秒之后把其状态变为 fulfilled 就可以了。

解法代码如下：
```
const func = async () => {
  await sleep(3);
  console.log("Hello World");
};

const sleep = (delay) => {
  return new Promise((resolve) => {
    setTimeout(resolve, delay * 1000);
  });
};
```

代码题：第三题的进阶版。

首先有一个已经写好的接口： getUserInfo ，它接受一个参数 userId ，在内部通过 axios 发起请求，返回一个 Promise 对象。

目前有一个新的需求：实现一个新的函数用来二次封装这个 getUserInfo ，同样也返回一个 Promise 对象，如果正常返回成功/失败，那么就正常的触发成功/失败的回调；如果请求时长超过了10s，那么就需要自动触发报错，不管原来的这个接口接下来是否请求成功/失败。

当时这道题有点懵，想了半天没有想出来，因为之前这种超时报错的处理基本100%全都是交给 axios 的响应拦截器做的处理，还没有自己手动实现过。

接下来给一下我事后实现的一个 TS 版本的源码，给大家参考一下：

import axios from 'axios';

function getUserInfo(userId: string): Promise<any> {
    return axios.get(`/api/user/${userId}`);
}

function getUserInfoWithTimeout(userId: string): Promise<any> {
    return new Promise((resolve, reject) => {
        const timeout = setTimeout(() => {
            reject(new Error('请求超时'));
        }, 10000); // 设置10秒超时

        getUserInfo(userId)
            .then((response) => {
                clearTimeout(timeout); // 清除超时计时器
                resolve(response.data);
            })
            .catch((error) => {
                clearTimeout(timeout); // 清除超时计时器
                reject(error);
            });
    });
}

// 示例用法
getUserInfoWithTimeout('123')
    .then((data) => {
        console.log('成功：', data);
    })
    .catch((error) => {
        console.error('失败：', error.message);
    });

代码题：判断 this 作用域。

具体题目如下：
```
var num = 123;

var obj = {
  num: 456,
  getNum: function () {
    var num = 789;
    return this.num;
  },
};

console.log(obj.getNum());
```
让我判断最终打印输出的结果为多少。

实际上， getNum 方法被调用时，会返回 this.num。在这个上下文中，this 指向了 obj 对象，因此 this.num 实际上是指向了 obj 对象中的 num 属性。根据 JavaScript 的作用域链规则，如果当前作用域中找不到某个变量，就会向外层作用域查找，直到找到或者查找到最外层作用域为止。

在 getNum 方法内部，虽然有一个同名的 num 变量（var num = 789;），但在返回语句 return this.num; 中，this.num 实际上是指向了 obj 对象中的 num 属性，而不是方法内部的 num 变量。因此，最终打印输出的结果是 456。

代码题：大数相加。简单来说，实现一个函数，内部可以传递两个无限长的字符串，而这两个字符串全都是由数字字符组成，在这个函数中实现这两个字符串数字的相加，最终返回的也是一个由数字组成的字符串。当时由于前两题发挥不太好导致心情崩溃了，结果没有写出来。

这里给一下之后写的一个解法：

function addStrings(num1: string, num2: string): string {
    let carry = 0; // 进位
    let result = ''; // 结果字符串
    let i = num1.length - 1;
    let j = num2.length - 1;

    // 从个位开始逐位相加
    while (i >= 0 || j >= 0 || carry > 0) {
        const digit1 = i >= 0 ? parseInt(num1[i]) : 0;
        const digit2 = j >= 0 ? parseInt(num2[j]) : 0;
        const sum = digit1 + digit2 + carry;

        // 计算当前位的结果，并更新进位
        const digitSum = sum % 10;
        carry = Math.floor(sum / 10);

        // 将当前位的结果添加到结果字符串的开头
        result = digitSum.toString() + result;

        // 更新索引
        i--;
        j--;
    }

    return result;
}