前端手撕代码(bigo)

前言

最近面了bigo，业务主要负责bigo live的h5页面、官网、内部业务系统。一面二面手撕代码挺简单。

URL 查询参数解析

在前端开发中，解析 URL 中的查询参数是一个常见的需求。以下是两种实现方法：

（一）使用URLSearchParams

URLSearchParams是一个强大的内置接口，可以方便地解析、修改和操作 URL 查询参数。

示例代码

javascript 复制代码

// 假设 URL 是 http://example.com/?name=John&age=30
const url = "http://example.com/?name=John&age=30";
const urlParams = new URLSearchParams(url.split("?")[1]);

// 获取单个参数
const name = urlParams.get("name"); // John
const age = urlParams.get("age"); // 30

console.log(`Name: ${name}, Age: ${age}`);

特点

• 简单易用：URLSearchParams提供了get()、set()、append()和delete()等方法，方便操作查询参数。

• 自动处理编码：该接口会自动对参数值进行编码和解码。

（二）手动解析查询参数

如果面试中不允许使用URLSearchParams，可以通过手动解析的方式实现。具体步骤如下：

使用split()方法提取查询字符串部分。
将查询字符串按&分割成数组。
遍历数组，将每个键值对按=分割，并存入对象。

示例代码

javascript 复制代码

function parseQueryParams(url) {
    const queryParams = {};
    const queryString = url.split("?")[1];
    if (queryString) {
        queryString.split("&").forEach((param) => {
            const [key, value] = param.split("=");
            queryParams[key] = decodeURIComponent(value); // 解码参数值
        });
    }
    return queryParams;
}

// 示例
const url = "http://example.com/?name=John&age=30";
console.log(parseQueryParams(url)); // 输出：{ name: "John", age: "30" }

特点

• 灵活性高：手动解析可以更好地处理特殊场景，例如嵌套对象或数组。

• 兼容性好：不依赖现代浏览器的内置接口，适用于所有环境。

大数相加

（一）数组模拟加法

实现思路

数组模拟加法的核心是将大数的每一位存储在数组中，然后通过模拟竖式加法的方式逐位相加。具体步骤如下：

将两个大数从右到左逐位存储到数组中。
从最低位开始逐位相加，并处理进位。
最终将结果数组反转，得到最终结果。

代码实现

javascript 复制代码

function addBigNumbers(num1, num2) {
    // 将数字转换为数组，每个元素是一个数字位
    num1 = num1.split("").map(Number);
    num2 = num2.split("").map(Number);

    // 确保 num1 是较长的数组
    if (num1.length < num2.length) {
        [num1, num2] = [num2, num1];
    }

    // 初始化结果数组和进位
    let result = [];
    let carry = 0;

    // 从右到左逐位相加
    for (let i = 0; i < num1.length; i++) {
        let digit1 = num1[num1.length - 1 - i];
        let digit2 = i < num2.length ? num2[num2.length - 1 - i] : 0;

        let sum = digit1 + digit2 + carry;
        carry = Math.floor(sum / 10); // 更新进位
        result.push(sum % 10); // 将当前位的结果存储到数组中
    }

    // 如果最后还有进位，加到结果中
    if (carry > 0) {
        result.push(carry);
    }

    // 将结果数组反转并转换为字符串
    return result.reverse().join("");
}

// 示例
console.log(addBigNumbers("12345678901234567890", "98765432109876543210")); // 输出：111111111011111111100

时间复杂度分析

数组模拟加法的时间复杂度主要取决于两个大数的长度。假设两个大数的长度分别为m和n，则时间复杂度为O(max(m,n))。

（二）使用BigInt

实现思路

BigInt是 JavaScript 中用于表示任意大小整数的原生数据类型，非常适合处理大数运算。使用BigInt，我们可以直接将字符串转换为BigInt类型，然后进行加法运算。

代码实现

javascript 复制代码

function addBigNumbers(num1, num2) {
    // 将字符串转换为 BigInt 类型
    let a = BigInt(num1);
    let b = BigInt(num2);

    // 直接进行加法运算
    return (a + b).toString();
}

// 示例
console.log(addBigNumbers("12345678901234567890", "98765432109876543210")); // 输出：111111111011111111100

时间复杂度分析

BigInt的加法运算由底层实现优化，其时间复杂度接近O(n)，其中n是较大数字的位数。

总结

在面试中，大数相加和 URL 查询参数解析是两个常见的问题。数组模拟加法虽然实现复杂，但不依赖语言特性，可移植性强；而BigInt则简单高效，适合现代 JavaScript 环境。对于 URL 查询参数解析，URLSearchParams是推荐的现代方法，但在不支持该接口的环境中，手动解析也是一种可行的方案。

希望这篇文章能帮助你在面试中顺利"手撕代码"，祝你面试成功！