前端基础知识+算法(一)

文章目录

    • 算法
        • 二分查找
          • 条件
          • 注意
          • 方式
          • 基本原理
          • 左闭右闭
            • 正向写法
          • 左闭右开
            • 正向写法
    • 前端基础知识
      • 定时器及清除
      • 盒子垂直水平居中的方式
        • 垂直水平
          • 1.flex布局
          • 2.grid布局
          • 3.定位
          • 对于块级元素
      • 解决高度塌陷的方式
          • 1.给父元素一个固定的高度
          • 2.给父元素添加属性 overflow: hidden;
          • 3.在子元素的末尾添加一个空的 div ,并设置下方样式
          • 4.清除浮动
      • 让盒子隐藏的几种方法
      • 绝对定位,相对定位,固定定位
        • 相对定位:relative
        • 绝对定位:absolute
        • 固定定位: fixed
      • 几种长度单位的区别
        • px
        • em
        • vw
        • vh
        • vm
      • 闭包
      • 内存泄漏
        • 常见的内存泄漏
        • 解决
      • 事件冒泡和事件委托
        • 事件冒泡
        • 事件委托
        • 事件冒泡和事件捕获的区别
      • 伪数组和数组
        • 伪数组转化成真数组的方法
        • 数组的基本操作方法:
          • 查找方法:
          • 数组类的静态方法:
          • 数组填充:
          • 迭代方法:
        • 修改原数组:
        • 不修改原数组:
      • call,apply,bind
      • 箭头函数和普通函数
      • this指向
      • 防抖和节流
      • Node. js有哪些全局对象
      • Dom与Bom

算法

二分查找

​##### 简介
二分查找法是一种高效的搜索算法,它用于在已经排好序的数组或者列表中快速找到目标值。它通过不断将搜索范围分割为两半来逐步缩小搜索范围,从而加速查找过程

条件

用于查找的内容逻辑上是有序的;

查找的数量只能是一个,而不能是多个

注意

在二分查找中,目标元素的查找区间的定义十分重要,不同的区间的定义写法不一样,左右区间开闭不一样,对应·的迭代方式也不一样

方式

左闭右闭 [left,right]

左闭右开 [left,right)

基本原理

首先选择数组中间的数字和需要查找的目标值比较,如果相等最好;如果不相等:如果中间的数字大于目标值,则中间向右的数字都大于目标值,全部排除;如果小于目标值,则左边的数字全部排除

数组长度是偶数还是奇数这个真的不重要,不影响怎么排除的问题,无非是多排除一个数字或者少排除一个数字

1.初始化搜索范围:定义两个指针left和right,分别指向数组的开始位置和结束位置

2.计算中间位置:计算中间索引 mid,通常使用 (left + right) / 2 公式

左闭右闭
正向写法

第一种写法:每次查找的区间在[left, right](左闭右闭区间),根据查找区间的定义(左闭右闭区间),就决定了后续的代码应该怎么写才能对。因为定义 target 在[left, right]区间,所以有如下两点:

1.循环条件要使用while(left <= right),因为当(left == right)这种情况发生的时候,得到的结果是有意义的

2.if(nums[middle] > target) , right 要赋值为 middle - 1, 因为当前的 nums[middle] 一定不是 target ,需要把这个 middle 位置上面的数字丢弃,那么接下来需要查找范围就是[left, middle - 1]

int search(int nums[], int size, int target) //nums是数组,size是数组的大小,target是需要查找的值
{int left = 0;int right = size - 1;	// 定义了target在左闭右闭的区间内,[left, right]while (left <= right) {	//当left == right时,区间[left, right]仍然有效int middle = left + ((right - left) / 2);//等同于 (left + right) / 2,防止溢出if (nums[middle] > target) {right = middle - 1;	//target在左区间,所以[left, middle - 1]} else if (nums[middle] < target) {left = middle + 1;	//target在右区间,所以[middle + 1, right]} else {	//既不在左边,也不在右边,那就是找到答案了return middle;}}//没有找到目标值return -1;
}
左闭右开
正向写法

第二种写法:每次查找的区间在 [left, right),(左闭右开区间), 根据区间的定义,条件控制应该如下:

循环条件使用while (left < right)

if (nums[middle] > target), right = middle,因为当前的 nums[middle] 是大于 target 的,不符合条件,不能取到 middle,并且区间的定义是 [left, right),刚好区间上的定义就取不到 right, 所以 right 赋值为 middle。

int search(int nums[], int size, int target)
{int left = 0;int right = size; //定义target在左闭右开的区间里,即[left, right)while (left < right) {	//因为left = right的时候,在[left, right)区间上无意义int middle = left + ((right - left) / 2);if (nums[middle] > target) {right = middle; //target 在左区间,在[left, middle)中 } else if (nums[middle] < target) {left = middle + 1;} else {return middle;}} // 没找到就返回-1return -1;
}

前端基础知识

定时器及清除

1.前端最常用的定时器,及清除方法

setTimeout
是延时的时间一到,就会去调用这个回调函数,而这个函数只会被调用一次,调用结束该定时器也就结束
let timer1=setTimeout(() => {console.log('Executed once after 1000ms');
}, 1000);
clearTimeout(timer1); // 清除一次性定时器
setInterval
是每隔一个延时的时间,就会重新调用这个函数,直到该定时器被清楚或者网页被关闭
let timer2=setInterval(()=>{console.log('Executed once after 1000ms');
},1000)
clearInterval(timer2)// 清除重复定时器

盒子垂直水平居中的方式

垂直水平
1.flex布局

display ;flex;
align-items:center;
justify-content:center;

2.grid布局

display:grid;
place-items:center;

3.定位

position:absolute;
top:50%;
left:50%;
4.margin

对于块级元素

//水平居中
设置margin:auto;
//垂直居中
再结合 position: relative 和 top: 50% 来垂直居中

水平居中
在这里插入图片描述

垂直居中
在这里插入图片描述

解决高度塌陷的方式

高度塌陷(即容器的高度为零或不如预期高)

1.给父元素一个固定的高度

缺点:违背了高度自适应原则

2.给父元素添加属性 overflow: hidden;

缺点:当子元素有定位属性时,设置 overflow: hidden; 容器以外的部分会被裁剪掉。

3.在子元素的末尾添加一个空的 div ,并设置下方样式

缺点:添加无意义的div,使页面结构冗杂

4.清除浮动

可以利用clear样式清除浮动
利用after伪类
给父元素定死高度
父元素添加overflow方法
在父元素中内容的最后添加一个伪元素来实现第三种方案的功能,具体设置样式如下:
父元素:

after{content: "";height: 0;clear: both;display: block;
}

让盒子隐藏的几种方法

1.display:none;
2.overlow:hidden;
3.opacity:0;
4.transform: translateX 将元素移出视口外
5.visibility:hidden;
6.可以用浮动 用一个盒子盖住另一个盒子
7.绝对定位或者固定定位 + left 或者 right 挪出视口外

绝对定位,相对定位,固定定位

相对定位:relative
    特点:不脱离文档流 相对于自身在浏览器中的位置定位
绝对定位:absolute
特点: 1. 脱离文档流 原先位置不保留2. 默认定位元素,无论有没有祖先元素,相对于body定位3. 祖先元素设置了定位,相对于祖先元素定位(就近原则)
固定定位: fixed
    特点:1.脱离文档流 原先位置不保留2.相对于浏览器视口区域

几种长度单位的区别

px

绝对长度单位

em

相对长度单位,以父元素的font-size为参照

vw

view width的简写,指可视窗口的宽度
可视窗口的宽度 = 100vw

vh

与vw类似
可视窗口的高度 = 100vh

vm

vw和vh中较小的那个

闭包

闭包是在函数内部又定义了一个函数并在内部函数中引用了外部函数的变量
好处:避免全局变量的污染
缺点:容易造成内存泄露

内存泄漏

常见的内存泄漏

闭包,意外的全局变量,未及时清理的定时器和回调函数,循环引用,没有清理的DOM元素引用

解决

首先避免它的使用,其次的话就是变量执行完以后,可以让它赋值为null,最后利用JS的一个垃圾回收机制进行回收

事件冒泡和事件委托

事件冒泡

在一个对象上触发某类事件,这个事件会向这个对象的父级传播,直至这个对象被处理或者达到了对象层次的最顶层,即Document对象

事件委托

事件委托就是利用事件冒泡的机制,利用一个事件处理程序从而达到控制管理者一类得所有事件

事件冒泡和事件捕获的区别

两者处理顺序不同,前者是从最深的节点开始逐级向上触发,后者是从文档根节点开始逐级向下触发

伪数组和数组

区别:伪数组类型是Object,数组类型是Array;伪数组的遍历用for in方法,可用length属性查看长度,可用index查找获取某个元素,不能用数组的其他方法

伪数组转化成真数组的方法

1.Array.from(伪数组)
2.Array.prototype.slice.call(伪数组)
3.[].slice.call(伪数组)

数组的基本操作方法:

push:往数组尾部添加一个元素。 返回数组的长度。
unshift:往数组头部添加一个元素。返回数组的长度。
pop:从数组尾部删除一个元素。返回删除的元素。
shift:从数组头部删除一个元素。返回删除的元素。
slice(开始位置,结束位置):截取数组一部分。只有一个元素则是开始位置,直到截取全部
splice(开始位置,长度,插入元素):删除、修改数组中的一部分元素。
reverse:反转数组。返回反转后的数组。
sort:对数组的元素进行排序。返回排序后的数组。
join:把数组变成字符串。若括号里什么都不写,则默认用逗号分隔。
toString:把数组变成字符串。
split:把字符串变成数组。
concat:合并数组,并返回结果。扩展运算符也可以合并数组。
Math.min:返回数组最小值元素。
Math.max:返回数组最大值元素。
length:获取当前数组的长度。

查找方法:

indexOf:查找数组元素,返回第一个找到的元素下标,找不到返回-1。
lastIndexOf:查找数组元素,返回最后一个找到的元素下标,找不到返回-1,从后向前搜索
includes: 查找数组是否包含某一元素,包含则返回 true,不包含返回 false。
find:查找满足函数条件的第一个值,找不到返回 undefined。
findIndex: 查找满足函数条件的第一个值得下标,找不到返回 -1。

数组类的静态方法:

Array.of:将一数值转化为数组。
Array.from:将类数组转化为数组。

数组填充:

fill(value,start,end):用一个固定值填充一个数组中特定的元素。

迭代方法:

for…in:遍历数组。会遍历数组内所有可枚举的属性,包括原型上的属性和方法。
forEach:遍历数组。不会生成新数组,也不改变原数组,回调函数接收三个值:( 数组的元素,索引,当前数组)
map:通过指定函数处理数组的每个元素,并返回处理后的数组。不会对空数组进行检测,不会改变原始数组。
filter:过滤,检测数组元素,并返回符合条件所有元素的数组。
every:检测数组元素的每个元素是否都符合条件,都符合则返回 true,否则为 false。
some:检测数组元素中是否有元素符合指定条件,有则返回 true,若所有元素都不满足判断条件,则返回 false。

修改原数组:

push、pop、shift、unshift、splice、reverse、sort、fill。

不修改原数组:

slice、concat、indexOf、lastIndexOf、join、toString、filter、every、some、forEach、map、find、findIndex。

call,apply,bind

三者都是改变this指向,接收的第一个参数是this的指向对象,都可利用后续参数传参,call()接受的是一个参数列表,apply()接受的是一个包含多个参数的数组,call()和bind()都是多个参数依次传入,apply()只有两个参数,第二个参数为数组,call()和apply()都是直接对函数进行调用,而bind()是直接床架一个改变this指向后的新函数

箭头函数和普通函数

箭头函数没有自己的this,它的this是继承来的,是外部上下文中的this,this指向不可被改变;
箭头函数是匿名函数,不能作为构造函数,不能使用new;
箭头函数不绑定arguments,用rest参数代替,
箭头函数通过捕获上下文中的this来作为自己的this;
箭头函数没有原型属性
普通函数在默认情况下,this指向的是window对象

this指向

1.全局上下文中的this,在全局作用域中,this指向全局对象
2.函数中的 this:在函数内部,this的值取决于函数的调用方式。具体取值有以下几种情况:
当函数作为普通函数调用时,this指向全局对象或 undefined(在严格模式下)。
当函数作为对象的方法调用时,this指向调用该方法的对象。
当函数作为构造函数调用时,this指向新创建的实例对象。
当函数通过 call()、apply() 或 bind() 方法调用时,this指向传入的第一个参数。
箭头函数中的 this:箭头函数没有自己的 this 值,它会继承外部上下文中的 this 值。

防抖和节流

防抖:单位时间内频繁触发一个事件,以最后一次为准
节流:单位时间内频繁触发一个事件,只会触发一次

Node. js有哪些全局对象

gobal,moudle,exports,process,console

Dom与Bom

DOM(Document Object Model)是文档对象模型的缩写,它提供了访问和操作HTML文档的API。BOM(Browser Object Model)是浏览器对象模型的缩写,它提供了与浏览器交互的API,包括window、location、navigator等对象,用于控制浏览器窗口的行为。

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

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

相关文章

ip映射域名,一般用于mysql和redis的固定映射,方便快捷打包

举个例子 192.168.3.101mysql映射到mysql.smartlink.com 192.168.3.101redis redis.smartlink.com 要将IP地址映射到域名&#xff0c;可以通过几种方式实现&#xff0c;包括修改本地主机文件&#xff08;仅适用于本地开发环境&#xff09;、设置DNS解析&#xff08;适用于生产环…

IDEA-调用Restful接口

告别Swagger3/Apifox/Postman Swagger3&#xff08;丝袜哥&#xff09; 地址&#xff1a;REST API Documentation Tool | Swagger UI简介&#xff1a;在java代码里面增加注解生成接口文档 在代码里面增加注解 RestController RequestMapping("api/v1/user") Api(ta…

Java外卖小程序管理系统

技术架构&#xff1a; springboot ssm mysql redis 有需要该项目的小伙伴可以添加我Q&#xff1a;598748873&#xff0c;备注&#xff1a;CSDN 功能描述&#xff1a; 商品管理&#xff1a;新增商品、所有商品 菜单管理&#xff1a;菜单管理、菜单分类 订单管理&#x…

<<编码>> 第 12 章 二进制加法器--8位加法器 示例电路

8 位加法器内部结构 info::操作说明 鼠标单击逻辑输入切换 0|1 状态 primary::在线交互操作链接 https://cc.xiaogd.net/?startCircuitLinkhttps://book.xiaogd.net/code-hlchs-examples/assets/circuit/code-hlchs-ch12-08-8-bit-adder-internal.txt 8 位加法器 info::操作说…

只要不逾期就行了吗?如何守护好你的“第二张身份证“!

在这个时代&#xff0c;信用记录已远远超越了金融交易的范畴&#xff0c;它如同一根无形的纽带&#xff0c;将我们生活的各个领域紧密相连。近闻有人甚至在步入婚姻殿堂前&#xff0c;也要细致核查对方的信用状况&#xff0c;毕竟&#xff0c;这关乎到共同生活的基石与未来幸福…

影刀RPA实战:自动化同步商品库存至各大电商平台(二)

在当今的电商世界中&#xff0c;多平台运营已成为常态。商家需要在多个电商平台上维护商品库存的一致性&#xff0c;以确保顾客体验的流畅性和库存管理的高效性。运营人员每天面临的问题&#xff0c;就是把公司的商品库存数据&#xff0c;间断性的同步到电商平台上&#xff0c;…

VMamba: Visual State Space Model 论文总结

题目&#xff1a;VMamba: Visual State Space Model&#xff08;视觉状态空间模型&#xff09; 论文&#xff1a;[2401.10166] VMamba: Visual State Space Model (arxiv.org) 源码&#xff1a;https://arxiv.org/pdf/2401.10166 (github.com) 目录 一、摘要 二、引言 三、方…

基于单片机的风机故障检测装置的设计与实现(论文+源码)

1 系统总体设计方案 通过对风机故障检测装置的设计与实现的需求、可行性进行分析&#xff0c;本设计风机故障检测装置的设计与实现的系统总体架构设计如图2-1所示&#xff0c;系统风机故障检测装置采用STM32F103单片机作为控制器&#xff0c;并通过DS18B20温度传感器、ACS712电…

【AI大模型】ChatGPT模型原理介绍(下)

目录 &#x1f354; GPT-3介绍 1.1 GPT-3模型架构 1.2 GPT-3训练核心思想 1.3 GPT-3数据集 1.4 GPT-3模型的特点 1.5 GPT-3模型总结 &#x1f354; ChatGPT介绍 2.1 ChatGPT原理 2.2 什么是强化学习 2.3 ChatGPT强化学习步骤 2.4 监督调优模型 2.5 训练奖励模型 2.…

[全网首发]怎么让国行版iPhone使用苹果Apple Intelligence

全文共分为两个部分&#xff1a;第一让苹果手机接入AI&#xff0c;第二是让苹果手机接入ChatGPT 4o功能。 一、国行版iPhone开通 Apple Intelligence教程 打破限制&#xff1a;让国行版苹果手机也能接入AI 此次发布会上&#xff0c;虽然国行 iPhone16 系列不支持 GPT-4o&…

爆改YOLOv8|使用MobileNetV4替换yolov8的Backbone

1&#xff0c;本文介绍 MobileNetV4 是最新的 MobileNet 系列模型&#xff0c;专为移动设备优化。它引入了通用反转瓶颈&#xff08;UIB&#xff09;和 Mobile MQA 注意力机制&#xff0c;提升了推理速度和效率。通过改进的神经网络架构搜索&#xff08;NAS&#xff09;和蒸馏…

什么是数据库回表,又该如何避免

目录 一. 回表的概念二. 回表的影响三. 解决方案1. 使用覆盖索引2. 合理选择索引列3. 避免选择不必要的列4. 分析和优化查询5. 定期更新统计信息6. 避免使用SELECT DISTINCT或GROUP BY7. 使用适当的数据库设计 数据库中的“回表”是指在查询操作中&#xff0c;当数据库需要访问…

【homebrew安装】踩坑爬坑教程

homebrew官网&#xff0c;有安装教程提示&#xff0c;但是在实际安装时&#xff0c;由于待下载的包的尺寸过大&#xff0c;本地git缓存尺寸、超时时间的限制&#xff0c;会报如下错误&#xff1a; error: RPC failed; curl 92 HTTP/2 stream 5 was not closed cleanly&#xf…

台风,也称为热带气旋,是一种在热带海洋上形成的强烈风暴系统。台风的形成需要满足以下几个条件:

台风&#xff0c;也称为热带气旋&#xff0c;是一种在热带海洋上形成的强烈风暴系统。台风的形成需要满足以下几个条件&#xff1a; 1. **温暖的海水**&#xff1a;台风通常在海面温度至少达到26.5C&#xff08;79.7F&#xff09;的海域形成&#xff0c;因为温暖的海水能够提供…

Gitlab实现多项目触发式自动CICD

工作中可能会遇到这种场景&#xff0c;存在上游项目A和下游项目B&#xff0c;项目B的功能依赖项目A&#xff08;比如B负责日志解析&#xff0c;A是日志描述语言代码&#xff09;&#xff0c;这种相互依赖的项目更新流程一般如下&#xff1a; A项目更新&#xff0c;通知B项目开发…

Nature: 一种基于宏基因组序列空间生成无参考的蛋白质家族的计算方法

通过全局宏基因组学揭示功能性暗物质 Unraveling the functional dark matter through global metagenomics Article, 2023-10-11 Nature [IF: 64.8] DOI: https://doi.org/10.1038/s41586-023-06583-7 原文链接&#xff1a;https://www.nature.com/articles/s41586-023-06…

【C+继承】

继承 1.继承的概念及定义2.基类和派生类对象赋值转换3.继承中的作用域4.派生类的默认成员函数5.继承与友元6.继承与静态成员7.复杂的菱形继承及菱形虚拟继承8.继承的总结和反思 1.继承的概念及定义 ->继承的概念 继承的本质&#xff1a;就是继承的父类的成员 ->继承的…

基于AutoDL部署langchain-chatchat-0.3.1实战

一、租用AutoDL云服务器&#xff0c;配置环境 1.1 配置AutoDL环境 注册好autodl账户之后&#xff0c;开始在上面租服务器&#xff0c;GPU我选择的是RTX4090*2&#xff0c;西北B区&#xff0c;基础镜像选择的是Pytorch-2.3.0-python-3.12&#xff08;ubuntu22.04&#xff09;-…

垃圾回收相关概念

12.1. System.gc()的理解 在默认情况下&#xff0c;通过system.gc()或者Runtime.getRuntime().gc() 的调用&#xff0c;会显式触发Full GC&#xff0c;同时对老年代和新生代进行回收&#xff0c;尝试释放被丢弃对象占用的内存。 然而System.gc() 调用附带一个免责声明&#x…

网络原理2-网络层与数据链路层

目录 网络层数据链路层 网络层 网络层做的工作&#xff1a; 1、地址管理–>IP地址 2、路由选择–>数据包传输的路径规划 网络层主要的协议就是IP协议 IP协议的报头结构&#xff1a; 4位版本&#xff1a; 有两个取值&#xff0c;4表示IPv4&#xff0c;6表示IPv6&am…