前端面试 还是做不到吗💩

wayhome在哪
1,554 阅读11分钟

最近也是又开始面试了，更新了一下简历，本大二菜鸡又来发面经了

1. Vue 和 React 你更喜欢哪个

Vue 和 React 都是优秀的前端框架，它们各有优势，在不同场景下都能发挥出色。若一定要说更喜欢哪个，需结合具体情况。

Vue 的优势在于它的学习曲线较为平缓，容易上手。它的模板语法简洁直观，对于有传统 HTML、CSS、JavaScript 基础的开发者来说很友好。同时，Vue 提供了渐进式的开发模式，可以逐步引入 Vue 的功能，适用于小型项目的快速迭代。并且，Vue 自带的生态系统也很完善，如 Vue Router 和 Vuex，能帮助开发者快速搭建项目。

React 则以其强大的灵活性和社区生态闻名。它使用虚拟 DOM 技术，性能优化空间大。React 的 JSX 语法让开发者可以在 JavaScript 中编写 HTML 结构，实现了组件化的高度封装和复用。而且 React 拥有庞大的开源社区，有许多第三方库和工具可供选择，适合大型复杂项目的开发。

如果项目对开发速度要求较高、团队成员技术栈偏传统，我会倾向于 Vue；如果项目需要高度的灵活性和强大的社区支持，更复杂的状态管理和性能优化，那么 React 会是更好的选择。

2. 对 React 函数式编程的理解

React 函数式编程是 React 开发中的一种编程范式，它强调将组件定义为纯函数，避免使用类组件和副作用。

优点

  • 简洁性：函数式组件的代码更加简洁，没有类组件的样板代码，如 this 关键字的使用和构造函数的定义。
  • 可维护性：由于函数式组件是纯函数，输入相同的 props 会输出相同的结果，易于理解和测试。
  • 性能优化：React 提供了 React.memo 等工具，对函数式组件进行浅比较，避免不必要的渲染，提高性能。

Hooks 的使用

React Hooks 是函数式编程的核心特性，它允许在不编写 class 的情况下使用 state 以及其他 React 特性。例如，useState 用于管理组件的状态，useEffect 用于处理副作用，如数据获取、订阅和手动 DOM 操作等。通过 Hooks，可以将有状态的逻辑提取到可复用的函数中，提高代码的复用性。

3. 除了函数式编程还有什么其他的编程范式

一开始问到真的懵逼了 根本没想到啊

除了函数式编程，常见的编程范式还有以下几种：

面向过程编程（Procedural Programming）

  • 核心思想：将程序看作是一系列按顺序执行的步骤和函数的集合。它以过程或函数为中心，通过将大问题分解成一个个小的步骤或函数来解决问题。
  • 特点：代码的执行流程是线性的，数据和操作数据的函数是分离的。程序通常由一系列的函数组成，每个函数完成特定的任务，通过函数之间的调用和参数传递来实现整体功能。
  • 示例：在 C 语言中，使用函数来完成特定任务，然后在主函数中依次调用这些函数来实现程序的整体功能。
#include <stdio.h>

// 定义一个计算两个整数之和的函数
int add(int a, int b) {
    return a + b;
}

int main() {
    int num1 = 5, num2 = 3;
    int result = add(num1, num2);
    printf("两数之和为: %d\n", result);
    return 0;
}

面向对象编程（Object-Oriented Programming，OOP）

  • 核心思想：将数据和操作数据的方法封装在一起，形成对象。通过对象之间的交互来实现程序的功能。面向对象编程强调对象的概念，每个对象都有自己的属性和行为。
  • 特点：具有封装、继承和多态三大特性。封装可以隐藏对象的内部实现细节，只对外提供必要的接口；继承允许创建新的类，继承现有类的属性和方法，从而实现代码的复用；多态允许不同的对象对同一消息做出不同的响应。
  • 示例：在 Python 中，定义一个类来表示一个矩形对象，并实现计算面积和周长的方法。
class Rectangle:
    def __init__(self, length, width):
        self.length = length
        self.width = width

    def area(self):
        return self.length * self.width

    def perimeter(self):
        return 2 * (self.length + self.width)

# 创建一个矩形对象
rect = Rectangle(5, 3)
print("矩形的面积为:", rect.area())
print("矩形的周长为:", rect.perimeter())

事件驱动编程（Event-Driven Programming）

  • 核心思想：程序的执行流程由事件的发生来决定。事件可以是用户的操作（如鼠标点击、键盘输入）、系统的消息（如定时器超时）等。程序通过监听事件，并在事件发生时执行相应的处理程序。
  • 特点：程序的执行顺序不是预先确定的，而是根据事件的发生顺序动态决定的。事件驱动编程常用于图形用户界面（GUI）编程、网络编程等领域。
  • 示例：在 JavaScript 中，使用事件监听器来处理按钮点击事件。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件驱动编程示例</title>
</head>

<body>
    <button id="myButton">点击我</button>
    <script>
        const button = document.getElementById('myButton');
        button.addEventListener('click', function () {
            alert('按钮被点击了！');
        });
    </script>
</body>

</html>

逻辑编程（Logic Programming）

  • 核心思想：基于逻辑规则来描述问题和求解问题。程序员通过定义事实和规则来表达问题的逻辑关系，然后通过逻辑推理来得出结论。
  • 特点：程序的执行过程是基于逻辑推理，而不是明确的指令序列。逻辑编程常用于人工智能、专家系统等领域。
  • 示例：在 Prolog 中，定义一些事实和规则，然后查询满足条件的结果。
% 定义事实
parent(john, mary).
parent(john, tom).
parent(susan, mary).
parent(susan, tom).

% 定义规则
grandparent(X, Y) :- parent(X, Z), parent(Z, Y).

% 查询谁是 mary 的祖父母
?- grandparent(G, mary).

元编程（Metaprogramming）

  • 核心思想：编写可以操作程序本身的程序。元编程允许程序在运行时动态地创建、修改和执行代码。
  • 特点：可以提高代码的灵活性和可维护性，但也增加了代码的复杂度。元编程常用于代码生成、框架开发等领域。
  • 示例：在 Ruby 中，使用元编程来动态定义类和方法。
class MyClass
    define_method(:dynamic_method) do
        puts "这是一个动态定义的方法。"
    end
end

obj = MyClass.new
obj.dynamic_method

4. 对 MCP 的理解

屏幕截图 2025-05-08 204158.png

Model Context Protocol（MCP）在与模型交互的相关场景里发挥着重要作用。

定义

Model Context Protocol（MCP）属于一种协议，其用途是在不同系统或者组件间传递和管理与模型相关的上下文信息。模型上下文信息涵盖了模型的配置、状态、参数等，这些信息对于模型的正常运行、精准预测以及高效交互极为关键。

工作原理

  • 信息封装：把模型的各类上下文信息封装成标准的数据结构，该结构要能清晰地表述模型的关键属性与状态。
  • 信息传输：借助网络协议（像 HTTP、TCP 等）在不同系统或者组件之间传输封装好的上下文信息。
  • 信息解析：接收方收到上下文信息之后，对其进行解析，并且依据这些信息对模型的运行状态和参数加以调整。

应用场景

  • 模型部署：在将模型部署到不同环境（例如开发、测试、生产环境）时，MCP 能够保证模型的上下文信息准确无误地传递，确保模型在各个环境下稳定运行。
  • 模型协作：在多模型协作的场景中，MCP 可以实现模型间上下文信息的共享，从而提升整体的处理效率和准确性。
  • 模型监控与管理：通过 MCP 传输模型的实时状态信息，方便对模型进行监控和管理，及时发现并解决潜在问题。

优势

  • 标准化：MCP 为模型上下文信息的传递和管理提供了标准化的方式，减少了不同系统之间的兼容性问题。
  • 灵活性：可以根据不同的需求定制上下文信息的内容和格式，适应多样化的模型和应用场景。
  • 可扩展性：随着模型技术的不断发展，MCP 可以方便地扩展以支持新的模型类型和功能。

5. 对 RAG 的理解

屏幕截图 2025-05-08 204044.png

现在重新学习一遍才发现之前对rag的理解是错的 (╥﹏╥)

RAG 通常指的是检索增强生成（Retrieval Augmented Generation），是一种结合了信息检索和语言生成技术的方法。

工作原理

在传统的语言生成模型中，模型的知识是基于预训练数据的，可能存在知识更新不及时或信息不准确的问题。RAG 通过在生成过程中引入外部知识库，当需要回答问题时，先从知识库中检索相关的信息，然后将这些信息与输入的问题一起作为输入，传递给语言生成模型进行生成。

优点

  • 知识准确性：能够利用最新的、准确的信息进行回答，提高回答的质量和可信度。
  • 可解释性：可以明确指出回答所依据的信息来源，增强回答的可解释性。

应用场景

RAG 广泛应用于问答系统、智能客服等领域，能够为用户提供更准确、更有用的回答。

6. 项目部署经验

项目部署过程中通常遵循的步骤：

环境搭建

首先，根据项目的技术栈，搭建相应的运行环境。例如，如果是 Node.js 项目，需要安装 Node.js 和 npm；如果是 Python 项目，需要安装 Python 和相应的依赖库。同时，配置好服务器的操作系统、网络环境等。

代码部署

将项目代码从版本控制系统（如 Git）拉取到服务器上。可以使用自动化工具（如 Jenkins、GitLab CI/CD 等）来实现代码的自动部署，确保代码的及时更新和一致性。

配置文件管理

根据不同的环境（开发、测试、生产），配置相应的环境变量和配置文件。例如，数据库连接信息、API 密钥等，确保项目在不同环境下能够正常运行。

容器化部署

如果项目采用了容器化技术（如 Docker），可以将项目打包成 Docker 镜像，并使用容器编排工具（如 Kubernetes）进行部署和管理。容器化部署可以提高项目的可移植性和隔离性。

监控和维护

部署完成后，设置监控系统（如 Prometheus、Grafana 等）对项目的运行状态进行监控，及时发现和解决问题。同时，定期进行备份和更新，确保项目的稳定性和安全性。

7. 介绍一下对 HTTPS 的理解

HTTPS 是超文本传输安全协议（Hypertext Transfer Protocol Secure）的缩写，它是在 HTTP 协议的基础上加入了 SSL/TLS 协议，通过加密和身份验证来保证数据传输的安全性。

工作原理

  • 对称加密和非对称加密结合：在建立连接时，客户端和服务器使用非对称加密算法（如 RSA）交换对称加密密钥。之后，双方使用这个对称加密密钥对传输的数据进行加密和解密，提高加密和解密的效率。
  • 身份验证：服务器通过 SSL/TLS 证书来证明自己的身份，客户端可以验证证书的有效性，确保与合法的服务器进行通信。

优点

  • 数据加密：防止数据在传输过程中被窃取或篡改，保护用户的隐私和数据安全。
  • 身份验证：确保客户端与合法的服务器进行通信，防止中间人攻击。
  • 搜索引擎优化：搜索引擎更倾向于展示使用 HTTPS 的网站，提高网站的排名和可信度。

应用场景

HTTPS 广泛应用于各种涉及用户隐私和数据安全的场景，如网上银行、电子商务、社交媒体等。

最后送自己一句话 路漫漫其修远兮，吾将上下而求索

avatar
文章
阅读
粉丝