字节前端一面

项目和一些场景题；无感登录

无感登录是指用户在进行登录时无需输入账号和密码，而是通过其他方式实现自动登录，如使用之前保存的凭据、设备信息或者生物识别技术（指纹、面容等）等方式进行验证。这种登录方式提高了用户的使用便捷性和体验，但也需要确保安全性和隐私保护。

在实现无感登录时，可以采用以下方法之一或其组合：

持久化凭据: 用户首次登录成功后，可以将登录凭据（如Token或Session）保存在客户端本地，下次登录时直接使用保存的凭据进行自动登录。
设备识别: 识别用户的设备信息，如设备ID、浏览器信息等，根据设备的唯一性来实现自动登录。
生物识别技术: 利用生物特征识别技术（如指纹、面容等）来验证用户身份，无需输入密码即可进行登录。
单点登录（SSO）: 如果用户已经在其他相关联的系统中登录过，可以通过单点登录机制实现在当前系统中的无感登录。

在实际场景中，无感登录通常会结合以上方法，根据具体业务需求和安全考虑来选择合适的方案。同时，为了确保用户信息安全，需要对凭据的存储、传输和验证过程进行严格的安全控制和加密保护。

计算机网络八股
HTML，CSS，js基础八股
vue八股
看代码写输出

算法题：返回最大不连续最长子数组乘积

以下是JavaScript中的实现：

function maxNonContiguousProduct(nums) {
    if (!nums || nums.length === 0) {
        return 0;
    }

    let maxProduct = nums[0];
    let maxPositive = nums[0];
    let minNegative = nums[0];

    for (let i = 1; i < nums.length; i++) {
        const num = nums[i];
        if (num > 0) {
            maxPositive = Math.max(num, maxPositive * num);
            minNegative *= num;
        } else if (num < 0) {
            const temp = maxPositive;
            maxPositive = Math.max(num, minNegative * num);
            minNegative = Math.min(num, temp * num);
        } else {
            maxPositive = minNegative = 0;
        }

        maxProduct = Math.max(maxProduct, maxPositive);
    }

    return maxProduct;
}

// 示例用法
const nums = [2, -3, 5, -2, 1];
console.log(maxNonContiguousProduct(nums)); // 输出 10

这段代码首先检查数组是否为空，然后遍历数组中的每个元素。在遍历过程中，根据元素的正负情况更新最大正数乘积和最小负数乘积，并根据需要更新最大乘积。最后返回最大正数乘积作为结果。

面试体验巨好，奈何是我太菜

4.24字节前端一面

面了一堆八股，感觉面试官就是读题机器……语气也没啥感情
css八股题若干，webpack八股题若干，最后事件循环看代码题＋找第k大的数算法
找到数组中第k大的数的算法通常使用快速选择（Quick Select）算法，该算法基于快速排序的思想。

快速选择的基本思想是选择一个基准元素，将数组分成两部分：小于基准元素的部分和大于基准元素的部分。然后根据基准元素的位置，判断第k大的数在哪一部分，然后递归地在相应的部分中查找第k大的数。

以下是快速选择算法的基本步骤：

选择一个基准元素（通常是数组的第一个元素）。
将数组分成两部分：小于基准元素的部分和大于基准元素的部分。
根据基准元素的位置，判断第k大的数在哪一部分。
如果第k大的数在小于基准元素的部分，那么在这一部分中递归地查找第k大的数；如果在大于基准元素的部分，那么在这一部分中递归地查找第k大的数。
重复以上步骤，直到找到第k大的数为止。

快速选择算法的时间复杂度为O(n)，其中n是数组的长度。这种算法效率较高，适用于需要找到第k大的数的场景。

反问环节：
我：咱们这个部门是做啥的
面试官：自己去问HR

整个下来感觉就是不太好，刚开始面试官念题的时候就觉的是KPI了，原来字节就这样啊![

作者：摊摊小猪猪
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

字节抖音前端一面

攒攒人品，祈愿二面

自我介绍
项目一些问题

js闭包以及应用场景

闭包是指一个函数能够访问并保存其词法作用域外部的变量，即使在该函数在词法作用域外被调用时。闭包是JavaScript中非常重要的概念，它可以帮助我们实现许多有用的设计模式和功能。

特性：

函数嵌套： 在一个函数内部定义另一个函数。
内部函数访问外部变量： 内部函数可以访问外部函数的变量和参数，即使外部函数已经执行完毕。
外部变量的引用： 外部函数的变量被内部函数引用时，它们的生命周期会被延长，直到内部函数不再被引用。

应用场景：

封装私有变量和方法： 使用闭包可以创建私有变量和方法，防止外部直接访问和修改。
模块化开发： 闭包可以创建模块，将一组相关的变量和函数封装在内部，并提供对外接口，以实现模块化开发和减少全局变量污染。
函数式编程： 闭包是函数式编程中的重要概念，可以用于创建柯里化函数、高阶函数等。
事件处理： 闭包可以用于处理异步操作中的回调函数，保持对外部变量的访问权限。
定时器和循环： 在定时器和循环中使用闭包可以避免循环变量的污染问题，保证每个闭包内部访问到的循环变量是正确的。
缓存： 可以利用闭包保存计算结果，提高程序执行效率。

总的来说，闭包是一种强大的语言特性，能够使我们的代码更加灵活、模块化，并且能够解决许多实际问题。然而，需要注意闭包可能会导致内存泄漏和性能问题，因此在使用时需要谨慎考虑。

https协议

HTTPS（Hypertext Transfer Protocol Secure）是一种安全的传输协议，用于在网络上安全地传输数据。它是在HTTP的基础上添加了加密和身份认证机制，以保护数据的安全性和完整性。HTTPS的主要特点包括以下几点：

加密传输： HTTPS使用SSL/TLS协议对传输的数据进行加密，可以有效防止数据在传输过程中被窃听、窃取或篡改。
身份认证： 在建立HTTPS连接时，服务器会通过SSL证书对自己的身份进行认证，确保客户端连接的是合法的服务器。这可以防止中间人攻击和伪造服务器的风险。
数据完整性： HTTPS使用加密算法对数据进行加密签名，可以确保数据在传输过程中不被篡改或损坏。
SEO优化： 搜索引擎通常更倾向于排名使用HTTPS协议的网站，因为HTTPS可以提高网站的安全性和可信度。
信任度提升： 使用HTTPS可以提升用户对网站的信任度，特别是在涉及用户敏感信息（如登录信息、支付信息等）的场景下。

实现HTTPS连接通常需要购买SSL证书并在服务器上进行配置。随着互联网安全意识的提高和技术的发展，越来越多的网站选择采用HTTPS协议来保护用户数据和提升用户体验。

React useMemo

useMemo 是 React 提供的一个钩子函数，用于对计算昂贵的值进行缓存，以提高性能。它接收一个函数和一个依赖项数组作为参数，然后返回函数的计算结果。

具体来说，useMemo 的使用场景通常是在渲染过程中需要计算的值，并且这个计算值的过程比较昂贵，每次渲染都会导致重复计算。通过将这个计算值的结果缓存起来，可以避免不必要的重复计算，提高性能。

import React, { useMemo } from 'react';

const Component = () => {
  // 依赖项数组中的任何一个值发生变化时，都会重新计算 memoizedValue
  const memoizedValue = useMemo(() => {
    // 执行昂贵的计算操作
    return computeExpensiveValue(a, b);
  }, [a, b]); // 依赖项数组

  return (
    // 使用 memoizedValue
  );
};

在上面的示例中，useMemo 接收了一个计算函数和一个依赖项数组 [a, b]。当数组中的任何一个值发生变化时，useMemo 会重新执行计算函数，并返回计算结果。否则，它会直接返回上一次的缓存结果。这样就避免了在每次渲染时都重新计算昂贵的值，提高了性能。

需要注意的是，尽管 useMemo 可以提高性能，但并不是在所有情况下都需要使用。只有在确实需要对计算值进行缓存以提高性能时，才应该使用 useMemo。过度使用 useMemo 可能会导致代码变得复杂和难以维护，因此需要谨慎使用。

React为什么采用了函数式组件，有什么好处

React 采用了函数式组件的主要原因有以下几点好处：

简洁性和可读性： 函数式组件相比于类组件更加简洁明了，代码量更少，易于阅读和理解。这使得开发者能够更快速地编写和维护代码。
易于理解： 函数式组件更贴近 JavaScript 函数的概念，减少了对于面向对象编程和类组件的学习成本，使得开发者更容易理解和掌握。
性能优化： 函数式组件本质上是纯函数，只依赖于输入的 props，不维护自己的状态，因此更容易进行性能优化。React 使用了 Hooks 机制，可以在函数式组件中使用状态和副作用，而不需要使用类组件。
更好的逻辑复用： 函数式组件可以更轻松地实现逻辑的复用，可以使用高阶组件、Render Props、Hooks 等方式进行组件逻辑的抽象和复用，使得代码更加模块化和可维护。
更容易进行单元测试： 函数式组件的纯函数特性使得它们更容易进行单元测试，可以更加方便地模拟输入和输出，测试组件的行为和逻辑。

综上所述，函数式组件在简洁性、可读性、性能优化、逻辑复用和单元测试等方面都有一些优势，因此 React 选择了采用函数式组件作为主要的组件编写方式。

手写一个前端计时器UI

以下是一个简单的前端计时器UI的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端计时器UI</title>
<style>
    .timer {
        font-family: Arial, sans-serif;
        text-align: center;
    }
    .timer label {
        font-size: 24px;
        margin-bottom: 10px;
    }
    .timer .time {
        font-size: 36px;
        color: #ff0000;
    }
    .timer button {
        font-size: 18px;
        padding: 10px 20px;
        margin-top: 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="timer">
        <label>倒计时：</label>
        <div class="time" id="timer">00:00:00</div>
        <button id="startBtn">开始计时</button>
        <button id="stopBtn">停止计时</button>
    </div>

    <script>
        let timerInterval;
        let seconds = 0;
        let minutes = 0;
        let hours = 0;

        function startTimer() {
            timerInterval = setInterval(updateTimer, 1000);
        }

        function stopTimer() {
            clearInterval(timerInterval);
        }

        function updateTimer() {
            seconds++;
            if (seconds >= 60) {
                seconds = 0;
                minutes++;
                if (minutes >= 60) {
                    minutes = 0;
                    hours++;
                }
            }

            const formattedTime = formatTime(hours) + ":" + formatTime(minutes) + ":" + formatTime(seconds);
            document.getElementById("timer").innerText = formattedTime;
        }

        function formatTime(time) {
            return time < 10 ? "0" + time : time;
        }

        document.getElementById("startBtn").addEventListener("click", startTimer);
        document.getElementById("stopBtn").addEventListener("click", stopTimer);
    </script>
</body>
</html>

这个计时器UI包含一个显示时间的 div 元素和两个按钮：一个用于开始计时，另一个用于停止计时。JavaScript 部分定义了启动和停止计时器的功能，并且每秒更新一次计时器显示的时间。

手写CSS扇形，颜色是白色，底色为黑

你可以使用 CSS 的伪元素和 CSS 变换来创建一个扇形。下面是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扇形</title>
<style>
    .fan {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: black;
        overflow: hidden;
    }

    .fan::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0% 50%);
        transform-origin: bottom right;
        transform: rotate(45deg);
    }
</style>
</head>
<body>
    <div class="fan"></div>
</body>
</html>

在这个示例中，.fan 类定义了一个圆形容器，背景颜色为黑色。然后使用 ::before 伪元素来创建一个白色的扇形，利用 clip-path 属性定义扇形的形状，并使用 transform 属性将其旋转到所需的角度。

手写sqrt算法

下面是一个简单的 JavaScript 实现平方根的算法：

function sqrt(x) {
    if (x < 0) return NaN;
    if (x === 0 || x === 1) return x;

    let low = 0;
    let high = x;
    let guess = x / 2;

    while (Math.abs(guess * guess - x) > 0.000001) {
        if (guess * guess > x) {
            high = guess;
        } else {
            low = guess;
        }
        guess = (low + high) / 2;
    }

    return guess;
}

// 示例用法
console.log(sqrt(16)); // 输出 4
console.log(sqrt(2));  // 输出约为 1.41421

这个算法使用了二分查找的思想，在给定精度下，通过不断调整猜测值的范围，逐步逼近平方根的值。

作者：贪睡的驼瑞驰复盘中
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

前端面试题详解整理109|手写sqrt算法，css扇形，计时器，性能优化，http协议，闭包。不连续子数组乘机，登录