前端底子知识+算法（一）

算法

二分查找

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

用于查找的内容逻辑上是有序的；
查找的数量只能是一个，而不能是多个
注意

在二分查找中，目的元素的查找区间的界说十分重要，差异的区间的界说写法不一样，左右区间开闭不一样，对应·的迭代方式也不一样
方式

左闭右闭 [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]

1. int search(int nums[], int size, int target) //nums是数组，size是数组的大小，target是需要查找的值
2. {
3.     int left = 0;
4.     int right = size - 1;        // 定义了target在左闭右闭的区间内，[left, right]
5.     while (left <= right) {        //当left == right时，区间[left, right]仍然有效
6.         int middle = left + ((right - left) / 2);//等同于 (left + right) / 2，防止溢出
7.         if (nums[middle] > target) {
8.             right = middle - 1;        //target在左区间，所以[left, middle - 1]
9.         } else if (nums[middle] < target) {
10.             left = middle + 1;        //target在右区间，所以[middle + 1, right]
11.         } else {        //既不在左边，也不在右边，那就是找到答案了
12.             return middle;
13.         }
14.     }
15.     //没有找到目标值
16.     return -1;
17. }

复制代码

左闭右开

正向写法

第二种写法：每次查找的区间在 [left, right)，（左闭右开区间）， 根据区间的界说，条件控制应该如下：
循环条件使用while (left < right)
if (nums[middle] > target)， right = middle，因为当前的 nums[middle] 是大于 target 的，不符合条件,不能取到 middle，并且区间的界说是 [left, right)，刚好区间上的界说就取不到 right, 所以 right 赋值为 middle。

1. int search(int nums[], int size, int target)
2. {
3.         int left = 0;
4.         int right = size; //定义target在左闭右开的区间里，即[left, right)
5.         while (left < right) {        //因为left = right的时候，在[left, right)区间上无意义
6.                 int middle = left + ((right - left) / 2);
7.                 if (nums[middle] > target) {
8.                         right = middle; //target 在左区间，在[left, middle)中
9.                 } else if (nums[middle] < target) {
10.                         left = middle + 1;
11.                 } else {
12.                         return middle;
13.                 }
14.         }
15.     // 没找到就返回-1
16.         return -1;
17. }

复制代码

前端底子知识

定时器及扫除

1.前端最常用的定时器，及扫除方法

1. setTimeout
2. 是延时的时间一到，就会去调用这个回调函数，而这个函数只会被调用一次，调用结束该定时器也就结束
3. let timer1=setTimeout(() => {
4.   console.log('Executed once after 1000ms');
5. }, 1000);
6. clearTimeout(timer1); // 清除一次性定时器
7. setInterval
8. 是每隔一个延时的时间，就会重新调用这个函数，直到该定时器被清楚或者网页被关闭
9. let timer2=setInterval(()=>{
10. console.log('Executed once after 1000ms');
11. },1000)
12. 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方法
在父元素中内容的最后添加一个伪元向来实现第三种方案的功能，详细设置样式如下：
父元素:

1. after{
2.         content: "";
3.         height: 0;
4.     clear: both;
5.         display: block;
6. }

复制代码

让盒子隐蔽的几种方法

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

相对定位：relative

1.     特点：不脱离文档流 相对于自身在浏览器中的位置定位

复制代码

绝对定位：absolute

1. 特点： 1. 脱离文档流 原先位置不保留
2.        2. 默认定位元素，无论有没有祖先元素，相对于body定位
3.        3. 祖先元素设置了定位,相对于祖先元素定位（就近原则）

复制代码

固定定位： fixed

1.     特点：1.脱离文档流 原先位置不保留
2.           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等对象，用于控制浏览器窗口的行为。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。