前端手写代码题笔记汇总

2021-10-18 16:20:20

0

前言

• 本文用于总结一些常见的前端代码手写题

正文

防抖与节流

• 防抖

debounce(fn, delay): void {
  if (this.timer) {
    alert(\"请不要频繁操作\");
    clearTimeout(this.timer);
  }
  this.timer = setTimeout(fn, delay);
}

• 节流

// func是用户传入需要防抖的函数
// wait是等待时间
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
)

快排

var quickSort = function (arr) {
    if (arr.length <= 1) {
        return arr;
    }
    // 从数组中取出中间元素作为基准点
    var pivotIndex = Math.floor(arr.length / 2);
    var pivot = arr.splice(pivotIndex, 1)[0];
    // 左侧数组
    var left = [];
    // 右侧数组
    var right = [];

    // 将元素分为左右两组，小于基准点排给左边，大于基准点的排到右边
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] < pivot) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }
    // 进行递归排序，按左-中-右进行数组拼接
    return quickSort(left).concat([pivot], quickSort(right));
};

柯里化函数

const curry = (fn, arr = []) => (...args) => (
  arg => arg.length === fn.length
    ? fn(...arg)
    : curry(fn, arg)
)([...arr, ...args])

let curryTest=curry((a,b,c,d)=>a+b+c+d)
curryTest(1,2,3)(4) //返回10
curryTest(1,2)(4)(3) //返回10
curryTest(1,2)(3,4) //返回10