前端面试提问(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+观察者模式
-
Observer(观察者):
- Vue.js 会遍历对象的每个属性,使用
Object.defineProperty把属性转换为 getter 和 setter。 - 当数据被访问或者修改时,会触发 getter 和 setter 中相应的逻辑。
- Vue.js 会遍历对象的每个属性,使用
-
Dep(依赖,订阅者):
- 为每个被观察的属性创建一个 Dep 对象,用于管理依赖于该属性的 Watcher 对象。
- Dep 对象有一个数组用于存储 Watcher。
-
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、
相关文章:
前端面试提问(3)
1、js两个数相加会不会丢精度? 可能会遇到精度丢失的问题。JavaScript 使用的是 IEEE 754 浮点数标准,即一种二进制表示法,有时不能准确地表示十进制小数。如果你需要进行精确的十进制数值计算,可以使用一些处理精确数值的库&…...
fl studio21.2最新汉化中文完整版网盘下载
fl studio 21中文版是Image-Line公司继20版本之后更新的水果音乐制作软件,很多用户不太理解,为什么新版本不叫fl studio 21或fl studio2024,非得直接跳到21.2版本,其实该版本是为了纪念该公司22周年,所以该版本也是推出…...
差分数组相关知识点以及刷题
差分数组 差分数组是什么? **举例:**对于数组考虑数组 a[1,3,3,5,8],对其中的相邻元素两两作差(右边减左边),得到数组 [2,0,2,3]。然后在开头补上 a[0],得到差分数组: d[1,2,0…...
使用 DMA 在 FPGA 中的 HDL 和嵌入式 C 之间传输数据
使用 DMA 在 FPGA 中的 HDL 和嵌入式 C 之间传输数据 该项目介绍了如何在 PL 中的 HDL 与 FPGA 中的处理器上运行的嵌入式 C 之间传输数据的基本结构。 介绍 鉴于机器学习和人工智能等应用的 FPGA 设计中硬件加速的兴起,现在是剥开几层“云雾”并讨论 HDL 之间来回传…...
uniapp地图基本使用及解决添加markers不生效问题?
uniapp地图使用 App端 通过 nvue 页面实现地图 文章目录 uniapp地图使用效果图templatejs添加 marker使用地图查看位置移到到当前位置 效果图 template <template><view class"mapWrap"><!-- #ifdef APP-NVUE --><map class"map-containe…...
使用系统ProgressBar实现三色进度条
使用系统ProgressBar实现如图三色进度条: //布局中<ProgressBarandroid:layout_width"0dp"android:layout_height"8dp"android:layout_marginLeft"16dp"app:layout_constraintBottom_toBottomOf"id/photo"app:layout_c…...
Vue3中的组合式API的详细教程和介绍
文章目录 前言介绍组合式 API 基础setup 组件选项 带 ref 的响应式变量生命周期钩子注册内部 setupwatch 响应式更改独立的 computed 属性后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:vue.js 🐱👓博主在前端…...
Java后端开发——JDBC(万字详解)
Java后端开发——JDBC(万字详解) 今日目标 掌握JDBC的的CRUD理解JDBC中各个对象的作用掌握Druid的使用 1,JDBC概述 在开发中我们使用的是java语言,那么势必要通过java语言操作数据库中的数据。这就是接下来要学习的JDBC。 1.1 …...
python etree.HTML 以及xpath 解析网页的工具
文章目录 导入模块相关语法实战 导入模块 from lxml import etree相关语法 XPath(XML Path Language)是一种用于在XML文档中定位和选择元素的语言。XPath的主要应用领域是在XML文档中进行导航和查询,通常用于在XML中选择节点或节点集合。以…...
电机伺服驱动学习笔记(7)待编辑
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么?二、使用步骤1.引入库2.读入数据 总结 前言 提示:这里可以添加本文要记录的大概内容: 例如:…...
【云备份】业务处理
文章目录 1. 业务处理作用功能 2. 代码框架编写构造函数UpLoad ——文件上传请求ListShow —— 展示页面请求处理实现Download —— 下载请求的处理实现断点续传实现 1. 业务处理 作用 业务处理模块是对客户端的业务请求进行处理 功能 1.文件上传请求:备份客户端…...
JVM GC算法
一, 垃圾回收分类: 按线程数分,可以分为串行垃圾回收器和并行垃圾回收器。 按工作模式分,可以分为并发垃圾回收器和独占式垃圾回收器 按碎片处理方式分,可以分为压缩式垃圾回收器和非压缩式垃圾回收器按工作的内存区间分,又可分为…...
对Spring框架的一些总结
对Spring框架的一些总结 在文章开头我真心推荐大家一个优秀的编程老师:孙帅老师(孙哥suns),孙帅老师在哔哩哔哩的Spring5教学视频时长接近33个小时,从0基础到一步一步手把手的教你抽丝剥茧分析Spring框架的所有知识,孙帅老师的教…...
C# WPF上位机开发(第一个应用)
【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 万事开头难,很多事情都是难在第一步。走出了这第一步,回过头看以前走的每一步,发现其实也不难。用c# wpf编写界…...
有点迷糊class和初始化参数的用法了
翻阅手册https://www.runoob.com/python3/python3-class.html Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的。本章节我们将详细介绍Python的面向对象编程。 如果你以前没有接触过面向对象的编程语言&…...
如何选择一款安全稳定的跨境浏览器?
选择适合自己的跨境浏览器是进行跨境电商和跨境交流的关键一步。本文将为您介绍如何客观地选择一款安全稳定的跨境浏览器,以便更好地进行跨境业务。 在选择跨境浏览器时,以下几个因素是需要考虑的: 网络速度:跨境业务需要稳定而高…...
SQL Server 数据库,使用函数查询统计信息
4.1 在查询中使用函数 在前面章节已经学习了一些简单的增、删、改、查询的T-SOL.语句,但是为了更方便快捷地完 成大量的任务,SOLServer提供了一些内部函数,可以和SOLServer的SELECT语句联合使用,也可 以与UPDATE和INSERT一起使用&…...
mysql区分大小写吗
mysql在windows下默认是不区分大小写的,在linux下默认是区分大小写的。 所以,为了避免出问题,许多公司的数据库编程规范中明确规定:库名、表名、列名、索引名一律小写,不同单词之间以下划线分割,且控制在3…...
HarmonyOS 开发案例分享:万能卡片也能用来玩游戏
一、前言 作为一名开发爱好者,从大了讲,我学习并进行 HarmonyOS 相关开发是为了能为鸿蒙生态建设尽一份绵薄之力,从小了讲,就是为了自己的兴趣。而万能卡片是一个让我非常感兴趣的东西。 很多时候我跟别人解释什么是万能卡片&…...
Could NOT find resource [logback-test.xml]
修改 之后就可以正常启动了...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
Java入门学习详细版(一)
大家好,Java 学习是一个系统学习的过程,核心原则就是“理论 实践 坚持”,并且需循序渐进,不可过于着急,本篇文章推出的这份详细入门学习资料将带大家从零基础开始,逐步掌握 Java 的核心概念和编程技能。 …...
(转)什么是DockerCompose?它有什么作用?
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用,而无需手动一个个创建和运行容器。 Compose文件是一个文本文件,通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
【JVM】Java虚拟机(二)——垃圾回收
目录 一、如何判断对象可以回收 (一)引用计数法 (二)可达性分析算法 二、垃圾回收算法 (一)标记清除 (二)标记整理 (三)复制 (四ÿ…...
NPOI操作EXCEL文件 ——CAD C# 二次开发
缺点:dll.版本容易加载错误。CAD加载插件时,没有加载所有类库。插件运行过程中用到某个类库,会从CAD的安装目录找,找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库,就用插件程序加载进…...
Kafka主题运维全指南:从基础配置到故障处理
#作者:张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1:主题删除失败。常见错误2:__consumer_offsets占用太多的磁盘。 主题日常管理 …...
