阿里前端必会手写面试题汇总

实现节流函数（throttle）

节流函数原理:指频繁触发事件时，只会在指定的时间段内执行事件回调，即触发事件间隔大于等于指定的时间才会执行回调函数。总结起来就是： 事件，按照一段时间的间隔来进行触发 。

像dom的拖拽，如果用消抖的话，就会出现卡顿的感觉，因为只在停止的时候执行了一次，这个时候就应该用节流，在一定时间内多次执行，会流畅很多

手写简版

使用时间戳的节流函数会在第一次触发事件时立即执行，以后每过 wait 秒之后才执行一次，并且最后一次触发事件不会被执行

时间戳方式：

// func是用户传入需要防抖的函数
// wait是等待时间
const throttle = (func, wait = 50) => {
   
  // 上一次执行该函数的时间
  let lastTime = 0
  return function(...args) {
   
    // 当前时间
    let now = +new Date()
    // 将当前时间和上一次执行函数时间对比
    // 如果差值大于设置的等待时间就执行函数
    if (now - lastTime > wait) {
   
      lastTime = now
      func.apply(this, args)
    }
  }
}

setInterval(
  throttle(() => {
   
    console.log(1)
  }, 500),
  1
)

定时器方式：

使用定时器的节流函数在第一次触发时不会执行，而是在 delay 秒之后才执行，当最后一次停止触发后，还会再执行一次函数

function throttle(func, delay){
   
  var timer = null;
  returnfunction(){
   
    var context = this;
    var args = arguments;
    if(!timer){
   
      timer = setTimeout(function(){
   
        func.apply(context, args);
        timer = null;
      },delay);
    }
  }
}

适用场景：

• DOM 元素的拖拽功能实现（mousemove）
• 搜索联想（keyup）
• 计算鼠标移动的距离（mousemove）
• Canvas 模拟画板功能（mousemove）
• 监听滚动事件判断是否到页面底部自动加载更多
• 拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
• 缩放场景：监控浏览器resize
• 动画场景：避免短时间内多次触发动画引起性能问题

总结

• 函数防抖 ：将几次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
• 函数节流 ：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

循环打印红黄绿

下面来看一道比较典型的问题，通过这个问题来对比几种异步编程方法：红灯 3s 亮一次，绿灯 1s 亮一次，黄灯 2s 亮一次；如何让三个灯不断交替重复亮灯？

三个亮灯函数：

function red() {
   
    console.log('red');
}
function green() {
   
    console.log('green');
}
function yellow() {
   
    console.log('yellow');
}

这道题复杂的地方在于需要“交替重复”亮灯，而不是“亮完一次”就结束了。

（1）用 callback 实现

const task = (timer, light, callback) => {
   
    setTimeout(() => {
   
        if (light === 'red') {
   
            red()
        }
        else if (light === 'green') {
   
            green()
        }
        else if (light === 'yellow') {
   
            yellow()
        }
        callback()
    }, timer)
}
task(3000, 'red', () => {
   
    task(2000, 'green', () => {
   
        task(1000, 'yellow', Function.prototype)
    })
})

这里存在一个 bug：代码只是完成了一次流程，执行后红黄绿灯分别只亮一次。该如何让它交替重复进行呢？

上面提到过递归，可以递归亮灯的一个周期：

const step = () => {
   
    task(3000, 'red', () => {
   
        task(2000, 'green', () => {
   
            task(1000, 'yellow', step)
        })
    })
}
step()

注意看黄灯亮的回调里又再次调用了 step 方法 以完成循环亮灯。

（2）用 promise 实现

const task = (timer, light) => 
    new Promise((resolve, reject) => {
   
        setTimeout(() => {
   
            if (light === 'red') {
   
                red()
            }
            else if (light === 'green') {
   
                green()
            }
            else if (light === 'yellow') {
   
                yellow()
            }
            resolve()
        }, timer)
    })
const step = () => {
   
    task(3000, 'red')
        .then(() => task(2000, 'green'))
        .then(() => task(2100, 'yellow'))
        .then(step)
}
step()

这里将回调移除，在一次亮灯结束后，resolve 当前 promise，并依然使用递归进行。

（3）用 async/await 实现

const taskRunner =  async () => {
   
    await task(3000, 'red')
    await task(2000, 'green')
    await task(2100, 'yellow')
    taskRunner()
}
taskRunner()

instanceof

instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。

const myInstanceof = (left, right) => {
   
  // 基本数据类型都返回false
  if (typeof left !== 'object' || left