JS手写必备干货宝典：每个程序员都需要掌握

2023-09-02 10:26:37

JS手写必备干货宝典：提升面试技巧和编程能力

作为一名程序员，掌握手写代码是至关重要的。它不仅在面试中脱颖而出，还是一种有效的学习方式。本文将深入探讨 JavaScript 手写题的必备干货，帮助你提升编程技能和面试成功率。

一、手写new方法

手写 new 方法考察的是对 JavaScript 基础的掌握。它的原理是创建一个对象，将其 proto 属性指向构造函数的 prototype 属性，然后执行构造函数并返回创建的对象。

function new(fn, ...args) {
  const obj = Object.create(fn.prototype);
  fn.apply(obj, args);
  return obj;
}

二、手写深拷贝方法

深拷贝用于创建对象及其所有属性的独立副本。它递归地遍历对象，对于基本数据类型直接赋值，对于对象或数组则再次递归调用深拷贝方法。

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

  if (Array.isArray(obj)) {
    return obj.map(item => deepCopy(item));
  }

  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }

  return newObj;
}

三、手写防抖函数

防抖函数用于限制函数的触发频率，避免不必要的调用。它通过创建一个闭包函数和一个定时器来实现。当函数触发时，它会清除定时器并重新设置，只有当定时器触发时才执行函数。

function debounce(fn, delay) {
  let timer = null;

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

四、手写节流函数

节流函数也用于限制函数的触发频率，但它确保在指定时间间隔内只执行一次函数。它通过检查自上次触发以来经过的时间来实现，只有当时间间隔足够长时才执行函数。

function throttle(fn, delay) {
  let lastExecTime = 0;

  return function () {
    const now = Date.now();
    if (now - lastExecTime >= delay) {
      fn.apply(this, arguments);
      lastExecTime = now;
    }
  };
}

五、手写二叉树

二叉树是一种重要的数据结构。它通过创建一个节点类来实现，该类包含数据和左右子节点属性。二叉树类包含一个根节点，并定义了插入、删除和查找等操作。

class Node {
  constructor(data) {
    this.data = data;
    this.left = null;
    this.right = null;
  }
}

class BinaryTree {
  constructor() {
    this.root = null;
  }

  insert(data) {
    const newNode = new Node(data);

    if (!this.root) {
      this.root = newNode;
      return;
    }

    let current = this.root;
    while (true) {
      if (data < current.data) {
        if (!current.left) {
          current.left = newNode;
          return;
        } else {
          current = current.left;
        }
      } else {
        if (!current.right) {
          current.right = newNode;
          return;
        } else {
          current = current.right;
        }
      }
    }
  }
}