前端基础知识+算法（一）

文章目录

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

javascript 复制代码

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。

javascript 复制代码

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.前端最常用的定时器，及清除方法

javascript 复制代码

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方法

在父元素中内容的最后添加一个伪元素来实现第三种方案的功能，具体设置样式如下：

父元素:

javascript 复制代码

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等对象，用于控制浏览器窗口的行为。