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

news2024/11/15 19:24:43

文章目录

    • 算法
        • 二分查找
          • 条件
          • 注意
          • 方式
          • 基本原理
          • 左闭右闭
            • 正向写法
          • 左闭右开
            • 正向写法
    • 前端基础知识
      • 定时器及清除
      • 盒子垂直水平居中的方式
        • 垂直水平
          • 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;
		}
	} 
    // 没找到就返回-1
	return -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.coloradmin.cn/o/2137948.html

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

相关文章

2024_中秋国庆双节来临 祝CSDN所有开发者与网站节日快乐

亲爱的CSDN朋友们&#xff1a; 在这个金风送爽、丹桂飘香的美好时节&#xff0c;我们迎来了一年一度的中秋佳节。明月高悬&#xff0c;洒下银辉&#xff0c;照亮了我们心中的思念与祝福。 中秋&#xff0c;是团圆的象征。无论你此刻身在何处&#xff0c;心中那份对家的眷恋、对…

Vue3.0组合式API:computed计算属性、watch监听器、watchEffect高级监听器

1、computed() 计算属性 在模板中绑定表达式只能用于简单的运算。如果运算比较复杂&#xff0c;可以使用 Vue.js 提供的计算属性&#xff0c;通过计算属性可以处理比较复杂的逻辑。 1.1 计算属性的应用 通过计算属性可以实现各种复杂的逻辑&#xff0c;包括运算、函数调用等…

laravel 查询数据对象转数组

这种的只能转化最外层的$pre_id_arr Db::table(Db::raw("($pre_id_arr_sql) as res"))->get()->toArray();如果需要把里边的都转了需要用下面这个方法 $pre_id_arr Db::table(Db::raw("($pre_id_arr_sql) as res"))->get()->map(function ($…

进程vs线程:高效并发编程的基石

欢迎浏览高耳机的博客 希望我们彼此都有更好的收获 感谢三连支持&#xff01; 在数据爆炸和计算需求日益增长的时代&#xff0c;"并发编程"已经不再是一种选择&#xff0c;而是成为了一种"刚需"。随着单核CPU的发展逐渐遇到瓶颈&#xff0c;多核CPU的出现为…

深入理解Java中的线程状态转换及关键同步方法

深入理解Java中的线程状态转换及关键同步方法 在现代软件开发中&#xff0c;多线程编程是实现高效、响应式应用程序的关键技术之一。理解线程的生命周期及其状态转换&#xff0c;对于编写健壮、性能优越的并发程序至关重要。本文将深入探讨Java中线程的各种状态转换&#xff0…

探索信号处理:使用傅里叶小波变换分析和恢复信号

在现代信号处理领域&#xff0c;傅里叶变换是分析和处理信号的一种基本工具。然而&#xff0c;传统的傅里叶变换在处理非平稳信号时存在局限性&#xff0c;因为它无法同时提供时间和频率的信息。为了克服这一挑战&#xff0c;傅里叶小波变换&#xff08;FSWT&#xff09;应运而…

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

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

java项目之中药实验管理系统(源码+文档)

项目简介 中药实验管理系统实现了以下功能&#xff1a; 中药实验管理系统的主要使用者管理员功能有个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;实验员管理&#xff0c;实验教学管理&#xff0c;在线学习管理&#xff0c;实验信息管理&#xff0c;实验预约…

C++速通LeetCode简单第16题-买卖股票的最佳时机

思路要点&#xff1a;假设当天卖&#xff0c;动态更新最低价格和最大利益 class Solution { public://要点&#xff1a;假设当天卖&#xff0c;动态更新最低价格和最大利益int maxProfit(vector<int>& prices) {int ans 0;int lowest prices[0];for(int i 1; i &…

bin | hex

hex bin 纯粹的程序数据&#xff0c;不包含&#xff1a;长度、地址、数据等信息 可以直接把数据赋值到单片机程序地址&#xff08;STM32 一般时0x8000 0000&#xff09; 应用场景 远程固件升级 比较 实际文件对比

Mybatis-plus-Generator 3.5.5 自定义模板支持 (DTO/VO 等) 配置

随着项目节奏越来越快&#xff0c;为了减少把时间浪费在新建DTO 、VO 等地方&#xff0c;直接直接基于Mybatis-plus 这颗大树稍微扩展一下&#xff0c;在原来生成PO、 DAO、Service、ServiceImpl、Controller 基础新增。为了解决这个问题&#xff0c;网上找了一堆资料&#xff…

【硬件模块】SHT20温湿度传感器

SHT20是一个用IIC通信的温湿度传感器。我们知道这个就可以了。 它支持的电压范围是2.1~3.6V&#xff0c;推荐是3V&#xff0c;所以如果我们的MCU是5V的&#xff0c;那么就得转个电压才能用了。 IIC常见的速率有100k&#xff0c;400k&#xff0c;而SHT20是支持400k的&#xff08…

Parallels Desktop 20破解版(Mac虚拟机) v20.0.0 for Mac 最新商业版(支持M系列)

Parallels Desktop 20是一款目前功能最强大灵活度最高的虚拟机软件&#xff0c;可运行数千种 Windows 应用程序&#xff0c;如 Microsoft Office、Internet Explorer、Access、Quicken、QuickBooks、Visual Studio&#xff0c;甚至支持对图像要求较高的游戏和 CAD 项目&#xf…

[产品管理-17]:NPDP新产品开发 - 15 - 产品设计与开发工具 - 工欲善其事,必先利其器 - 创意工具:借助各种工具和方法,完成产品的创意

目录 前言&#xff1a; 一、创意&#xff08;用户问题 -》产品想法&#xff09;的生成 1.1 创意 1.2 先发散后收敛 1.3 创意工具集 二、创意工具概述 2.1 SCAMPER - 按照数据处理逻辑运算的方式发散 SCAMPER创意工具详解&#xff1a;对数据/产品的各种运算、变换&…

如何用SQL Server和Oracle进行数据同步?

数据同步是大数据应用中非常重要的环节&#xff0c;它可以保证数据的实时性和一致性&#xff0c;为数据分析和决策提供重要依据。常见的数据同步方式包括ETL实时同步和实时ETL工具&#xff0c;其中实时ETL工具又可以分为基于日志追踪和基于触发器两种。 针对不同的数据库系统&…

Hqst 品牌 H81801D 千兆 DIP 网络变压器在光猫收发器机顶盒中的应用

Hqst 牌 H81801D 千兆 DIP 网络变压器在光猫收发器机顶盒中的应用主要包括以下几个方面&#xff1a; 1. 信号匹配和转换&#xff1a; H81801D 网络变压器能够匹配光猫收发器与以太网电缆之间的阻抗差&#xff0c;确保信号在传输过程中的完整性&#xff0c;同时它还能将光信号转…

量化交易backtrader实践(一)_数据获取篇(3)_爬取数据

这一节实践其实是在上一节之前进行的&#xff0c;背景原因是因为tushare.pro的积分不够高&#xff0c;当时还没有接触到使用akshare等其他接口&#xff0c;因此对于全股票列表用的是去网页上爬的方式获得的&#xff0c;也就借此机会&#xff0c;再复习了一遍爬虫的相关知识。 …

WPS生成目录

导航窗格&#xff1a;视图->导航窗格 可修改标题的样式&#xff0c;之后的标题直接套用即可 修改其他标题样式也是这样 添加编号&#xff1a;可以选上面的模版 也可自定义编号 生成目录&#xff1a;引用->目录->选用一个 但是我想把目录插到另一页 当我添加几个标题…

IDEA-调用Restful接口

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

移动UI案例:工具类app整套案例

工具类App是指提供各种实用工具和功能的手机应用程序。这些工具可以包括但不限于日历、闹钟、备忘录、翻译、计算器、单位转换、天气预报、地图导航、音乐播放器、相机、视频编辑等。这些工具类App能够帮助用户解决日常生活和工作中的各种问题&#xff0c;提高效率和便利性。 …