最近一些前端面试问题整理

最近一些前端面试问题整理

    • 4月8号
      • 1. TS 中的 类型别名 和接口的区别是什么?
      • 2. 什么是深拷贝和浅拷贝?深浅拷贝的方法有哪些?
        • 浅拷贝(Shallow Copy)
        • 深拷贝(Deep Copy)
        • 区别总结
      • 3. 使用 JSON.stringify 和 JSON.parse 实现深拷贝存在一些局限性和缺点
      • 4. React fiber 与生命周期有冲突吗?React 高版本为什么要废弃掉生命周期?
        • React Fiber 与生命周期的冲突
        • 废弃生命周期的原因
        • 新增的生命周期函数
        • 结论
      • 5. React fiber 重写了 window.requestIdelCallbalk ,可以了解下为什么要重写,用什么写的(用调度器)
      • 6. 斐波那契数列
        • 递归方法
        • 动态规划方法
        • 矩阵快速幂方法

4月8号

1. TS 中的 类型别名 和接口的区别是什么?

在以往的面向对象语言中,例如Java,接口是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类去实现。
在TypeScript中,接口(Interfaces)是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。而类型别名(Type Aliases)也可以用来描述对象的形状或者函数签名,但这二者在使用和特性上有一些区别:

类型别名(Type Aliases)

  • 基本用途:类型别名可以用来描述基本类型、联合类型、元组,以及类、接口或任何其他类型的实例。
  • 可扩展性:类型别名不支持声明合并,即不能有多个同名的类型别名声明。
  • 使用场景:类型别名通常用于描述复杂的联合类型或交叉类型,或者当你需要使用 typeof 获取类型时。
  • 灵活性:类型别名可以用于更广泛的类型描述,包括映射类型、条件类型等 高级类型 操作。

接口(Interfaces)

  • 基本用途:接口主要用于描述对象的形状,规定了对象必须具备的属性和方法。
  • 可扩展性:接口支持声明合并,即可以有多个同名的接口声明,它们会自动合并。
  • 使用场景:接口非常适合用于定义对象、函数的参数和返回值的契约。
  • 扩展性:接口可以通过继承其他接口来扩展,这有助于建立类型之间的层次结构。

区别总结

  • 扩展性:都支持扩展,只不过写法不同。
  • 合并:接口支持声明合并,而类型别名不支持。
  • 用途:类型别名更加灵活,可以描述更广泛的类型结构,而接口更侧重于对象的形状和类型契约。
  • 实现细节:类型别名可以使用 typeof 获取类型,这在某些高级用例中非常有用,如结合使用类和模块时。

在实际开发中,选择使用类型别名还是接口取决于具体的使用场景。有时,为了保持代码的清晰和一致性,开发者可能会选择其中一种方式作为主要的类型描述手段。然而,在许多情况下,类型别名和接口可以并行使用,以满足不同的需求和偏好。

https://blog.csdn.net/imagine_tion/article/details/118686460

2. 什么是深拷贝和浅拷贝?深浅拷贝的方法有哪些?

深拷贝和浅拷贝是编程中用来复制对象的两种不同方法,它们在处理对象及其属性时的行为和结果有所不同。

浅拷贝(Shallow Copy)

浅拷贝创建一个新对象,但是这个新对象的属性指向的是原始对象中属性的引用类型值的引用。换句话说,浅拷贝只是复制了对象的第一层属性,对于嵌套的对象或数组,它不会创建新的实例,而是复制引用。

浅拷贝的方法

  1. 使用Object.assign()方法,它可以将一个或多个源对象的所有可枚举属性复制到目标对象。
  2. 使用展开运算符...,它可以在创建新对象或数组时“展开”现有对象或数组的属性。
深拷贝(Deep Copy)

深拷贝会创建一个新对象,并且递归地复制原始对象中所有的属性,包括嵌套的对象和数组。这意味着深拷贝会创建原始对象中所有对象的副本,新对象和原始对象之间不会共享任何引用。

深拷贝的方法

  1. 使用JSON.parse(JSON.stringify(object))方法,这种方法适用于简单的对象结构,不能复制函数、undefined、循环引用等,这个方法还有其他缺点,具体可看下面一个问题。
  2. 使用Object.create(null)方法,通过手动复制每个属性来创建一个深拷贝。
  3. 使用第三方库,如lodash_.cloneDeep()方法,它提供了更全面和可靠的深拷贝功能。
区别总结
  • 引用:浅拷贝只复制了对象的第一层属性,对于引用类型的属性,新对象和原始对象仍然指向同一个引用。深拷贝会递归地复制所有层级的属性,新对象和原始对象之间没有任何引用关系。
  • 性能:浅拷贝通常比深拷贝更快,因为它不需要递归地处理每个属性。
  • 适用场景:如果对象没有复杂的嵌套结构,或者你只需要复制对象的顶层结构,浅拷贝可能是一个合适的选择。如果你需要完整复制一个复杂的对象,包括它所有的嵌套对象和数组,那么你应该使用深拷贝。

在实际开发中,选择哪种拷贝方法取决于对象的复杂性和拷贝的需求。理解浅拷贝和深拷贝的区别对于编写可靠和高效的代码非常重要。

3. 使用 JSON.stringify 和 JSON.parse 实现深拷贝存在一些局限性和缺点

  1. 循环引用问题:如果原始对象中存在循环引用(即一个对象的属性指向自身或其子属性),JSON.stringify 会失败并抛出错误。

  2. 特殊类型丢失JSON.stringify 无法序列化函数、undefinedSymbol 类型以及循环引用。这些情况下,相应的属性在序列化结果中会被忽略或转换为 null

  3. 构造函数信息丢失:使用 JSON.parse(JSON.stringify(obj)) 进行深拷贝后,新对象会丢失原始对象的构造函数信息。这意味着即使你复制了一个由特定构造函数创建的对象,复制品也会被视为 Object 的实例。

  4. 日期和正则表达式问题Date 对象在序列化后会变成它们的 ISO 字符串表示形式,而正则表达式会变成空对象 {}

  5. NaN、Infinity 和 -Infinity 问题:这些特殊的数值在序列化时会变成 null

  6. 枚举属性问题JSON.stringify 默认只序列化对象的可枚举属性。如果对象中有非枚举属性,这些属性将不会被包含在序列化的结果中。

  7. 性能问题:对于大型或复杂的对象,JSON.stringifyJSON.parse 可能会导致性能问题,尤其是在频繁使用时。

  8. 兼容性问题:尽管 JSON 是一个广泛支持的标准,但在某些旧环境或边缘情况下,可能需要额外的处理来确保兼容性。

  9. 安全问题:由于 JSON.stringify 会将对象转换为字符串,如果对象中包含了敏感信息,那么在日志或调试输出中可能会有泄露风险。

  10. 不支持的结构:某些对象结构,如 MapSetWeakMapWeakSetDataView 等,在序列化时不会被正确处理,通常会被转换为空对象或丢失。

在使用 JSON.stringifyJSON.parse 进行深拷贝时,需要考虑到上述缺点,并根据具体情况决定是否使用其他深拷贝方法,如递归复制、使用第三方库(如 Lodash 的 _.cloneDeep 方法)或浏览器提供的 structuredClone 方法(如果兼容)。

提到的structuredClone 方法可参考:https://juejin.cn/post/7193997944171790396

4. React fiber 与生命周期有冲突吗?React 高版本为什么要废弃掉生命周期?

React Fiber 与生命周期函数确实存在一些冲突,特别是在 React 16 及以后的版本中,Fiber 架构的引入导致了一些生命周期函数的废弃。以下是详细解释:

React Fiber 与生命周期的冲突

React Fiber 是一种新的协调算法,它允许 React 将渲染工作分割成多个阶段,从而提高应用的性能和响应性【1】【3】。Fiber 架构的目标是使得组件的渲染可以被中断和恢复,从而更好地处理大型应用和复杂的交互【1】【3】。

废弃生命周期的原因

在 React 16 中,Fiber 架构的引入导致了三个生命周期函数的废弃:componentWillMountcomponentWillReceivePropscomponentWillUpdate【5】【4】【6】。这些函数在 Fiber 架构中可能会被多次执行,这与它们原有的设计目的相冲突,即它们应该只在组件生命周期的特定时刻执行一次【5】【4】【6】。

  • componentWillMount 被废弃是因为在 Fiber 架构中,组件的挂载可能会被中断和延迟,这意味着 componentWillMount 可能会被多次调用,这与它的预期行为不符【5】【4】【6】。
  • componentWillReceiveProps 存在问题,因为它在处理 props 变化时可能会导致状态的不可预测更新,这与 React 希望的状态管理方式相冲突【5】【4】【6】。
  • componentWillUpdate 被废弃是因为在 Fiber 架构中,组件的更新可能会被中断,这使得 componentWillUpdate 无法保证只在每次更新前执行一次【5】【4】【6】。
新增的生命周期函数

为了解决这些问题,React 引入了两个新的生命周期函数:getDerivedStateFromPropsgetSnapshotBeforeUpdate【5】【4】【6】。

  • getDerivedStateFromProps 是一个静态方法,它允许开发者在渲染前根据新的 props 和现有的 state 计算出新的 state【5】【4】【6】。
  • getSnapshotBeforeUpdate 允许开发者在组件更新 DOM 之前获取最新的 DOM 信息,这可以用于处理像滚动位置这样的场景【5】【4】【6】。
结论

React Fiber 架构的引入是为了提高性能和响应性,但这导致了一些生命周期函数的行为与预期不符。因此,React 团队废弃了一些旧的生命周期函数,并引入了新的生命周期函数来提供更好的状态管理和性能优化【5】【4】【6】。开发者需要根据最新的生命周期函数来更新他们的组件代码,以确保与 React 的最新版本兼容。

https://zhuanlan.zhihu.com/p/424967867
https://juejin.cn/post/7006612306809323533
https://juejin.cn/post/7184747220036485177
https://developer.aliyun.com/article/1312153
https://segmentfault.com/a/1190000021272657
https://www.cnblogs.com/mengff/p/12894886.html
https://juejin.cn/post/6844903518357159949

5. React fiber 重写了 window.requestIdelCallbalk ,可以了解下为什么要重写,用什么写的(用调度器)

React Fiber 重写了 window.requestIdleCallback 的原因是为了更好地控制异步任务的调度,尤其是在浏览器的空闲时间。requestIdleCallback 是一个浏览器 API,允许开发者在浏览器空闲时执行低优先级的任务。然而,这个 API 在不同的浏览器和版本中可能存在兼容性问题,或者在实际使用中的表现可能与预期有所差异。

为了确保 React 应用在各种环境下都能可靠地运行,React Fiber 采用了自定义的调度器来模拟 requestIdleCallback 的行为。React 团队通过创建一个基于 MessageChannelrequestAnimationFrame 的调度器来解决这些问题。这个调度器可以在浏览器的主线程上安排任务,同时考虑到浏览器的空闲时间和高优先级的任务。

通过这种方式,React Fiber 能够在保证应用性能的同时,避免依赖可能存在问题的浏览器 API。这种自定义的调度器提供了更一致的行为,使得 React 能够更有效地管理异步渲染任务,尤其是在处理大型或复杂的 UI 更新时。这也有助于提高应用的响应性和用户体验,因为它可以确保即使在资源紧张的情况下,用户交互仍然能够获得及时的响应。

6. 斐波那契数列

斐波那契数列(Fibonacci sequence)是一个非常著名的数列,它在数学、计算机科学以及自然界中都有广泛的应用。斐波那契数列的定义如下:

  1. 数列的前两个数字是 0 和 1。
  2. 从第三个数字开始,每个数字都是前两个数字的和。

用数学公式表示,斐波那契数列可以写成:

F(0) = 0, F(1) = 1, F(n) = F(n-1) + F(n-2) 对于 n > 1

斐波那契数列的前几个数字是:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, …

在计算机科学中,斐波那契数列通常是算法和编程问题的一个经典例子。计算斐波那契数列的值可以通过递归、动态规划、矩阵快速幂等多种方法实现。

递归方法

递归方法是最直接的实现方式,但它的时间复杂度是指数级的,因为它重复计算了很多子问题。

function fibonacci(n) {if (n <= 0) return 0;if (n === 1) return 1;return fibonacci(n - 1) + fibonacci(n - 2);
}
动态规划方法

动态规划方法通过迭代计算斐波那契数列的值,并存储已计算的结果,避免了重复计算,时间复杂度为 O(n)。

function fibonacci(n) {let fib = [0, 1];for (let i = 2; i <= n; i++) {fib[i] = fib[i - 1] + fib[i - 2];}return fib[n];
}
矩阵快速幂方法

矩阵快速幂方法可以进一步优化斐波那契数列的计算,将时间复杂度降低到 O(log n)。

function matrixMultiply(a, b) {let c = [[0, 0], [0, 0]];for (let i = 0; i < 2; i++) {for (let j = 0; j < 2; j++) {for (let k = 0; k < 2; k++) {c[i][j] += a[i][k] * b[k][j];}}}return c;
}function fibonacci(n) {let result = [[1, 1], [1, 0]];let power = [[1, 0], [0, 1]];while (n > 0) {if (n % 2 === 1) {result = matrixMultiply(result, power);}power = matrixMultiply(power, power);n = Math.floor(n / 2);}return result[0][0];
}

斐波那契数列不仅在数学上有着丰富的性质,而且在计算机科学中也是算法设计和性能分析的重要工具。通过学习和实现斐波那契数列的不同计算方法,可以加深对算法复杂度和优化策略的理解。

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

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

相关文章

Python中Python-docx 包的run介绍

先对run做一个简单地介绍。每个paragraph对象都包含一个run对象的列表。举例&#xff1a; 这是一个简短的段落。 from docx import Document doc Document("1.docx") #上面这段话保存在1.docx中 print("这一段的run个数是&#xff1a;",len(doc.paragr…

GitHub repository - Code - Issues - Pull Requests - Wiki

GitHub repository - Code - Issues - Pull Requests - Wiki 1. Code2. Issues3. Pull Requests4. WikiReferences 1. Code 显示该仓库中的文件列表。仓库名下方是该仓库的简单说明和 URL. 2. Issues 用于 BUG 报告、功能添加、方向性讨论等&#xff0c;将这些以 Issue 形式进…

ESXI 中安装 虚拟机 麒麟v10 操作系统

浏览器访问登录ESXI 上传镜像文件 创建新虚拟机 选择虚拟机名称和操作系统 选择存储 配置虚拟机 配置虚拟机 cpu 内存 硬盘 并选择虚拟机驱动 配置完成后&#xff0c;点击下一步&#xff0c;并点击完成。 开机 完成后选择该虚拟机&#xff0c;并打开电源 等待出现以下界面…

[Linux_IMX6ULL驱动开发]-驱动的分层及实现

目录 驱动分层的思路 驱动分层的实现 上层驱动的实现 次设备号的使用 上层驱动代码 底层驱动的实现 底层驱动c文件的实现 底层驱动头文件实现 应用层文件的实现 驱动分层的思路 在上一篇文章中&#xff0c;博主实现了通过寄存器控制引脚&#xff0c;以此来达到控制LE…

代码随想录-KMP算法

LeetCode28: . - 力扣&#xff08;LeetCode&#xff09; public class KMP {public static void main(String[] args) {KMP kmpnew KMP();kmp.strStr("aabaabaaf","aabaaf");}public int strStr(String haystack, String needle) {//获取next数组int[] nex…

ENVI实战—一文搞定NDVI计算和MNDWI计算

实验1&#xff1a;使用波段计算器计算波段值 目的&#xff1a;熟练掌握ENVI中波段计算器的使用方法&#xff0c;学会波段之间的运算。 过程&#xff1a; ①数据导入&#xff1a;打开ENVI5.6&#xff0c;在“文件”选项卡中选择“打开”&#xff0c;打开此前裁剪好的Sentinel…

外包干了3天,技术退步明显.......

先说一下自己的情况&#xff0c;大专生&#xff0c;19年通过校招进入杭州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…

✔ ★Java项目——设计一个消息队列(二)

Java项目——设计一个消息队列 四. 项⽬创建五. 创建核⼼类创建 Exchange&#xff08;名字、类型、持久化&#xff09;创建 MSGQueue&#xff08;名字、持久化、独占标识&#xff09;创建 Binding&#xff08;交换机名字、队列名字、bindingKey用于与routingKey匹配&#xff09…

【经典算法】LeetCode25:K 个一组翻转链表(Java/C/Python3,Hard)

#算法 目录 题目描述思路及实现方式一&#xff1a;递归思路代码实现Java 版本C 语言版本Python3 版本 复杂度分析 方式二&#xff1a;迭代和原地反转思路代码实现Java 版本C 语言版本Python3 版本 复杂度分析 总结相似题目 标签&#xff1a;链表、递归 题目描述 给你链表的头…

代码随想录阅读笔记-二叉树【总结】

二叉树的理论基础 代码随想录 (programmercarl.com)&#xff1a;二叉树的种类、存储方式、遍历方式、定义方式 二叉树的遍历方式 深度优先遍历 代码随想录阅读笔记-二叉树【递归遍历】-CSDN博客&#xff1a;递归三部曲初次亮相代码随想录阅读笔记-二叉树【迭代遍历】-CSDN博…

2024年3月文章一览

2024年3月编程人总共更新了12篇文章&#xff1a; 1.2024年2月文章一览 2.Programming Abstractions in C阅读笔记&#xff1a;p308-p311 3.Programming Abstractions in C阅读笔记&#xff1a;p312-p326 4.Programming Abstractions in C阅读笔记&#xff1a;p327-p330 5.…

基于SSM的电影网站(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的电影网站&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring SpringMv…

Ollama教程——兼容OpenAI API:高效利用兼容OpenAI的API进行AI项目开发

相关文章: Ollama教程——入门&#xff1a;开启本地大型语言模型开发之旅 Ollama教程——模型&#xff1a;如何将模型高效导入到ollama框架 Ollama教程——兼容OpenAI API&#xff1a;高效利用兼容OpenAI的API进行AI项目开发 Ollama教程——兼容OpenAI API&#xff1a;高效利用…

L2-2 巴音布鲁克永远的土(二分+并查集)

思路&#xff1a;我们可以二分答案&#xff0c;然后判断当前答案合不合理。 对于判断答案合理&#xff0c;可以用并查集&#xff0c;看mid能否把所有检查点连进一个集合中&#xff0c;枚举每个结点&#xff0c;如何当前结点周围的四个方向可以连的话&#xff0c;就加进同一个集…

【电子通识】热风枪的结构与使用方法

热风枪的结构 热风枪是专门用来拆焊、焊接贴片元器件和贴片集成电路的焊接工具&#xff0c;它主要由主机和热风焊枪两大部分构成。 热风枪主要有电源开关、风速设置、温度设置、热风连接等部件组成。根据不同品牌和价位的热风枪&#xff0c;有一些功能齐全的也集成了烙铁功能。…

波奇学Linux:

面向数据报&#xff1a;udp没有发送缓冲区&#xff0c;发送几次数据报&#xff0c;读取几次数据报&#xff0c;write和read一一对应 tcp通信时只管识别数据&#xff0c;在应用层才对字节进行拼接分析&#xff0c;得到完整请求 简单来说&#xff1a;udp之间传递的是报文&#x…

使用LNMP部署动态网站环境

目录 实验环境 一、配置LNMP架构环境 二、验证部署的LNMP 动态网站环境是否可用 三、配置过程中遇到的问题及解决思路 实验环境 centos7 192.168.81.131/24 一、配置LNMP架构环境 概念及配置手册参考第20章 使用LNMP架构部署动态网站环境。 | 《Linux就该这么学》 安装g…

三行命令解决Ubuntu Linux联网问题

本博客中Ubuntu版本为23.10.1最新版本&#xff0c;后续发现了很多问题我无法解决&#xff0c;已经下载了另外一个版本22.04&#xff0c;此版本自带网络 一开始我找到官方文档描述可以通过命令行连接到 WiFi 网络&#xff1a;https://cn.linux-console.net/?p10334#google_vig…

漫画|数据工程师面试常见问题之数据倾斜

话说&#xff0c;闹钟一响&#xff0c;现实照进梦想&#xff0c;又是李大虎面试找工作的一天。 李大虎心里一直有个想法&#xff0c;如果一天睡20个小时&#xff0c;然后这20个小时全做美梦&#xff0c;醒来的4个小时用来吃喝拉撒&#xff0c;这样岂不就和那些富二代一样了&am…

【core analyzer】core analyzer的介绍和安装详情

目录 &#x1f31e;1. core和core analyzer的基本概念 &#x1f33c;1.1 coredump文件 &#x1f33c;1.2 core analyzer &#x1f31e;2. core analyzer的安装详细过程 &#x1f33c;2.1 方式一 简单但不推荐 &#x1f33c;2.2 方式二 推荐 &#x1f33b;2.2.1 安装遇到…