美团到家前端一面

没想到又被到家捞了TT

自我介绍

问项目难点，项目完成用了多久

tcp udp的区别和使用场景

TCP（传输控制协议）和UDP（用户数据报协议）是两种主要的传输层协议，它们在网络通信中有不同的特点和使用场景。以下是它们的主要区别和常见使用场景：

TCP（传输控制协议）

特点

1. 面向连接：在传输数据之前，必须先建立连接（三次握手）。
2. 可靠传输：提供数据包的确认、重传和顺序控制，确保数据的完整性和正确性。
3. 流量控制：通过滑动窗口机制控制数据流量，防止网络拥塞。
4. 拥塞控制：通过算法（如慢启动、拥塞避免等）来控制数据发送速率，避免网络拥塞。

使用场景

1. 网页浏览：HTTP/HTTPS协议基于TCP，确保网页数据的完整性和可靠性。
2. 文件传输：FTP、SFTP等协议使用TCP，确保文件传输的可靠性。
3. 电子邮件：SMTP、IMAP、POP3等邮件协议使用TCP，确保邮件数据的可靠传输。
4. 远程登录：SSH、Telnet等协议使用TCP，确保远程会话的稳定性和安全性。

UDP（用户数据报协议）

特点

1. 无连接：不需要建立连接，直接发送数据。
2. 不可靠传输：不提供数据包的确认、重传和顺序控制，数据可能丢失或乱序。
3. 低延迟：由于没有连接建立和确认机制，传输速度快，适合实时应用。
4. 简单：协议头部较小，开销低。

使用场景

1. 实时视频和音频传输：如视频会议、IP电话（VoIP）等，要求低延迟，允许少量数据丢失。
2. 在线游戏：需要快速响应，允许少量数据丢失。
3. 广播和多播：如网络广播、视频流等，适合一次发送给多个接收者。
4. 简单查询：如DNS查询，数据量小且允许重发。

总结

• TCP：适用于需要高可靠性、数据完整性和顺序性的场景。
• UDP：适用于需要低延迟、实时性和允许少量数据丢失的场景。

希望这些信息能帮助你更好地理解TCP和UDP的区别及其使用场景。如果有更多问题，欢迎继续提问！

http和https

HTTP（HyperText Transfer Protocol）和HTTPS（HyperText Transfer Protocol Secure）是用于在网络上传输数据的两种协议。以下是它们的主要区别和特点：

HTTP

1. 全称：HyperText Transfer Protocol
2. 端口：默认使用端口80
3. 安全性：不加密，数据以明文形式传输，容易被窃听和篡改
4. 速度：由于没有加密和解密的过程，速度相对较快
5. 使用场景：适用于对安全性要求不高的场景，如公开的网页内容

HTTPS

1. 全称：HyperText Transfer Protocol Secure
2. 端口：默认使用端口443
3. 安全性：使用SSL/TLS协议对数据进行加密，确保数据传输的机密性、完整性和真实性
4. 速度：由于需要进行加密和解密，速度相对较慢，但现代硬件和优化技术已经大大减小了这个差距
5. 使用场景：适用于对安全性要求较高的场景，如在线支付、用户登录、敏感信息传输等

主要区别

1. 数据传输安全性：HTTP是明文传输，HTTPS是加密传输。
2. 证书：HTTPS需要SSL/TLS证书，HTTP不需要。
3. 端口：HTTP使用80端口，HTTPS使用443端口。
4. 性能：HTTPS由于加密和解密过程，性能略低于HTTP，但现代技术已经优化了这一点。

如何选择

• 安全性优先：如果你的应用涉及敏感信息（如用户登录、支付信息等），应选择HTTPS。
• 性能优先：如果你的应用对安全性要求不高，可以选择HTTP，但现代网站通常都会选择HTTPS以确保用户数据安全。

总结

HTTPS是HTTP的安全版本，通过加密数据传输来保护用户隐私和数据完整性。尽管HTTPS在性能上略有损失，但其提供的安全性使其成为现代网络应用的标准选择。

如果你有更多问题或需要进一步的帮助，请告诉我！

https加密过程

HTTPS（HyperText Transfer Protocol Secure）是一种通过在HTTP协议上添加SSL/TLS层来提供加密和安全通信的协议。以下是HTTPS加密过程的详细步骤：

1. 客户端发起请求

客户端（通常是浏览器）向服务器发起HTTPS请求。这个请求会包括客户端支持的SSL/TLS版本、加密算法和其他相关信息。

2. 服务器响应

服务器收到请求后，会选择一个双方都支持的SSL/TLS版本和加密算法，并将其发送给客户端。服务器还会发送自己的数字证书，该证书由受信任的证书颁发机构（CA）签发，包含服务器的公钥。

3. 客户端验证证书

客户端收到服务器的数字证书后，会验证该证书的有效性。验证过程包括检查证书是否由受信任的CA签发、证书是否在有效期内以及证书是否与服务器的域名匹配。

4. 生成会话密钥

一旦证书验证通过，客户端会生成一个随机的会话密钥，并使用服务器的公钥对这个会话密钥进行加密。然后，客户端将加密后的会话密钥发送给服务器。

5. 服务器解密会话密钥

服务器使用自己的私钥解密会话密钥。此时，客户端和服务器都拥有了相同的会话密钥。

6. 加密通信

使用会话密钥，客户端和服务器之间的通信将被加密。所有后续的数据传输都使用对称加密算法进行加密，这样可以保证数据的机密性和完整性。

7. 结束会话

当通信结束时，客户端和服务器会通过发送“关闭通知”来终止SSL/TLS会话。会话密钥将被销毁，确保不会被再次使用。

总结

HTTPS通过以下几个步骤来确保数据传输的安全性：

1. 客户端发起HTTPS请求。
2. 服务器响应并发送数字证书。
3. 客户端验证证书。
4. 客户端生成会话密钥并加密发送给服务器。
5. 服务器解密会话密钥。
6. 使用会话密钥进行加密通信。
7. 结束会话并销毁会话密钥。

这种机制确保了数据在传输过程中不会被窃听、篡改或伪造。

常用数据结构有哪些

常用的数据结构有很多，以下是一些常见的数据结构及其简要介绍：

1. 数组（Array）

   • 描述：一组相同类型的元素，按连续的内存位置存储。
   • 特点：快速访问（通过索引），插入和删除操作较慢（需要移动元素）。

2. 链表（Linked List）

   • 描述：由节点组成的线性集合，每个节点包含数据和指向下一个节点的指针。
   • 类型：单向链表、双向链表、循环链表。
   • 特点：插入和删除操作较快（不需要移动元素），访问速度较慢（需要遍历）。

3. 栈（Stack）

   • 描述：一种后进先出（LIFO）的数据结构。
   • 操作：主要操作有压栈（push）和弹栈（pop）。
   • 应用：函数调用、表达式求值、括号匹配等。

4. 队列（Queue）

   • 描述：一种先进先出（FIFO）的数据结构。
   • 类型：普通队列、双端队列、优先队列。
   • 应用：任务调度、广度优先搜索等。

5. 哈希表（Hash Table）

   • 描述：通过哈希函数将键映射到存储位置的数据结构。
   • 特点：快速查找、插入和删除操作。
   • 应用：数据库索引、缓存等。

6. 树（Tree）

   • 描述：一种层次结构的数据结构，由节点和边组成。
   • 类型：二叉树、二叉搜索树、平衡树（如AVL树、红黑树）、B树、堆（Heap）等。
   • 应用：文件系统、数据库索引、优先队列等。

7. 图（Graph）

   • 描述：由节点（顶点）和边组成的网络结构。
   • 类型：有向图、无向图、加权图等。
   • 应用：社交网络、地图导航、网络路由等。

8. 堆（Heap）

   • 描述：一种特殊的树形数据结构，满足堆属性。
   • 类型：最大堆、最小堆。
   • 应用：优先队列、排序算法（堆排序）等。

9. 集合（Set）

   • 描述：一种不包含重复元素的数据结构。
   • 特点：快速查找、插入和删除操作。
   • 应用：集合运算、去重等。

10. 字典（Dictionary）/映射（Map）

    • 描述：键值对的集合。
    • 特点：快速查找、插入和删除操作。
    • 应用：关联数组、数据库索引等。

这些数据结构在不同的应用场景中有不同的优势和劣势，选择合适的数据结构可以显著提高程序的效率和性能。

介绍一下数组 链表 队列 栈的特点

当然，以下是数组、链表、队列和栈的特点：

数组 (Array)

• 定义: 数组是一种线性数据结构，由一组相同类型的元素按顺序排列而成。
• 特点:
  • 固定大小: 数组的大小在创建时确定，不能动态调整。
  • 快速访问: 通过索引可以快速访问任意元素，时间复杂度为O(1)。
  • 内存连续: 数组在内存中是连续存储的。
  • 插入和删除: 在数组中间插入或删除元素需要移动其他元素，时间复杂度为O(n)。

链表 (Linked List)

• 定义: 链表是一种线性数据结构，由一组节点组成，每个节点包含数据和指向下一个节点的指针。
• 特点:
  • 动态大小: 链表的大小可以动态调整。
  • 顺序访问: 访问元素需要从头节点开始逐个遍历，时间复杂度为O(n)。
  • 内存分散: 链表的节点在内存中不必是连续存储的。
  • 插入和删除: 在链表中间插入或删除元素只需调整指针，时间复杂度为O(1)。

队列 (Queue)

• 定义: 队列是一种线性数据结构，遵循先进先出（FIFO, First In First Out）原则。
• 特点:
  • 操作: 主要操作包括入队（enqueue）和出队（dequeue）。
  • 访问限制: 只能访问队头和队尾元素。
  • 应用场景: 常用于任务调度、广度优先搜索等。

栈 (Stack)

• 定义: 栈是一种线性数据结构，遵循后进先出（LIFO, Last In First Out）原则。
• 特点:
  • 操作: 主要操作包括入栈（push）和出栈（pop）。
  • 访问限制: 只能访问栈顶元素。
  • 应用场景: 常用于递归、表达式求值、括号匹配等。

希望这些信息对你有帮助！如果有更多问题，欢迎继续提问。

平时用到过队列和栈吗

是的，队列和栈是计算机科学中非常常用的数据结构。它们在各种应用场景中都有广泛的使用。以下是一些常见的使用场景：

栈（Stack）

1. 函数调用管理：在大多数编程语言中，函数调用是通过栈来管理的。每次函数调用时，当前的执行状态（如局部变量、返回地址等）会被压入栈中，函数返回时，这些状态会从栈中弹出。
2. 表达式求值：栈常用于中缀表达式转换为后缀表达式（逆波兰表达式）以及后缀表达式的求值。
3. 撤销操作：许多软件（如文本编辑器、图像编辑软件）提供撤销功能，这通常是通过栈来实现的。每次操作都会被压入栈中，撤销时从栈中弹出操作并恢复状态。

队列（Queue）

1. 任务调度：操作系统中的任务调度通常使用队列来管理进程或线程。先进先出（FIFO）的特性使得队列非常适合这种场景。
2. 广度优先搜索（BFS）：在图的遍历中，广度优先搜索使用队列来存储待访问的节点。
3. 消息队列：在分布式系统中，消息队列用于在不同系统或组件之间传递消息。它们可以帮助实现异步通信和负载均衡。

示例代码

以下是栈和队列的简单实现示例（使用Python）：

# 栈的实现
class Stack:
    def __init__(self):
        self.items = []

    def is_empty(self):
        return len(self.items) == 0

    def push(self, item):
        self.items.append(item)

    def pop(self):
        if not self.is_empty():
            return self.items.pop()
        else:
            raise IndexError("pop from empty stack")

    def peek(self):
        if not self.is_empty():
            return self.items[-1]
        else:
            raise IndexError("peek from empty stack")

# 队列的实现
class Queue:
    def __init__(self):
        self.items = []

    def is_empty(self):
        return len(self.items) == 0

    def enqueue(self, item):
        self.items.append(item)

    def dequeue(self):
        if not self.is_empty():
            return self.items.pop(0)
        else:
            raise IndexError("dequeue from empty queue")

# 使用示例
stack = Stack()
stack.push(1)
stack.push(2)
print(stack.pop())  # 输出: 2

queue = Queue()
queue.enqueue(1)
queue.enqueue(2)
print(queue.dequeue())  # 输出: 1

这些数据结构在实际开发中非常有用，理解它们的工作原理和应用场景可以帮助你更好地解决问题。

进程和线程的区别

进程和线程是操作系统中两个重要的概念，它们在资源管理和任务执行方面有着显著的区别。以下是它们的主要区别：

进程 (Process)

1. 定义：进程是一个程序在其自身地址空间中运行的实例。它是资源分配的基本单位。
2. 资源：每个进程拥有独立的内存空间、文件描述符、全局变量等资源。
3. 开销：创建和销毁进程的开销较大，因为需要分配和回收大量的系统资源。
4. 隔离性：进程之间是相互独立的，一个进程的崩溃不会影响到其他进程。
5. 通信：进程间通信（IPC）相对复杂，需要使用管道、消息队列、共享内存等机制。

线程 (Thread)

1. 定义：线程是进程中的一个执行单元，也称为轻量级进程。一个进程可以包含多个线程。
2. 资源：线程共享进程的内存空间和资源，但每个线程有自己的栈、寄存器等。
3. 开销：创建和销毁线程的开销较小，因为线程共享进程的资源。
4. 隔离性：线程之间不完全隔离，一个线程的崩溃可能会导致整个进程的崩溃。
5. 通信：线程间通信（如共享变量）相对简单，因为它们共享相同的内存空间。

对比总结

特性	进程	线程
定义	独立运行的程序实例	进程中的执行单元
资源	独立的内存空间和资源	共享进程的内存和资源
创建开销	较大	较小
隔离性	高	低
通信	复杂（IPC机制）	简单（共享内存）

适用场景

• 进程：适用于需要高隔离性和独立资源的任务，如不同的应用程序。
• 线程：适用于需要高效并发执行的任务，如多线程服务器、并行计算等。

希望这些信息能帮助你更好地理解进程和线程的区别。

进程通信方式

进程通信（Inter-Process Communication，IPC）是指在操作系统中，不同进程之间交换数据和信息的机制。常见的进程通信方式包括以下几种：

1. 管道（Pipe）

   • 匿名管道：用于具有亲缘关系的进程之间的通信。数据在单向流动。
   • 命名管道（FIFO）：可以用于无亲缘关系的进程之间的通信。数据可以双向流动。

2. 消息队列（Message Queue）

   • 允许进程以消息的形式进行通信。消息队列可以在内核中持久化，适合于无亲缘关系的进程之间的通信。

3. 共享内存（Shared Memory）

   • 允许多个进程共享一块内存区域。是最快的进程通信方式之一，因为数据不需要在进程之间复制。

4. 信号量（Semaphore）

   • 用于进程间的同步和互斥控制。信号量可以防止多个进程同时访问共享资源。

5. 信号（Signal）

   • 用于通知进程某个事件的发生。信号是一种异步通信机制。

6. 套接字（Socket）

   • 主要用于网络通信，但也可以用于同一台机器上的进程间通信。支持面向连接的TCP和无连接的UDP。

7. 内存映射文件（Memory-Mapped File）

   • 允许多个进程通过映射同一个文件到它们的地址空间来共享数据。

8. 本地过程调用（Local Procedure Call，LPC）

   • 一种用于同一台计算机上进程间通信的机制，通常用于操作系统内核和用户模式进程之间的通信。

示例代码

以下是一个使用共享内存进行进程通信的简单示例（基于Python）：

import multiprocessing
import time

def writer(shared_memory, lock):
    with lock:
        shared_memory.value = 42
        print(f"Writer: wrote {shared_memory.value}")
        time.sleep(2)

def reader(shared_memory, lock):
    time.sleep(1)
    with lock:
        print(f"Reader: read {shared_memory.value}")

if __name__ == "__main__":
    lock = multiprocessing.Lock()
    shared_memory = multiprocessing.Value('i', 0)

    p1 = multiprocessing.Process(target=writer, args=(shared_memory, lock))
    p2 = multiprocessing.Process(target=reader, args=(shared_memory, lock))

    p1.start()
    p2.start()

    p1.join()
    p2.join()

在这个示例中，writer进程将数据写入共享内存，而reader进程读取共享内存中的数据。使用锁来确保数据访问的同步。

参考资料

• 进程间通信 - 维基百科
• Python multiprocessing 模块

希望这些信息对你有所帮助！如果有更多问题，请随时提问。

输入url到渲染页面完成的过程

当你在浏览器中输入一个URL并按下回车键后，浏览器会经历一系列步骤来渲染页面。以下是这个过程的详细步骤：

1. DNS解析：

   • 浏览器首先检查本地缓存中是否有该域名的IP地址。
   • 如果没有，浏览器会向DNS服务器发送请求，获取域名对应的IP地址。

2. 建立TCP连接：

   • 获取到IP地址后，浏览器会与服务器建立TCP连接。这个过程包括三次握手（SYN, SYN-ACK, ACK）。

3. 发送HTTP请求：

   • TCP连接建立后，浏览器会向服务器发送HTTP请求。这个请求包含了请求的方法（GET, POST等）、请求的URL、HTTP头信息等。

4. 服务器处理请求：

   • 服务器接收到请求后，会处理请求并生成响应。响应包含HTTP状态码、响应头和响应体（通常是HTML文档）。

5. 接收HTTP响应：

   • 浏览器接收到服务器的HTTP响应后，会检查响应的状态码。如果状态码是200（OK），则继续处理响应体。

6. 解析HTML：

   • 浏览器开始解析HTML文档，构建DOM树（Document Object Model）。

7. 处理CSS：

   • 浏览器解析HTML时，如果遇到CSS文件的引用，会发送请求获取CSS文件。
   • 获取到CSS文件后，浏览器会解析CSS，生成CSSOM（CSS Object Model）。

8. 处理JavaScript：

   • 如果HTML中包含JavaScript，浏览器会下载并执行JavaScript代码。JavaScript可能会修改DOM或CSSOM。

9. 构建渲染树：

   • 浏览器将DOM和CSSOM结合起来，构建渲染树（Render Tree）。

10. 布局（Layout）：

    • 浏览器计算每个节点在屏幕上的位置和大小。

11. 绘制（Painting）：

    • 浏览器将渲染树的每个节点绘制到屏幕上。

12. 显示页面：

    • 最终，用户在浏览器中看到完整的网页。

以下是一个简单的流程图，帮助理解这个过程：

graph TD;
    A[输入URL] --> B[DNS解析]
    B --> C[TCP连接]
    C --> D[发送HTTP请求]
    D --> E[服务器处理请求]
    E --> F[接收HTTP响应]
    F --> G[解析HTML]
    G --> H[处理CSS]
    G --> I[处理JavaScript]
    H --> J[构建渲染树]
    I --> J
    J --> K[布局]
    K --> L[绘制]
    L --> M[显示页面]

这个过程涉及到许多复杂的步骤和技术细节，但以上步骤概括了从输入URL到页面渲染完成的主要流程。

页面渲染的过程

页面渲染是将网页代码（如HTML、CSS和JavaScript）转换为用户可以看到和交互的视觉界面的过程。以下是页面渲染的主要步骤：

1. 解析HTML：

   • 浏览器从服务器获取HTML文档，并开始解析。
   • 解析过程中，浏览器会构建一个DOM（Document Object Model）树，表示HTML文档的结构。

2. 解析CSS：

   • 浏览器解析CSS文件和内联样式，生成CSSOM（CSS Object Model）树。
   • CSSOM树与DOM树结合，形成渲染树（Render Tree）。

3. 构建渲染树：

   • 渲染树包含了每个节点的视觉信息，如大小、颜色和位置。
   • 只包含可见元素（例如，display: none的元素不会出现在渲染树中）。

4. 布局（Layout）：

   • 浏览器计算每个元素的几何信息（位置和大小），这一步称为布局或回流（Reflow）。
   • 布局过程从根节点开始，逐层计算每个元素的位置和尺寸。

5. 绘制（Painting）：

   • 浏览器将渲染树中的每个节点转换为屏幕上的像素。
   • 这一步涉及绘制文本、颜色、边框、阴影和图像等。

6. 合成（Compositing）：

   • 浏览器将不同的图层合成到一起，形成最终的页面。
   • 现代浏览器使用图层来优化渲染性能，减少重绘和重排的次数。

详细步骤

graph TD
    A[获取HTML] --> B[解析HTML]
    B --> C[构建DOM树]
    A --> D[获取CSS]
    D --> E[解析CSS]
    E --> F[构建CSSOM树]
    C --> G[构建渲染树]
    F --> G
    G --> H[布局]
    H --> I[绘制]
    I --> J[合成]

关键点

• DOM树：表示HTML文档的结构。
• CSSOM树：表示CSS样式的结构。
• 渲染树：结合DOM和CSSOM，包含页面的可见元素。
• 布局：计算每个元素的几何信息。
• 绘制：将元素转换为屏幕上的像素。
• 合成：将不同图层合成，形成最终页面。

性能优化

• 减少DOM节点：过多的DOM节点会增加解析和布局的时间。
• 减少CSS复杂度：复杂的CSS选择器会增加解析时间。
• 使用图层：合理使用图层可以减少重绘和重排，提高渲染性能。
• 异步加载资源：使用async和defer属性异步加载JavaScript，减少阻塞渲染。

通过理解和优化页面渲染过程，可以显著提高网页的加载速度和用户体验。

介绍promise

Promise 是 JavaScript 中用于处理异步操作的一种对象。它代表一个在未来某个时间点可能会完成或失败的操作，并且可以用来处理异步操作的结果。Promise 提供了一种更清晰和更简洁的方式来处理异步代码，避免了传统的回调地狱（callback hell）问题。

Promise 的状态

一个 Promise 对象有以下三种状态：

1. Pending（待定）：初始状态，既没有被解决（fulfilled），也没有被拒绝（rejected）。
2. Fulfilled（已解决）：操作成功完成。
3. Rejected（已拒绝）：操作失败。

创建 Promise

你可以使用 new Promise 构造函数来创建一个 Promise 对象。构造函数接受一个执行函数，该函数有两个参数：resolve 和 reject。例如：

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  let success = true; // 假设这是异步操作的结果
  if (success) {
    resolve("操作成功");
  } else {
    reject("操作失败");
  }
});

使用 Promise

Promise 对象提供了 .then() 和 .catch() 方法来处理成功和失败的情况。

myPromise
  .then((result) => {
    console.log(result); // 操作成功
  })
  .catch((error) => {
    console.error(error); // 操作失败
  });

链式调用

Promise 的一个强大特性是可以链式调用 .then() 方法，从而处理一系列的异步操作。

myPromise
  .then((result) => {
    console.log(result);
    return new Promise((resolve, reject) => {
      // 另一个异步操作
      resolve("另一个操作成功");
    });
  })
  .then((result) => {
    console.log(result); // 另一个操作成功
  })
  .catch((error) => {
    console.error(error);
  });

Promise.all 和 Promise.race

• Promise.all：接受一个 Promise 数组，当所有 Promise 都成功时，返回一个新的 Promise，包含所有结果。如果有任何一个 Promise 失败，则返回失败的 Promise。

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results); // [result1, result2, result3]
  })
  .catch((error) => {
    console.error(error);
  });

• Promise.race：接受一个 Promise 数组，当第一个 Promise 完成（无论成功或失败）时，返回一个新的 Promise，包含该结果。

Promise.race([promise1, promise2, promise3])
  .then((result) => {
    console.log(result); // 第一个完成的 Promise 的结果
  })
  .catch((error) => {
    console.error(error);
  });

总结

Promise 提供了一种更优雅的方式来处理异步操作，避免了回调地狱，并且使代码更具可读性和可维护性。通过理解和使用 Promise，你可以更有效地管理 JavaScript 中的异步操作。

事件循环过程

promise是宏任务还是微任务

问输出顺序（最后3和6讲反了 该死啊该死怎么会说反的

防抖和节流

防抖（Debounce）和节流（Throttle）是两种常见的优化技术，主要用于控制函数的执行频率，避免频繁触发带来的性能问题。它们在前端开发中尤为常见，特别是在处理用户输入、滚动事件、窗口调整大小等高频率事件时。

防抖（Debounce）

防抖的原理是将多次执行变为最后一次执行。即在事件触发后，设定一个延迟时间，如果在这个时间内事件再次触发，则重新计时。只有当延迟时间内没有再次触发事件，才会执行函数。

适用场景

• 搜索框输入：用户停止输入后再发送请求。
• 窗口调整大小：用户停止调整窗口大小后再执行操作。

实现代码

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(this, args);
        }, wait);
    };
}

节流（Throttle）

节流的原理是规定一个单位时间，在这个单位时间内最多只能执行一次函数。如果这个单位时间内多次触发事件，只有一次生效。

适用场景

• 滚动事件：每隔一段时间处理一次滚动事件。
• 按钮点击：防止按钮被频繁点击导致多次提交。

实现代码

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function(...args) {
        const context = this;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

总结

• 防抖：在事件停止触发一定时间后才执行函数，适用于处理用户输入等需要在操作结束后执行的场景。
• 节流：在一定时间间隔内只执行一次函数，适用于滚动、窗口调整等高频率触发的场景。

这两种技术可以有效地提高性能，减少不必要的函数执行次数，从而提升用户体验。

手撕防抖函数

手撕防抖函数（Debounce Function）是一个常见的编程任务，特别是在处理用户输入或事件时。防抖函数的主要目的是限制某个函数在一定时间内的调用次数，避免频繁触发。

以下是一个用JavaScript编写的防抖函数的示例：

/**
 * 防抖函数
 * @param {Function} func - 需要防抖处理的函数
 * @param {number} wait - 等待时间（毫秒）
 * @param {boolean} immediate - 是否立即执行
 * @returns {Function} - 防抖处理后的函数
 */
function debounce(func, wait, immediate) {
    let timeout;

    return function() {
        const context = this;
        const args = arguments;

        const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };

        const callNow = immediate && !timeout;

        clearTimeout(timeout);
        timeout = setTimeout(later, wait);

        if (callNow) func.apply(context, args);
    };
}

// 使用示例
const myDebouncedFunction = debounce(function() {
    console.log('Function executed!');
}, 2000);

// 绑定到某个事件，例如窗口调整大小
window.addEventListener('resize', myDebouncedFunction);

解释

1. 参数：

   • func：需要防抖处理的函数。
   • wait：等待时间，单位是毫秒。
   • immediate：是否立即执行。如果为 true，则在等待时间的开始立即执行函数，而不是结束时。

2. 内部逻辑：

   • timeout：用于存储定时器的ID。
   • context 和 args：保存 this 上下文和函数参数，以便在稍后调用时使用。
   • later：在等待时间结束后执行的函数。如果 immediate 为 false，则在此时执行 func。
   • callNow：判断是否需要立即执行 func。
   • clearTimeout(timeout)：清除之前的定时器，防止多次触发。
   • setTimeout(later, wait)：设置新的定时器。
   • if (callNow) func.apply(context, args)：如果需要立即执行，则立即调用 func。

使用场景

防抖函数常用于以下场景：

• 搜索框输入：用户停止输入后再发送请求。
• 窗口调整大小：用户停止调整窗口大小后再执行某些操作。
• 滚动事件：用户停止滚动后再执行某些操作。

通过使用防抖函数，可以显著减少不必要的函数调用，提高性能和用户体验。

this是什么 对this的理解（涉及作用域

this 是 JavaScript 中的一个关键字，用于引用函数执行时的上下文对象。this 的值在不同的情况下会有所不同，具体取决于函数的调用方式。以下是对 this 的详细解释及其在不同作用域中的表现：

全局作用域

在全局作用域中，this 通常指向全局对象。在浏览器中，全局对象是 window。

console.log(this); // 在浏览器中输出 window 对象

函数作用域

在普通函数中，this 的值取决于函数的调用方式：

1. 作为对象的方法调用： 当函数作为对象的方法调用时，this 指向该对象。

   const obj = {
       name: 'Alice',
       greet: function() {
           console.log(this.name);
       }
   };
   obj.greet(); // 输出 'Alice'
   

2. 作为普通函数调用： 当函数作为普通函数调用时，this 在非严格模式下指向全局对象（浏览器中是 window），在严格模式下是 undefined。

   function greet() {
       console.log(this);
   }
   greet(); // 在非严格模式下输出 window，在严格模式下输出 undefined
   

3. 构造函数调用： 当函数作为构造函数调用时（使用 new 关键字），this 指向新创建的实例对象。

   function Person(name) {
       this.name = name;
   }
   const person = new Person('Bob');
   console.log(person.name); // 输出 'Bob'
   

4. 箭头函数： 箭头函数没有自己的 this，它会捕获其定义时所在上下文的 this 值。

   const obj = {
       name: 'Alice',
       greet: function() {
           const innerGreet = () => {
               console.log(this.name);
           };
           innerGreet();
       }
   };
   obj.greet(); // 输出 'Alice'
   

事件处理器

在事件处理器中，this 通常指向触发事件的 DOM 元素。

document.getElementById('myButton').addEventListener('click', function() {
    console.log(this); // 输出触发事件的按钮元素
});

显式绑定

可以使用 call、apply 和 bind 方法显式地设置 this 的值。

function greet() {
    console.log(this.name);
}

const obj = { name: 'Alice' };

greet.call(obj); // 输出 'Alice'
greet.apply(obj); // 输出 'Alice'

const boundGreet = greet.bind(obj);
boundGreet(); // 输出 'Alice'

总结

this 的值在 JavaScript 中是动态的，取决于函数的调用方式。理解 this 的行为对于编写和调试 JavaScript 代码非常重要。

vue双向绑定

在 Vue.js 中，双向绑定是指数据模型和视图之间的同步更新机制。Vue.js 提供了一个非常方便的指令 v-model 来实现双向绑定。v-model 通常用于表单元素，如输入框、复选框、单选按钮和选择框。

以下是一些常见的使用场景和示例：

输入框的双向绑定

<div id="app">
  <input v-model="message" placeholder="输入一些内容">
  <p>你输入的内容是: {{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: ''
    }
  });
</script>

在这个示例中，v-model 绑定了 message 变量到输入框。当用户在输入框中输入内容时，message 变量会自动更新，反之亦然。

复选框的双向绑定

<div id="app">
  <input type="checkbox" v-model="checked">
  <p>复选框状态: {{ checked }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      checked: false
    }
  });
</script>

在这个示例中，v-model 绑定了 checked 变量到复选框。当用户勾选或取消勾选复选框时，checked 变量会自动更新。

单选按钮的双向绑定

<div id="app">
  <input type="radio" v-model="picked" value="Option 1"> Option 1
  <input type="radio" v-model="picked" value="Option 2"> Option 2
  <p>你选择了: {{ picked }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      picked: ''
    }
  });
</script>

在这个示例中，v-model 绑定了 picked 变量到单选按钮。当用户选择不同的选项时，picked 变量会自动更新。

选择框的双向绑定

<div id="app">
  <select v-model="selected">
    <option disabled value="">请选择一个选项</option>
    <option>选项 A</option>
    <option>选项 B</option>
    <option>选项 C</option>
  </select>
  <p>你选择了: {{ selected }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      selected: ''
    }
  });
</script>

在这个示例中，v-model 绑定了 selected 变量到选择框。当用户选择不同的选项时，selected 变量会自动更新。

总结

v-model 是 Vue.js 中实现双向绑定的核心指令，它使得数据模型和视图之间的同步变得非常简单和直观。通过 v-model，你可以轻松地处理用户输入和表单数据。

如果你有更多关于 Vue.js 双向绑定的问题，欢迎继续提问！

算法：最长不含重复字符的子字符串

当然！以下是一个用JavaScript实现的算法，用于找到最长不含重复字符的子字符串：

function lengthOfLongestSubstring(s) {
    let n = s.length;
    let set = new Set();
    let ans = 0, i = 0, j = 0;
    
    while (i < n && j < n) {
        // try to extend the range [i, j]
        if (!set.has(s[j])) {
            set.add(s[j++]);
            ans = Math.max(ans, j - i);
        } else {
            set.delete(s[i++]);
        }
    }
    return ans;
}

// 示例
let s = "abcabcbb";
console.log(lengthOfLongestSubstring(s)); // 输出: 3

解释

1. 初始化：

   • n 是字符串的长度。
   • set 是一个集合，用于存储当前子字符串中的字符。
   • ans 是当前找到的最长子字符串的长度。
   • i 和 j 是两个指针，分别表示子字符串的起始和结束位置。

2. 滑动窗口：

   • 使用两个指针 i 和 j 来表示当前的窗口。
   • 如果 set 中不包含 s[j]，则将 s[j] 加入 set，并将 j 向右移动一位，同时更新 ans。
   • 如果 set 中已经包含 s[j]，则从 set 中删除 s[i]，并将 i 向右移动一位。

3. 返回结果：

   • 最后返回 ans，即最长不含重复字符的子字符串的长度。

这个算法的时间复杂度是 O(n)，因为每个字符最多被访问两次（一次被添加到集合中，一次被删除）。

反问：什么部门，做什么项目，什么技术栈，对前端学习的建议（基础更重要

#前端##面试##美团#

作者：生椰抹茶
链接：www.nowcoder.com/discuss/631…
来源：牛客网