【前端】8 个手写代码：前端进阶与面试必备

在前端开发领域，掌握手写代码的能力是进阶和应对面试的关键。以下为您介绍 8 个重要的手写代码示例，助您提升技能。

1. 实现深拷贝 深拷贝用于完整复制复杂的数据结构，避免浅拷贝带来的问题。可以通过递归遍历对象和数组来实现。

function deepClone(obj) {
  if (typeof obj!== 'object' || obj === null) {
    return obj;
  }

  let newObj = Array.isArray(obj)? [] : {};

  for (let key in obj) {
    newObj[key] = deepClone(obj[key]);
  }

  return newObj;
}

2. 手写防抖函数 防抖常用于频繁触发的事件，如输入框实时搜索。它能在指定时间内只执行最后一次触发。

function debounce(func, delay) {
  let timer;

  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

3. 手写节流函数 节流则限制事件触发的频率，适用于滚动事件等。

function throttle(func, delay) {
  let last = 0;

  return function (...args) {
    let now = Date.now();
    if (now - last > delay) {
      func.apply(this, args);
      last = now;
    }
  };
}

4. 实现简易的路由 理解路由原理对于构建单页应用至关重要。

class Router {
  constructor() {
    this.routes = {};
  }

  addRoute(path, callback) {
    this.routes[path] = callback;
  }

  navigate(path) {
    if (this.routes[path]) {
      this.routes[path]();
    }
  }
}

5. 手写发布-订阅模式 这是一种解耦组件之间通信的有效方式。

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  emit(eventName,...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => callback(...args));
    }
  }
}

6. 实现 Promise 掌握 Promise 的实现原理有助于更好地使用异步编程。

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(callback => callback(value));
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state ='rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(callback => callback(reason));
      }
    };

    executor(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    if (this.state === 'fulfilled') {
      onFulfilled(this.value);
    } else if (this.state ==='rejected') {
      onRejected(this.reason);
    } else {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    }
  }
}

7. 手写快速排序 算法是编程的基础，快速排序是常用的排序算法之一。

function quickSort(arr, left = 0, right = arr.length - 1) {
  if (left < right) {
    let pivotIndex = partition(arr, left, right);
    quickSort(arr, left, pivotIndex - 1);
    quickSort(arr, pivotIndex + 1, right);
  }
  return arr;

  function partition(arr, left, right) {
    let pivot = arr[right];
    let i = left - 1;

    for (let j = left; j < right; j++) {
      if (arr[j] <= pivot) {
        i++;
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
    }

    [arr[i + 1], arr[right]] = [arr[right], arr[i + 1]];
    return i + 1;
  }
}

8. 手写链表操作 链表是常见的数据结构，了解其操作有助于深入理解数据结构。

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
  }

  append(value) {
    const newNode = new Node(value);
    if (!this.head) {
      this.head = newNode;
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = newNode;
    }
  }

  // 其他链表操作方法...
}

通过手写这些代码，您将更深入地理解前端的核心概念和技术，为进阶和面试做好充分准备。不断练习和实践，您的前端开发能力必将得到显著提升。