前端面试提问（3）

1、js两个数相加会不会丢精度？

可能会遇到精度丢失的问题。JavaScript 使用的是 IEEE 754 浮点数标准，即一种二进制表示法，有时不能准确地表示十进制小数。如果你需要进行精确的十进制数值计算，可以使用一些处理精确数值的库，比如 BigInt、Decimal.js 或者 big.js。

2、整数溢出

在 JavaScript 中，整数溢出是指超出了 JavaScript 数值类型的范围，导致无法准确表示这个整数。如果需要处理大整数，可以考虑使用 BigInt 类型或者使用第三方库来处理。

3、接口调用超时，抛出错误怎么实现？

用Promise.race实现，其 接受一个包含多个 Promise 的可迭代对象（比如数组），并返回一个新的 Promise，该 Promise 将与最先解决（fulfilled）或拒绝（rejected）的 值。

function timeoutPromise(ms) {return new Promise((resolve, reject) => {setTimeout(() => {reject(new Error('接口调用超时'));}, ms);});
}function apiCall() {return new Promise((resolve, reject) => {// 模拟异步接口调用setTimeout(() => {resolve('接口调用成功');}, 500);});
}// 设置超时时间
const timeoutDuration = 300;// 使用 Promise.race 同时执行接口调用和超时 Promise
Promise.race([apiCall(), timeoutPromise(timeoutDuration)]).then((result) => {// 如果接口调用在超时前完成，result 将是接口调用的结果console.log(result);}).catch((error) => {// 如果超时，或者接口调用出错，error 将是相应的错误对象console.error(error.message);});

4、 发布订阅者模式和观察者模式区别

  • 发布-订阅者模式： 使用一个消息代理（消息通道或者事件总线）作为中介，发布者和订阅者之间没有直接联系，而是通过事件中心进行通信。EventBus.
  • 观察者模式： 观察者直接订阅被观察者，被观察者维护观察者列表，当状态发生变化时，直接通知观察者。Observer.

4.1 观察者模式

// 被观察者（Subject）
class Subject {constructor() {this.observers = []; // 观察者列表}// 添加观察者addObserver(observer) {this.observers.push(observer);}// 移除观察者removeObserver(observer) {this.observers = this.observers.filter(obs => obs !== observer);}// 通知观察者状态变化notifyObservers(message) {this.observers.forEach(observer => observer.update(message));}
}// 观察者（Observer）
class Observer {constructor(name) {this.name = name;}// 被观察者通知时调用的方法update(message) {console.log(`${this.name} 收到通知: ${message}`);}
}// 创建被观察者和观察者
const newsSubject = new Subject();const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');// 观察者订阅被观察者
newsSubject.addObserver(observer1);
newsSubject.addObserver(observer2);// 被观察者通知观察者
newsSubject.notifyObservers('新闻更新: 今天发生了一些重要事件。');

4.2 Vue.js 中的响应式原理

Object.defineProperty+观察者模式

  1. Observer（观察者）：

    • Vue.js 会遍历对象的每个属性，使用 Object.defineProperty 把属性转换为 getter 和 setter。
    • 当数据被访问或者修改时，会触发 getter 和 setter 中相应的逻辑。

  2. Dep（依赖，订阅者）：

    • 为每个被观察的属性创建一个 Dep 对象，用于管理依赖于该属性的 Watcher 对象。
    • Dep 对象有一个数组用于存储 Watcher。

  3. Watcher（桥梁）：

    • Watcher 对象会订阅一个或多个 Dep 对象。
    • 当被观察的数据发生变化时，Watcher 对象会收到通知，从而执行相应的回调函数。
function defineReactive(obj, key, val) {let dep = new Dep();Object.defineProperty(obj, key, {enumerable: true,configurable: true,get() {if (Dep.target) {dep.addSub(Dep.target);}return val;},set(newVal) {if (newVal !== val) {val = newVal;dep.notify();}}});
}class Dep {constructor() {this.subs = [];}addSub(sub) {this.subs.push(sub);}notify() {this.subs.forEach(sub => sub.update());}
}class Watcher {constructor() {Dep.target = this;}update() {console.log('数据发生变化，执行更新操作');}
}Dep.target = null;const data = {};
defineReactive(data, 'message', 'Hello, Vue!');const watcher = new Watcher();// 模拟触发数据变化
data.message = 'Hello, Vue.js!';

5、迭代器是什么

迭代器（Iterator）是 JavaScript 中的一个接口，它提供了一种顺序访问数据结构（如数组、Map、Set 等）元素的方法。迭代器对象可以通过 next() 方法依次访问数据结构中的每一个元素，直到数据结构的末尾，返回一个包含 value 和 done 属性的对象。

// 创建一个简单的数组
const myArray = ['apple', 'banana', 'cherry'];// 获取迭代器对象
const iterator = myArray[Symbol.iterator]();// 使用迭代器对象遍历数组元素
let result = iterator.next();
while (!result.done) {console.log(result.value);result = iterator.next();
}
  • myArray 是一个包含三个元素的数组。
  • 通过 [Symbol.iterator]() 获取了该数组的迭代器对象 iterator。
  • 使用 iterator.next() 方法来依次访问数组中的每个元素，直到 done 属性为 true，表示迭代结束。

6、前端可以通过文件切片上传，断点传输

前端可以通过文件切片上传（File Chunking）的方式来实现大文件的上传，这有助于避免上传过程中遇到的一些问题，例如网络中断导致整个文件上传失败的情况。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>File Chunk Upload</title>
</head>
<body><input type="file" id="fileInput" /><button onclick="uploadFile()">Upload</button><script>function uploadFile() {const fileInput = document.getElementById('fileInput');const file = fileInput.files[0];const chunkSize = 1024 * 1024; // 1MBconst totalChunks = Math.ceil(file.size / chunkSize);let currentChunk = 0;function uploadChunk() {const start = currentChunk * chunkSize;const end = Math.min((currentChunk + 1) * chunkSize, file.size);const chunk = file.slice(start, end);const formData = new FormData();formData.append('fileChunk', chunk);formData.append('totalChunks', totalChunks);formData.append('currentChunk', currentChunk);// 使用 XMLHttpRequest 或 Fetch API 发送 formData 到服务器// ...currentChunk++;if (currentChunk < totalChunks) {// 继续上传下一个块uploadChunk();} else {// 所有块上传完成，服务器处理合并等操作console.log('File upload complete!');}}// 开始上传第一个块uploadChunk();}</script>
</body>
</html>

6、vue的生命周期 data和method什么时候更新的，什么时候可以拿到vue实例

vue生命周期

在 created 钩子之后，你可以安全地访问和操作 data 和 methods，而在 beforeCreate 钩子中，它们还未被初始化。如果需要在初始化阶段执行一些逻辑，可以使用 beforeCreate 钩子。如果需要在 DOM 元素渲染后进行操作，可以使用 mounted 钩子。

7、

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/189636.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

4.C转python

4.C转python

1.建立函数: def 函数名(形参): 函数体(记得写缩进) return 返回值(python中可以没有return) 2.调用函数: 函数名(实参) 实参和形参个数相等即可,类型不需要相同 其中接收返回值与C中的差不多 3.如果只是定义而不调用则函数不会执行 4.先定义函数,后调用 5.python中可以…
阅读更多...
每天五分钟计算机视觉：ImageNet大赛的世界冠军AlexNet模型

每天五分钟计算机视觉：ImageNet大赛的世界冠军AlexNet模型

AlexNet模型 2012 Imagenet 比赛第一&#xff0c;Top5准确度超出第二10% &#xff0c;它让人们认识到了深度学习技术的威力。比 LeNet更深&#xff0c;用多层小卷积层叠加替换大卷积层&#xff0c;就是说每一个卷积层的通道数小&#xff0c;不像LeNet一样每个卷积层的通道数很大…
阅读更多...
记录华为云服务器（Linux 可视化 宝塔面板）-- 防火墙篇

记录华为云服务器（Linux 可视化 宝塔面板）-- 防火墙篇

文章目录 前言安装防火墙防火墙设置防火墙操作1.设置开机启动防火墙2.查看防火墙开放哪些端口3.重载防火墙配置&#xff08;修改配置后重新启动才生效&#xff09;4.查看防火墙状态5.开启防火墙6.关闭防火墙 若遇到无法开启查询已开放的端口查询端口是否开放&#xff08;80&…
阅读更多...
简单了解设计模式

简单了解设计模式

常见的设计模式大致可以分为三个主要类别&#xff1a;创建型、结构型和行为型。以下是这三个类别下的各种模式&#xff1a; 创建型模式 (Creational Patterns)&#xff1a;这类模式主要关注如何创建对象。 单例模式 (Singleton)&#xff1a;确保某一个类只有一个实例&#xff0…
阅读更多...
在内网开发中使用Nginx代理来访问钉钉新版服务端API

在内网开发中使用Nginx代理来访问钉钉新版服务端API

如果你在内网开发中使用Nginx代理来访问钉钉新版服务端API&#xff0c;你可以在Nginx配置文件中进行相应的配置。 以下是一个简单的示例Nginx配置&#xff0c;用于将对指定URL的请求代理到钉钉服务端API&#xff1a; server { listen 80; server_name your_server_domain; l…
阅读更多...
Python爬虫-新能源汽车销量榜

Python爬虫-新能源汽车销量榜

前言 本文是该专栏的第11篇，后面会持续分享python爬虫案例干货，记得关注。 本文以懂车平台的新能源汽车销量榜单为例，获取各车型的销量排行榜单数据。具体实现思路和详细逻辑，笔者将在正文结合完整代码进行详细介绍。 废话不多说，跟着笔者直接往下看正文详细内容。（附带…
阅读更多...
FFMPEG编译安装、简单使用

FFMPEG编译安装、简单使用

目录 源码下载编译和安装API简单使用源代码编译运行 工具的简单使用学习论坛 源码下载 地址: https://github.com/FFmpeg/FFmpeg git clone https://github.com/FFmpeg/FFmpeg.git编译和安装 因为使用在板端编译&#xff0c;因此没有使用交叉编译链的部分。将如下内容复制到…
阅读更多...
电梯安全远程监控系统的主要作用和意义

电梯安全远程监控系统的主要作用和意义

电梯是现代城市生活中必不可少的交通工具&#xff0c;为了保证其安全可靠的运行&#xff0c;电梯运行监测系统应运而生。本文将介绍电梯安全远程监控的工作原理、重要性 一、电梯安全远程监控系统的作用 　　◆实时监控和故障预警&#xff1a;电梯安全远程监控系统可以实时监测…
阅读更多...
加强网站稳定性！学习如何进行高效压力测试！

加强网站稳定性！学习如何进行高效压力测试！

前言 1、什么是压力测试&#xff1f; 软件压力测试是一种基本的质量保证行为&#xff0c;它是每个重要软件测试工作的一部分。 软件压力测试的基本思路很简单&#xff1a;不是在常规条件下运行手动或自动测试&#xff0c;而是在计算机数量较少或系统资源匮乏的条件下运行测试…
阅读更多...
Pandas进阶：文本处理

Pandas进阶：文本处理

引言 文本的主要两个类型是string和object。如果不特殊指定类型为string&#xff0c;文本类型一般为object。 文本的操作主要是通过访问器str 来实现的&#xff0c;功能十分强大&#xff0c;但使用前需要注意以下几点。 访问器只能对Series数据结构使用。 除了常规列变量df.c…
阅读更多...
从0开始学习JavaScript--JavaScript 集成测试

从0开始学习JavaScript--JavaScript 集成测试

JavaScript集成测试是确保整个应用程序组件协同工作的关键环节。通过模拟真实环境&#xff0c;集成测试能够发现不同组件之间的潜在问题&#xff0c;确保系统的稳定性和可靠性。本文将深入探讨JavaScript集成测试的核心概念、工具使用以及最佳实践&#xff0c;并通过丰富的示例…
阅读更多...
springboot多文件上传

springboot多文件上传

Spring Boot 是一个强大的、灵活的、开发效率高的框架&#xff0c;适合开发各种类型的 Web 应用或微服务&#xff0c;是现代化的企业级开发的首选。 接口编写 可以使用Spring Boot的MultipartResolver来实现上传多文件。 在pom.xml文件中添加以下依赖&#xff1a; <depende…
阅读更多...
1.2 Ubauntu 使用

1.2 Ubauntu 使用

一、完成VMware Tools安装 双击 VMwareTool 打开 Ubuntu 终端快捷键 AltControlT 切换汉语的快捷键是Alt空格 ls 打印出当前所在目录中所有文件和文件夹 cd 桌面 进入桌面文件夹 sudo ./vmware-install.pl 安装tool&#xff0c;输入之前设置的密码。 地址默认&#xff0c;按…
阅读更多...
华为OD机试真题-CPU算力分配-2023年OD统一考试（C卷）

华为OD机试真题-CPU算力分配-2023年OD统一考试（C卷）

题目描述： 现有两组服务器A和B，每组有多个算力不同的CPU，其中A[i]是A组第i个CPU的运算能力，B[i]是B组第i个CPU的运算能力。一组服务器的总算力是各CPU的算力之和。为了让两组服务器的算力相等，允许从每组各选出一个CPU进行一次交换，求两组服务器中，用于交换的CPU的算力，…
阅读更多...
UI自动化测试工具有哪些优势?

UI自动化测试工具有哪些优势?

UI自动化测试工具通过提高测试效率、覆盖率&#xff0c;减少测试时间和成本&#xff0c;以及支持持续集成等方式&#xff0c;为软件开发团队提供了一系列重要的优势&#xff0c;有助于提升软件质量和开发效率。 自动化执行&#xff1a;UI自动化测试工具可以模拟用户与应用程序的…
阅读更多...
HarmonyOS脚手架：UI组件之文本和图片

HarmonyOS脚手架：UI组件之文本和图片

前言 关于HarmonyOS脚手架&#xff0c;本篇是系列的第二篇&#xff0c;主要实现UI组件文本和图片的常见效果查看&#xff0c;本身功能特别的简单&#xff0c;其目的也是很明确&#xff0c;方便大家根据效果查看相关代码实现&#xff0c;可以很方便的进行复制使用&#xff0c;当…
阅读更多...
TCP三次握手过程

TCP三次握手过程

什么是TCP tcp是一个面向连接的、可靠的、基于字节流的传输层通信协议 面向连接&#xff1a;TCP连接是一对一的&#xff0c;不能实现一对多或多对一&#xff0c;TCP在通信前要首先建立连接&#xff0c;连接成功后才能开始进行通信可靠的&#xff1a;TCP连接要保证通信过程的可靠…
阅读更多...
iOS 版 ONLYOFFICE 文档 v7.4已更新！

iOS 版 ONLYOFFICE 文档 v7.4已更新！

iOS 版 ONLYOFFICE 文档 v7.4已更新 全新版本的免费 ONLYOFFICE 文档管理与编辑应用现已在 iOS 设备上推出。继续阅读以了解有关本次更新的信息&#xff0c;也可以在本文中找到应用的下载链接。 关于 ONLYOFFICE 文档 ONLYOFFICE 文档是一款适合手机与平板电脑的移动端应用套件…
阅读更多...
springboot中@Builder注解的详细用法实例，跟数据库结合。

springboot中@Builder注解的详细用法实例，跟数据库结合。

在Spring Boot中&#xff0c;Builder注解是Lombok库提供的一个注解&#xff0c;用于生成带有Builder模式支持的构造器方法。通过Builder注解&#xff0c;可以简化对象的创建过程&#xff0c;特别适用于需要设置多个属性的情况。 下面是一个使用Builder注解的示例&#xff1a; …
阅读更多...
基于python的FMCW雷达工作原理仿真

基于python的FMCW雷达工作原理仿真

这篇文章将介绍如何使用python来实现FMCW工作原理的仿真&#xff0c;第1章内容将介绍距离检测原理&#xff0c;第2章内容会介绍速度检测原理。 第1章 第1部分: 距离检测原理 调制的连续波雷达通常也被叫做调频连续波&#xff08;FMCW&#xff09;雷达是一个使用频率调制来测量…
阅读更多...
最新文章

Copyright @ 2022~2023