【前端面试】七、算法-递归

遍历方法总结

链式调用

  • 数组的很多操作可以构成链式操作，类似这样的格式：…map().filter(…).sort(…).map(….)
  • 链式操作就是对象方法返回类型是自身的。比如map是属于数组的方法，它返回数组，所以构成了链式操作
  • 优势：语义清晰、思考方便，数据量小的时候很有用(<1W)
  • 问题：性能、空间

递归

递归通常需要初始条件和递归表达式

阶乘：n! = n x (n-1) !   

斐波那契：f(1) = 1, f(2) = 1，f(n) = f(n-1) + f(n-2), n>2 

拷贝

push/pop/shift/unshift/splice：都在原始数据上进行修改

concat/slice/map/reduce：都会对原始数据进行浅拷贝

DOM结点的绝对位置

offsetLeft、offsetRight相对于offsetParent的位置
Element.getBoundingClientRect()相对于视窗的位置，受滚动的影响

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>递归</title>
</head>
<body><script>// 阶乘function factorial(n) {if (n === 1) return 1return n * factorial(n - 1)}// 斐波那契数列 1 1 2 3 5 8 13 21 34 55 89 144function fibonacci(n) {if (n === 1 || n === 2) return 1return fibonacci(n - 1) + fibonacci(n - 2)}// 从底端构造递归function fibonacci1(n) {let [a,b] = [1,1]for(let i = 3; i <= n; i++) {[a,b] = [b, a + b]}return b}// console.log('测试 fibonacci1=============');// console.log(fibonacci1(10));function fibonacci2(n) {return Array(n - 2).fill(0).reduce(([a,b],_) => {return [b, a + b]}, [1,1])[1]}// console.log('测试 fibonacci2=============');// console.log(fibonacci2(10));// 递归实现深拷贝function deepClone(obj) {if (typeof obj !== 'object' || obj === null) return obj// const newObj = Array.isArray(obj) ? [] : {}// const newObj = obj instanceof Array ? [] : {}// const newObj = obj.constructor === Array ? [] : {}// const newObj = Object.prototype.toString.call([]) === '[object Array]' ? [] : {}const newObj = new obj.constructor()for(let key in obj) {if(obj.hasOwnProperty(key)) {newObj[key] = deepClone(obj[key])}}return newObj}// 测试用例  function testDeepClone() {  console.log("测试普通对象:");  const obj1 = { a: 1, b: { c: 2 } };  const clonedObj1 = deepClone(obj1);  console.assert(obj1 !== clonedObj1, "对象应该是不同的引用");  console.assert(obj1.b !== clonedObj1.b, "嵌套对象也应该是不同的引用");  console.assert(obj1.b.c === clonedObj1.b.c, "嵌套对象的属性值应该相等");  console.log("测试数组:");  const arr1 = [1, 2, [3, 4]];  const clonedArr1 = deepClone(arr1);  console.assert(arr1 !== clonedArr1, "数组应该是不同的引用");  console.assert(arr1[2] !== clonedArr1[2], "嵌套数组也应该是不同的引用");  console.assert(arr1[2][0] === clonedArr1[2][0], "嵌套数组的元素值应该相等");  console.log("测试特殊对象（Date）:");  const date1 = new Date();  const clonedDate1 = deepClone(date1);  console.assert(date1 !== clonedDate1, "Date 对象应该是不同的引用");  console.assert(date1.getTime() === clonedDate1.getTime(), "Date 的时间戳应该相等");  // console.log("测试特殊对象（RegExp）:");   // 失败 // const reg1 = /hello/g;  // const clonedReg1 = deepClone(reg1);  // console.assert(reg1 !== clonedReg1, "RegExp 对象应该是不同的引用");  // console.assert(reg1.source === clonedReg1.source && reg1.global === clonedReg1.global, "RegExp 的属性和标志应该相等");  // console.log("测试循环引用:");   // 失败 // const obj2 = {};  // obj2.self = obj2;  // const clonedObj2 = deepClone(obj2);  // console.assert(obj2 !== clonedObj2, "对象应该是不同的引用");  // console.assert(clonedObj2.self === clonedObj2, "循环引用应该被正确处理");  console.log("所有测试通过！");  }  // testDeepClone();// 深度比较function deepCompare(a,b){if (a === null || typeof a !== 'object' || b === null || typeof b !== 'object') {return a === b}// Object.getOwnPropertyDescriptors 方法会返回对象自身的所有属性描述符，包括不可枚举的属性const propsA = Object.getOwnPropertyDescriptors(a)const propsB = Object.getOwnPropertyDescriptors(b)if(Object.keys(propsA).length !== Object.keys(propsB).length) return falsereturn Object.keys(propsA).every(key => deepCompare(a[key],b[key]))}// 测试用例  function testDeepCompare() {  console.log("测试基本相等性:");  console.assert(deepCompare(1, 1), "1 应该等于 1");  console.assert(!deepCompare(1, 2), "1 不应该等于 2");  console.assert(deepCompare(null, null), "null 应该等于 null");  console.assert(deepCompare(undefined, undefined), "undefined 应该等于 undefined");  console.assert(!deepCompare(null, undefined), "null 不应该等于 undefined");  console.log("测试对象比较:");  const obj1 = { a: 1, b: { c: 2 } };  const obj2 = { a: 1, b: { c: 2 } };  const obj3 = { a: 1, b: { c: 3 } };  console.assert(deepCompare(obj1, obj2), "obj1 应该等于 obj2");  console.assert(!deepCompare(obj1, obj3), "obj1 不应该等于 obj3");  console.log("测试数组比较:");  const arr1 = [1, 2, [3, 4]];  const arr2 = [1, 2, [3, 4]];  const arr3 = [1, 2, [3, 5]];  console.assert(deepCompare(arr1, arr2), "arr1 应该等于 arr2");  console.assert(!deepCompare(arr1, arr3), "arr1 不应该等于 arr3");  // console.log("测试循环引用（此实现可能无法正确处理）:");  // const obj4 = {};  // obj4.self = obj4;  // const obj5 = {};  // obj5.self = obj5;  // 注意：此实现可能无法正确处理循环引用，因为它会陷入无限递归  // 这里我们假设它不会处理循环引用，并跳过这个测试  // console.assert(deepCompare(obj4, obj5), "循环引用对象应该相等（但这里不测试）");  console.log("所有测试通过！");  }  // testDeepCompare();// DOM节点的绝对位置function getLayout1(el) {if (!el) return;const layout = {width: el.offsetWidth,height: el.offsetHeight,top: el.offsetTop,left: el.offsetLeft}if(el.offsetParent) {const parentLayout = getLayout1(el.offsetParent)layout.top += parentLayout.toplayout.left += parentLayout.left}return layout}function getLayout2(el) {if (!el) return;let left = el.offsetLeftlet top = el.offsetToplet p = el.offsetParentwhile(p) {left += p.offsetLefttop += p.offsetTopp = p.offsetParent}return {width: el.offsetWidth,height: el.offsetHeight,top,left}}</script></body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

The Llama 3 Herd of Models 第4部分后训练的全文

The Llama 3 Herd of Models 第4部分后训练的全文

Llama 3前三部分包括介绍、总体概述和预训练https://blog.csdn.net/qq_51570094/article/details/140682445?spm=1001.2014.3001.5501 4 Post-Training 后训练 我们通过应用几轮后训练6或将模型与人类反馈对齐来生成对齐的Llama 3模型(Ouyang等人，2022;Rafailov等人，2024)在…
阅读更多...
Null Pointer Exception: 如何快速定位和修复？️

Null Pointer Exception: 如何快速定位和修复？️

Null Pointer Exception: 如何快速定位和修复&#xff1f;&#x1f4a1;&#x1f6e0;️ Null Pointer Exception: 如何快速定位和修复&#xff1f;&#x1f4a1;&#x1f6e0;️摘要引言正文内容什么是Null Pointer Exception&#xff1f;&#x1f914;NPE的常见原因&#x1f…
阅读更多...
使子查询可行

使子查询可行

使用 子查询 时&#xff0c;行为或要求可能不会保存为普通查询。 此查询有效&#xff1a; 但是&#xff0c;作为子查询&#xff0c;它不再起作用&#xff1a; 原因是子查询需要别名&#xff1a;当我们添加它时&#xff0c;原来的错误消失了&#xff0c;但又出现了新的错误&…
阅读更多...
天软特色因子看板（2024.07 第19期）

天软特色因子看板（2024.07 第19期）

阅读更多...
springboot集成thymeleaf实战

springboot集成thymeleaf实战

引言 笔者最近接到一个打印标签的需求&#xff0c;由于之前没有做过类似的功能&#xff0c;所以这也是一次学习探索的机会了&#xff0c;打印的效果图如下&#xff1a; 这个最终的打印是放在58mm*58mm的小标签纸上&#xff0c;条形码就是下面的35165165qweqweqe序列号生成的&…
阅读更多...
FPGA知识基础之--按键控制LED灯项目

FPGA知识基础之--按键控制LED灯项目

文章目录 前言一、按键简介按键:通过按下或者释放来控制电路通断的电子元件按键原理图 二、实验要求三、程序设计3.1思路整理3.2 模型搭建3.3 顶层模块3.4 波形分析 四、代码整理4.1RTL代码4.2 仿真只需在Testbench上增加上述一段代码即可将参数实例化,可达到在Testbench上更改…
阅读更多...
卷积神经网络的入门基本介绍 | 带你快速上手各种概念【附图解】

卷积神经网络的入门基本介绍 | 带你快速上手各种概念【附图解】

文章目录 1、简介2、核心概念3、关键操作4、常见架构5、训练过程6、重要概念图解⭐6.1、卷积神经网络工作⭐6.2、卷积核6.3、全连接与卷积网络的对比6.4、池化层6.5、感受野和卷积堆叠6.6、神经元计算和激活函数 7、卷积网络可以改进的地方8、结论 &#x1f343;作者介绍&#…
阅读更多...
vue3集成LuckySheet实现导入本地Excel进行在线编辑

vue3集成LuckySheet实现导入本地Excel进行在线编辑

第一步&#xff1a;克隆或者下载下面的代码 git clone https://github.com/dream-num/Luckysheet.git第二步&#xff1a;安装依赖 npm install npm install gulp -g 第三步&#xff1a;运行 npm run dev效果如下图所示 第四步&#xff1a;打包 打包执行成功后&#xff0c;…
阅读更多...
TypeError: Components is not a function

TypeError: Components is not a function

Vue中按需引入Element-plus时&#xff0c;报错TypeError: Components is not a function。 1、参考Element-plus官方文档 安装unplugin-vue-components 和 unplugin-auto-import这两款插件 2、然后需要在vue.config.js中配置webPack打包plugin配置 3、重新启动项目会报错 T…
阅读更多...
程序员开发指南

程序员开发指南

在这个快节奏的时代&#xff0c;作为一名程序员&#xff0c;大家都希望能更快地开发出高质量的应用&#xff0c;而不是花费大量时间在基础设施和后台服务的搭建上。今天&#xff0c;我要向大家介绍一款专为懒人开发者准备的一站式开发应用的神器——MemFire Cloud。 一站式开发…
阅读更多...
制品库nexus

制品库nexus

详见&#xff1a;Sonatype Nexus Repository搭建与使用&#xff08;详细教程3.70.1&#xff09;-CSDN博客 注意事项&#xff1a; 1.java8环境使用nexus-3.69.0-02-java8-unix.tar.gz包 2.java11环境使用nexus-3.70.1-02-java11-unix.tar.gz包 3.注意使用制品库/etc/yum.repos.…
阅读更多...
动物大联盟游戏攻略：必备游戏攻略！VMOS云手机升级攻略教程！

动物大联盟游戏攻略：必备游戏攻略！VMOS云手机升级攻略教程！

在《动物大联盟》中&#xff0c;合理的称号选择、活动参与和组队合作可以极大提升游戏体验和效率。以下是详细的攻略建议&#xff1a; 称号选择 称号不仅能展示玩家的实力和成就&#xff0c;还能提供额外的属性加成。合理选择和更换称号是提升战力的重要途径。 前期称号选择&…
阅读更多...
Matlab编程资源库（19）级数与符号方程求解

Matlab编程资源库（19）级数与符号方程求解

一、级数符号求和 求无穷级数的和需要 符号表达式求和函数 symsum &#xff0c;其调用 格式为&#xff1a; symsum(s,v,n,m) 其中 s 表示一个级数的通项&#xff0c;是一个符号表达式。 v 是求和变 量&#xff0c; v 省略时使用系统的默认变量。 n 和 m 是求和的开始项 和…
阅读更多...
【康复学习--LeetCode每日一题】3111. 覆盖所有点的最少矩形数目

【康复学习--LeetCode每日一题】3111. 覆盖所有点的最少矩形数目

题目&#xff1a; 给你一个二维整数数组 point &#xff0c;其中 points[i] [xi, yi] 表示二维平面内的一个点。同时给你一个整数 w 。你需要用矩形 覆盖所有 点。 每个矩形的左下角在某个点 (x1, 0) 处&#xff0c;且右上角在某个点 (x2, y2) 处&#xff0c;其中 x1 < x…
阅读更多...
职业教育计算机网络综合实验实训室建设应用案例

职业教育计算机网络综合实验实训室建设应用案例

近年来&#xff0c;职业教育在培养技能型人才方面发挥着越来越重要的作用。然而&#xff0c;传统的计算机网络技术教学模式往往重理论、轻实践&#xff0c;导致学生缺乏实际操作能力和职业竞争力。为了改变这一现状&#xff0c;唯众结合职业教育特点&#xff0c;提出了“教、学…
阅读更多...
04.FreeRTOS任务创建

04.FreeRTOS任务创建

04. FreeRTOS任务创建与任务删除 1. FreeRTOS创建和删除任务相关API函数 函数描述xTaskCreate()动态方式创建任务xTaskCreateStatic()静态方式创建任务xTaskCreateRestricted()动态方式创建使用 MPU 限制的任务xTaskCreateRestrictedStatic()静态方式创建使用 MPU 限制的任务…
阅读更多...
C# Unity 面向对象补全计划 之 继承（字段与属性）

C# Unity 面向对象补全计划 之 继承（字段与属性）

本文仅作学习笔记与交流&#xff0c;不作任何商业用途&#xff0c;作者能力有限&#xff0c;如有不足还请斧正 本系列旨在通过补全学习之后&#xff0c;给出任意类图都能实现并做到逻辑上严丝合缝 Q&#xff1a;为什么要单讲继承字段与属性&#xff0c;不讲继承方法了吗&#x…
阅读更多...
Centos 7配置问题

Centos 7配置问题

在VMWare12上面安装Centos 7 Linux虚拟机&#xff0c;在切换到命令界面时&#xff0c;需要登录用户名和密码&#xff0c;但发现输入用户后有字符显示&#xff0c;但是密码没有。 经过一系列查看后&#xff0c;发现这个是Linux的一种机制&#xff0c;即当你输入密码时不显示&…
阅读更多...
为什么阿里开发手册不建议使用Date类？

为什么阿里开发手册不建议使用Date类？

在日常编码中&#xff0c;基本上99%的项目都会有一个DateUtil工具类&#xff0c;而时间工具类里用的最多的就是java.util.Date。 大家都这么写&#xff0c;这还能有问题&#xff1f;&#xff1f; 当你的“默认常识”出现问题&#xff0c;这个打击&#xff0c;就是毁灭性的。 …
阅读更多...
Python学习计划——7.2数据可视化

Python学习计划——7.2数据可视化

数据可视化是数据分析的重要组成部分&#xff0c;通过图表和图形将数据直观地展示出来&#xff0c;帮助我们发现数据中的模式和趋势。Python中常用的数据可视化库有matplotlib和seaborn。以下是对这些库的详细讲解及可运行的Python案例。 1. matplotlib 库 matplotlib 是一个…
阅读更多...
最新文章

Copyright @ 2022~2023