No140.精选前端面试题，享受每天的挑战和学习-CSDN博客

本文链接：https://blog.csdn.net/weixin_42554191/article/details/133413287

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

canvas如何获取鼠标点击的元素，canvas有哪些具体方法

在 canvas 中，鼠标点击事件并不能直接获取到点击的元素，因为 canvas 绘制的图形实际上是以像素为单位的，而非真实的 DOM 元素。然而，你可以通过一些方法来模拟实现获取点击的元素的功能。这里介绍几种常见的方法：

手动检测点击位置：在鼠标点击事件发生时，获取点击的坐标位置，然后遍历 canvas 中的元素（例如保存在数组中的图形对象），检测点击位置是否在某个图形的边界内，从而确定点击的是哪个元素。
将图形元素封装为对象：在绘制图形时，将每个图形封装为一个对象，其中包含其位置、大小和其他属性。在点击事件发生时，遍历这些对象并检测点击位置是否在对象表示的图形范围内。
使用图形库或框架：借助像 Konva.js、Paper.js 或 Fabric.js 等图形库或框架，它们提供了更高级的绘图功能和交互事件处理。这些库可以帮助你轻松地处理鼠标点击事件，获取点击的元素。它们通常会提供方法来注册事件处理程序，例如 on('click', handler)，并将事件处理程序中的参数传递给你点击的元素。

需要注意的是，基于 canvas 的上述方法是模拟实现的，并非直接获取到 DOM 元素。如果你需要对具体的 DOM 元素进行操作或在点击后进行诸如事件委托等更复杂的操作，你可能需要更多地结合 canvas 和 DOM 来实现。

CSS如何隐藏当前的聊天窗口

要隐藏当前的聊天窗口，可以使用 CSS 的 display 属性或 visibility 属性来控制元素的可见性。以下是两种常见的方法：

使用 display: none;：这将完全隐藏元素，并不占据任何空间。

.chat-window {
  display: none;
}

你可以将 .chat-window 替换为你实际使用的聊天窗口的 CSS 类名或选择器。

使用 visibility: hidden;：这会使元素不可见，但仍然占据空间。

.chat-window {
  visibility: hidden;
}

同样地，你也可以根据实际情况修改 .chat-window 选择器以匹配你的聊天窗口。

这些 CSS 属性的改变可以通过 JavaScript 来触发，例如在点击按钮或执行某个事件时，添加或移除相应的 CSS 类来切换聊天窗口的可见性。

深浅拷贝的区别，实现的方法分别有哪些

深拷贝和浅拷贝是用于复制对象或数组的两种不同方式。

浅拷贝是创建一个新对象或数组，新对象的属性或新数组的元素是对原对象或数组的引用。也就是说，浅拷贝只复制了对象或数组的第一层结构，而没有递归复制嵌套的对象或数组。

深拷贝是创建一个全新的对象或数组，新对象的属性或新数组的元素和原对象或数组的值相同，但是它们是独立的，没有引用关系。深拷贝将递归复制所有嵌套的对象和数组。

下面是几种常见的实现方法：

手动递归拷贝：通过遍历对象或数组的属性或元素，并递归调用拷贝方法来实现深拷贝。
JSON.parse(JSON.stringify())：这种方法适用于拷贝简单的对象或数组，它使用 JSON.stringify() 将对象或数组序列化为 JSON 字符串，再使用 JSON.parse() 将 JSON 字符串解析为新的对象或数组。注意，这种方法无法拷贝包含函数、正则表达式等特殊类型的属性。

var obj = { /* ... */ };
var newObj = JSON.parse(JSON.stringify(obj));

使用第三方库：许多 JavaScript 库（如 Lodash、jQuery）提供了深拷贝的函数，可以方便地进行深拷贝操作。

var newObj = _.cloneDeep(obj); // 使用 Lodash 库的深拷贝函数

需要注意的是，深拷贝可能比浅拷贝更耗费内存和性能，因为它要递归复制所有嵌套的对象和数组。在进行深拷贝操作时，要特别注意避免出现循环引用的情况，以防止无限递归的发生。

你可以根据你的具体需求选择适合的拷贝方法，浅拷贝和深拷贝各有各的应用场景。

大文件如何实现上传

上传大文件通常需要采用分片上传的方式来处理，这种方法将大文件分割成小片段，分多次进行上传。以下是一个基本的大文件上传的实现步骤：

将大文件分割成小片段：使用前端技术（如File API）将大文件分割成适当大小的小片段。通常将文件划分为固定大小的块，例如 1MB 或 2MB。
逐个上传文件片段：使用异步上传请求将每个文件片段上传到服务器，可以使用 XMLHttpRequest、Fetch API 或第三方上传库（如Dropzone.js、Resumable.js）来实现。
服务器端接收上传的文件片段：在服务器端，接收每个文件片段的请求，并将它们保存在临时位置或缓存中。
合并文件片段：在服务器端，当所有文件片段都上传完成后，进行文件片段的合并操作。将所有文件片段按顺序合并成完整的大文件。
完成上传：服务器端将合并后的大文件保存在目标位置，并返回成功的响应给前端，表示上传完成。

在整个上传过程中，还需要处理一些额外的功能，如文件校验、断点续传、进度条显示等。这些功能可以根据具体需求进行实现。

需要注意的是，大文件上传涉及到网络传输和服务器资源消耗，因此在实际应用中需要考虑性能和安全性的问题。

websocket和http区别

WebSocket和HTTP是两种不同的协议，它们在通信的方式和特点上有以下区别：

连接方式：HTTP使用请求-响应的模式，即客户端发送请求给服务器，服务器返回响应后断开连接。而WebSocket是一种全双工通信协议，建立后客户端和服务器之间可以保持持久连接，双方可以同时进行数据交换。
开销和效率：HTTP协议每次通信都需要发送完整的请求头和响应头，而WebSocket在连接建立后，只需要经过简单的握手过程，之后的通信传输的数据包头较小，减少了额外开销，更加高效。
实时性：由于HTTP是单向请求-响应模式，服务器不能主动向客户端推送数据，需要客户端定期发送请求以获取最新数据。WebSocket允许服务器主动向客户端推送数据，可以实现实时性更好的双向通信。
支持的数据类型：HTTP主要用于传输文本和二进制文件。WebSocket支持传输任意类型的数据，包括原始数据、文本、JSON等。
端口占用：HTTP协议使用默认的80端口（HTTP）或443端口（HTTPS），而WebSocket协议使用默认的的WebSocket协议端口，即80或443，这避免了与其他服务的端口冲突。

综上所述，HTTP适用于客户端向服务器发送请求并获取响应的传统请求-响应模式。WebSocket则更适用于需要实时双向通信的场景，如在线聊天、实时数据更新等。根据具体的需求和场景，选择合适的协议可以提升通信效率和用户体验。

特点	WebSocket	HTTP
连接方式	全双工通信	单向请求-响应
开销和效率	通信传输数据包头较小，减少额外开销	每次通信需要发送完整的请求头和响应头
实时性	支持服务器主动向客户端推送数据	需要定期发送请求以获取最新数据
支持的数据类型	支持传输任意类型的数据	主要用于传输文本和二进制文件
端口占用	使用默认的WebSocket协议端口（80或443）	使用默认的HTTP协议端口（80或443）