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

文章目录

    • 算法
        • 二分查找
          • 条件
          • 注意
          • 方式
          • 基本原理
          • 左闭右闭
            • 正向写法
          • 左闭右开
            • 正向写法
    • 前端基础知识
      • 定时器及清除
      • 盒子垂直水平居中的方式
        • 垂直水平
          • 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.rhkb.cn/news/429503.html

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

相关文章

深度学习-从零基础快速入门到项目实践,这本书上市了!!!

此书地址&#xff1a; 《【2024新书】深度学习 从零基础快速入门到项目实践 文青山 跟我一起学人工智能 机器学习算法原理代码实现教程 深度学习项目分析 深度学习 从零基础快速入门到项目实践》【摘要 书评 试读】- 京东图书 除深度学习外我还写了一本软件测试书。我大概是国…

[Excel VBA办公]如何使用VBA批量删除空行

在处理Excel数据时&#xff0c;空行可能会干扰数据分析和展示。以下是一个VBA代码示例&#xff0c;帮助你批量删除工作表中的空行。 1. 代码说明 此代码将遍历指定工作表&#xff0c;删除所有空行&#xff0c;确保数据整洁。 2. VBA代码 删除sheet1的空行 Sub DeleteEmptyRow…

VMware虚拟机因磁盘空间不足黑屏无法登录

在虚拟机里存储了一些文件之后&#xff0c;再打开发现进不去了&#xff0c;只有光标一直在左上角&#xff0c;登录的框都是黑的&#xff0c;具体如下&#xff1a; 明明知道登录框的存在却怎么也触碰不到它T_T &#xff0c;先说解决方法&#xff1a; 产生这个问题的原因是因为磁…

大数据Flink(一百二十一):Flink CDC基本介绍

文章目录 Flink CDC基本介绍 一、什么是CDC 二、CDC的实现机制 三、​​​​​​​​​​​​​​传统 CDC ETL 分析 四、​​​​​​​​​​​​​​基于 Flink CDC 的 ETL 分析 五、​​​​​​​​​​​​​​什么是 Flink CDC 六、​​​​​​​​​​​​​​…

OpenCV特征检测(10)检测图像中直线的函数HoughLinesP()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在二值图像中使用概率霍夫变换查找线段。 该函数实现了用于直线检测的概率霍夫变换算法&#xff0c;该算法在文献 181中有所描述。 HoughLines…

go webapi上传文件

一、导入依赖 import "net/http" 我这里用到了Guid所以安装依赖 go get github.com/google/uuid 二、main.go package mainimport ("fmt""github.com/jmoiron/sqlx""github.com/tealeg/xlsx""log""path/filepath&q…

Cpp类和对象(中续)(5)

文章目录 前言一、赋值运算符重载运算符重载赋值运算符重载赋值运算符不可重载为全局函数前置和后置的重载 二、const修饰成员函数三、取地址及const取地址操作符重载四、日期类的实现构造函数日期 天数日期 天数日期 - 天数日期 - 天数日期类的大小比较日期类 > 日期类日…

【CSS in Depth 2 精译_036】5.6 Grid 网格布局中与对齐相关的属性 + 5.7本章小结

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…

桶排序和计数排序(非比较排序算法)

桶排序 桶排序是一种基于分配的排序算法&#xff0c;特别适合用来排序均匀分布的数据。它的基本思想是将输入的数据分到有限数量的桶里&#xff0c;然后对每个桶内的数据分别进行排序&#xff0c;最后再将各个桶内的数据合并得到最终的排序结果。(通常用于浮点数&#xff0c;因…

Go-知识-定时器

Go-知识-定时器 1. 介绍2. Timer使用场景2.1 设定超时时间2.2 延迟执行某个方法 3. Timer 对外接口3.1 创建定时器3.2 停止定时器3.3 重置定时器3.4 After3.5 AfterFunc 4. Timer 的实现原理4.1 Timer数据结构4.1.1 Timer4.1.2 runtimeTimer 4.2 Timer 实现原理4.2.1 创建Timer…

【Godot4.3】基于状态切换的游戏元素概论

提示 本文的设想性质比较大,只是探讨一种设计思路。完全理论阶段&#xff0c;不可行就当是闹了个笑话O(∩_∩)O哈哈~但很符合我瞎搞的气质。 概述 一些游戏元素&#xff0c;其实是拥有多个状态的。比如一个宝箱&#xff0c;有打开和关闭两个状态。那么只需要设定两个状态的图…

并发编程多线程

1.线程和进程的区别&#xff1f; 进程是正在运行程序的实例&#xff0c;进程中包含了线程&#xff0c;每个线程执行不同的任务不同的进程使用不同的内存空间&#xff0c;在当前进程下的所有线程可以共享内存空间线程更轻量&#xff0c;线程上下文切换成本一般上要比进程上下文…

axure的下载,激活,汉化全过程,多图

1.前言 下载地址&#xff1a;https://pan.baidu.com/s/12xo1mJer2hmBK7QrYM5v-Q?pwd0107#list/path%2Fcsdn%E5%85%B1%E4%BA%AB%E6%96%87%E4%BB%B6 源文章&#xff1a;https://blog.csdn.net/iwanttostudyc/article/details/123773796?ops_request_misc%257B%2522request%25…

STM32 单片机最小系统全解析

STM32 单片机最小系统全解析 本文详细介绍了 STM32 单片机最小系统&#xff0c;包括其各个组成部分及设计要点与注意事项。STM32 最小系统在嵌入式开发中至关重要&#xff0c;由电源、时钟、复位、调试接口和启动电路等组成。 在电源电路方面&#xff0c;采用 3.3V 直流电源供…

.Net网络通信组件 - TouchSocket

文章目录 .Net网络通信组件 - TouchSocket1、新建.Net8控制台项目2、Nuget安装TouchSocket组件3、编写服务端代码4、编写客户端代码5、编写Program代码6、运行效果7、日志组件&#xff08;NLog&#xff09;参考我的另一篇博客 .Net网络通信组件 - TouchSocket 1、新建.Net8控制…

PyCharm的使用

PyCharm的入门使用教程 下载和安装PyCharm&#xff1a; 首先&#xff0c;访问JetBrains官方网站&#xff08;https://www.jetbrains.com/pycharm/&#xff09;下载PyCharm的最新版本。根据您的操作系统选择合适的版本进行下载。 安装完成后&#xff0c;打开PyCharm。 创建新…

深度学习03-神经网络02-激活函数

可以使用这个进行跳转链接​​​​​​​http://playground.tensorflow.org/#activationrelu&batchSize11&datasetspiralDatasetreg-gauss&learningRate0.01ularizationRate0.1&noise0&networkShape7,5,4,3,2&seed0.54477&showTestDatafalse&d…

【Unity设计模式】Unity MVC/MVP架构介绍,及MVC/MVP框架的简单应用

文章目录 什么是MVC&#xff1f;MVC眼花缭乱设计图MVP和MVC最经典的MVC的业务流程Unity MVC 框架示例1. 创建项目结构2. 实现模型3. 实现视图4. 实现控制器5. 使用示例 总结参考完结 什么是MVC&#xff1f; MVC自1982年被设计出来&#xff0c;至今都有着很大比重的使用率&…

HCIA--实验十八:配置全局DCHP

一、实验内容 1.需求/要求&#xff1a; 使用一台5700交换机和一台PC,实现全局DHCP的配置&#xff0c;并且自定义配置网关&#xff0c;配置DNS。 二、实验过程 1.拓扑图&#xff1a; 2.步骤&#xff1a; 1.SW1激活DHCP服务&#xff0c;创建vlan10 2.SW1给vlan10添加ip地址 …

Transformer模型-7- Decoder

概述 Decoder也是N6层堆叠的结构&#xff0c;每层被分3层: 两个注意力层和前馈网络层&#xff0c;同Encoder一样在主层后都加有Add&Norm&#xff0c;负责残差连接和归一化操作。 Encoder与Decoder有三大主要的不同&#xff1a; 第一层 Masked Multi-Head Attention: 采用…