前端面试题持续更新。。。

DOM和BOM

1. BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。
2. DOM是文档对象模型，操作文档HTML的JS处理方式

var let const

var:存在变量提升，没有块作用域限制

let：存在暂时性死区（先声明后使用），有块级作用域限制，

const:存在暂时性死区（先声明后使用），有块作用域限制，不能重复声明变量，声明时必须赋值，不可以重复赋值，可以修改引用类型值

检测数据类型

1. typeof: 只能检测出基本数据类型,数组、对象、null返回object

let a = 1;
console.log(typeof a); //number

2. instanceof:不能检测原始值类型,通过原型链来判断实例的__proto__是否与检测类型的prototype一致

let houdunren = {};
console.log(hd instanceof Array); //true

3. constructor：无法判断基本类型值，原理原型prototype上都有一个constructor属性，自身没有这个属性，向原型上找然后比对

console.log(arr.constructor === Array); //true

4. Object.prototype.toString.call：可以判断所有数据类型

Object.prototype.toString.call(true); //'[object Boolean]'

数据类型

数组方法API

push:末尾压入数组，改变原数组，返回值为数组元素数量

pop:删除原数组最后一个，改变原数组，返回值为删除元素

shift:删除原数组第一个，改变原数组，返回值为删除元素

unshift:从数组前面添加数组，改变原数组，返回数组元素数量

fill：在数组固定位置替换内容，改变原数组，返回替换后数组

let a = [1,6,6,3]
console.log(a.fill("后盾人", 1, 2)); //[1, '后盾人', 6, 3]  a=[1, '后盾人', 6, 3]

slice:截取元素，不会改变原数组，返回截取数组，slice(1, 3)截取索引1和索引2元素

splice：可以添加、删除、替换数组中的元素，会对原数组进行改变，返回值为删除的元素

arr.splice(1, 3, 'hdcms', '后盾人')  //删除索引123的元素，然后替换成'hdcms', '后盾人'

join:将数组连接为字符串，不改变原数组，返回连接后数组

let arr = [1, "后盾人", "hdcms"];
console.log(arr.join('-')); //1-后盾人-hdcms 使用join可以指定转换的连接方式

split:将字符串分割成数组,不改变原字符串，返回连接后数组

let price = "99,78,68";
console.log(price.split(",")); //["99", "78", "68"]

indexOf:从前向后查找元素出现的位置，如果找不到返回 -1 arr.indexOf(2)

includes:查找字符串返回值是布尔类型更方便判断 arr.includes(6)

reverse:翻转数组顺序 arr.reverse()

遍历

sort:数组排序，默认从小于大排序数组元素，arr.sort()

console.log(arr.sort(function (v1, v2) {
	return v2 - v1; //从大到小
    return v1 - v2; //从小到大
})); //[9, 4, 2, 1]

find:方法找到后会把值返回出来

findIndex:方法找到后会把索引返回出来

every:用于递归的检测元素，要所有元素操作都要返回真结果才为真

some:如果有一个返回true，表达式结果就是真

filter:返回所有符合条件元素

reduce：可以迭代数组的所有元素

this指向问题

1、普通函数中的this指向window
2、定时器中的this指向window
3、箭头函数没有this,会继承定义函数时的上下文，可以理解为和外层函数指向同一个this
4、事件中的this指向事件的调用者
5、 构造函数中this和原型对象中的this,都是指向构造函数new 出来实例对象
6、类 class中的this 指向由constructor构造器new出来的实例对象
7、自调用函数中的this 指向window

apply/call/bind

相同点：改变this指针。

不同点：

apply：用数组传参

call： 需要分别传参

bind:不会立即执行函数

闭包

闭包：闭包是指有权访问另外一个函数作用域里变量的函数，js中所有函数都是闭包。

特点：

1. 在子函数本身作用域以外执行，即延申作用域。

2. 子函数可以访问外部作用域变量。

3. 容易造成内存泄漏，因为内部使用外部变量，垃圾回收机制认为变量一直被使用，得不到回收。

4. 将变量定义在内部，使内部拥有自己的变量，同时可以不污染全局变量

Promise

Promise 是一个对象，一般作为构造函数来使用（new Promise），它里面有 3 种状态，pending（准备）、fulfilled（成功）、rejected（失败）。

• 怎么用

拿到一个 Promise 实例后，原型上具有 then、finally 和 catch 方法，then里面有2个回调函数，第一个成功，第二个失败，catch 可以统一处理失败，finally无论状态是resolve 或 reject 都会执行此动作。

Promise有reject、resolve，race、all、allSettled这几个API：reject生成失败的Promise；resolves生成成功Promise ；race哪个resolve执行快执行哪个；all可以发多个异步请求，有失败状态就不往下走；allSettled不管成功失败状态都返回结果。

多个请求中，有错误请求可以用then失败回调接收错误，或者用catch统一接收错误，让代码接着往下执行

• 解决了什么问题

它主要解决一个异步请求套着一个异步请求，一个异步请求依赖于另一个的执行结果，使用回调的方式相互嵌套。
回调地狱的问题。

• 替代方案

一般工作的时候都会配合 async/await 语法糖来使用，这样既解决了回调地狱又简化了代码。

缺点：一旦执行无法结束。

es6新增特性

常见http的状态码

防抖节流

共同点：限制函数执行次数

不同点：

1. 节流(throttle): 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

2. 防抖(debounce): 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

3. 防抖可以用于用户输入，节流可以用于页面滚动，无限加载

都是用setTimeout实现，节流通过判断变量boolean值 return出去，防抖通过判断变量是否为空删除定时器，但是要保证代码往下走。

eventloop事件循环

事件轮询就是解决javaScript单线程对于异步操作的一些缺陷，让 javaScript做到既是单线程，又绝对不会阻塞的核心机制，是用来协调各种事件、用户交互、脚本执行、UI 渲染、网络请求等的一种机制。

执行顺序：

1. 同步任务由javaScript 主线程次序执行
2. 异步任务委托给宿主环境执行
3. 已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行
4. javaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行
5. javaScript 主线程不断重复上面的4步

http缓存

作用：减少网络请求和数量

强缓存：是取决于服务器判断是否缓存，不需要前端做任何事，服务器会在请求头设置设置相应缓存时间

协商缓存：第一次请求服务器会返回资源标识，后续相同请求携带相同标识发送给服务器，服务器判断资源更新与否，未更新返回304状态码，直接从本地缓存拿资源，更新返回最新数据和200状态码

描述输入url地址到网页展示的过程

1. DNS域名解析（解析成ip地址）

2. TCP 3次握手（第一次浏览器发出，第二次服务器，第三次浏览器）

3. 发送请求报文

4. 接受响应

5. 渲染页面

6. 4次挥手

跨域问题及解决方案

跨域：域名，端口，协议三者中只要有一个不同就是跨域。对于端口和协议的不同，只能通过后台来解决。我们要解决的是域名不同的问题。
解决：

• jsonp,利用在页面创建

哈希路由和history路由的区别

hash路由

1. hash就是指url尾巴后的#号以及后面的字符

2. 刷新 不会导致浏览器向服务器发出请求

3. hash的而传参是基于url的，传参有体积限制

4. hash不会被包含在HTTP请求中，对后端没有影响，改变hash不会重新加载页面

history模式

1. history路由地址栏URL上没有#

2. history模式利用了HTML5 History Interface 中新增的pushState（）和replaceState（）方法

3. 刷新 history路的url必须和实际后端发起请求的url一致，刷新是网络请求，没有后端准备时会报错404

4. history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中

深拷贝浅拷贝

浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
方法：
• Object.assign ( {} , 对象1，对象2 )，第一级属性深拷贝，从第二级属性开始就是浅拷贝。
• 使用 es6 展开符
深拷贝：会拷贝所有的属性，并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。
方法：
• JSON.parse( JSON.stringify (object) ) JSON.stringify 拷贝一个字符串会新辟一个新的存储地址，这样就切断了引用对象的指针联系，所以先转成一个字符串，在JSON.parse解析出对象，这样就可以深拷贝一个对象

https和http的区别

HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)
HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。
HTTP 和 HTTPS 用的端口不一样，前者是80，后者是443。

如何减少重绘和回流

重绘：当前节点需要更改外观而不会影响布局的，比如更改颜色
回流：回流是布局或者几何属性需要改变就称为回流
回流必定会发生重绘，重绘不一定引发回流
• 减少回流方案：
1、使用 css3 的 transform
2、减少 display 使用
3、css 选择符从右到左匹配查找，避免节点层级过多

垃圾回收机制

垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。开销比较大，所以垃圾回收器会按照固定的时间执行。

策略：标记清除

对于脱离作用域的变量进行回收，当进入作用域时，进行标记，离开作用域时，标记并回收这些变量。

get和post区别

1.get参数url可见，post不可见，所以 post更安全

2.get通过拼接url传递参数，post用请求头传递

3.get请求支持http缓存机制，post不支持

4.get请求页面后退，不产生影响，post会重新提交请求

5.get一般传输数据大小不超过4k，post可以无限大

6.get只能是json数据格式，post可以是json、form等格式

如何添加和删除事件

通过addEventListener添加事件，必须通过removeEventListener移除事件
document.addEventListener(‘事件类型’, 事件名);
document.removeEventListener(‘事件类型’, 事件名);

事件冒泡和事件捕获

事件冒泡：当某个元素事件触发时，那么他的父级同类型元素也会触发，一直触发到根源上。
事件铺获： 从根元素（HTML）到事件源，当某个元素事件触发时，朝同类型子级触发，一直到事件源。

事件委托

将所有元素的事件绑定委托给同一个父元素，根据事件冒泡捕获机制，可以在父元素绑定事件中获取的触发事件的这个元素。根据这个元素不同特征，做不同处理。