2021-前端高频面试题整理-JavaScript篇（持续更新）

整理的同时自己也复习一下，答案仅供参考。

说一下JS执行机制

1.JS是单线程的

JS中的代码都是串行的, 前面没有执行完毕后面不能执行

2.执行顺序

1. 程序运行会从上至下依次执行所有的同步代码

2. 在执行的过程中如果遇到异步代码会将异步代码放到事件循环中

3. 当所有同步代码都执行完毕后, JS会不断检测 事件循环中的异步代码是否满足条件

4. 一旦满足条件就执行满足条件的异步代码

3.宏任务和微任务

在JS的异步代码中又区分"宏任务(MacroTask)“和"微任务(MicroTask)”

宏任务: 宏/大的意思, 可以理解为比较费时比较慢的任务

微任务: 微/小的意思, 可以理解为相对没那么费时没那么慢的任务

4.常见的宏任务和微任务

宏任务（MacroTask）: setTimeout, setInterval, setImmediate（IE独有）…

微任务（MicroTask）: Promise, MutationObserver ,process.nextTick（node独有) …

注意点:

所有的宏任务和微任务都会放到自己的执行队列中, 也就是有一个宏任务队列和一个微任务队列。

所有放到队列中的任务都采用"先进先出原则", 也就是多个任务同时满足条件, 那么会先执行先放进去的。

5.完整执行顺序

1. 从上至下执行所有同步代码

2. 在执行过程中遇到宏任务就放到宏任务队列中,遇到微任务就放到微任务队列中

3. 当所有同步代码执行完毕之后, 就执行微任务队列中满足需求所有回调

4. 当微任务队列所有满足需求回调执行完毕之后, 就执行宏任务队列中满足需求的所有回调

注意点:

每执行完一个宏任务都会立刻检查微任务队列有没有被清空, 如果没有就立刻清空

---

防抖和节流的原理及实现

节流和防抖：限制函数的执行次数

1.防抖

防抖原理：

事件响应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间。可理解为通过setTimeout的方式，在一定时间间隔内，将多次触发转变成一次触发。

应用场景：

1. scroll时间滚动触发
2. 搜索框输入查询
3. 表单验证
4. 按钮提交事件
5. 浏览器窗口缩放

简单实现：

function debounce(func, wait) {
     
  let timeout
  return function() {
     
    let _this = this
    let args = arguments
    clearTimeout(timeout)
    timeout = setTimeout(function() {
     
      func.apply(_this, args)
    }, wait)
  }
}

2.节流

原理:如果你持续触发事件，每隔一段时间，只执行一次操作，可理解为减少一段时间之内事件的触发频率。

应用场景：

1. DOM元素的拖拽实现功能
2. 射击游戏
3. 计算鼠标移动的距离
4. 监听scroll滚动事件

简单实现：

function throttle(fn, delay) {
     
  let begin = 0
  return function() {
     
    let cur = Date.now()
    if(cur - begin > delay) {
     
      fn.apply(this, arguments)
      begin = cur
    }
  }
}

节流和防抖的详细实现