面试手写 JavaScript 代码难题，你能解决吗？

在面试中，手写 JavaScript 代码的能力往往是考察候选人编程能力的重要标准。这些代码题通常要求候选人在有限的时间内，使用纯 JavaScript 代码实现特定算法或功能。如果你是求职者，掌握这些常见的手写 JavaScript 代码题目，将大大提升你面试的成功率。

1. 节流函数

节流函数用于限制函数的调用频率，避免在短时间内重复执行。它通常用于处理连续触发的事件，例如鼠标移动或滚动。

function throttle(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(context, args);
        timeout = null;
      }, wait);
    }
  };
}

2. 防抖函数

防抖函数与节流函数相似，但它只在事件停止触发后才执行函数。这意味着，只要事件还在持续触发，函数就不会被执行。防抖函数通常用于处理表单输入或搜索框输入等场景。

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

3. 深拷贝方法

深拷贝是将一个对象的所有属性和子属性都复制到另一个新对象中。与浅拷贝不同，深拷贝不会只是复制对象的引用，而是真正复制对象的值。

function deepCopy(obj) {
  const newObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === 'object') {
        newObj[key] = deepCopy(obj[key]);
      } else {
        newObj[key] = obj[key];
      }
    }
  }
  return newObj;
}

4. 实现一个基本的双向绑定

双向绑定是一种数据绑定技术，它允许数据在 UI 和 JavaScript 对象之间同步。这意味着，当用户在 UI 中修改数据时，JavaScript 对象也会随之更新，反之亦然。

class TwoWayBinding {
  constructor(element, data) {
    this.element = element;
    this.data = data;

    // 监听元素的变化
    this.element.addEventListener('input', (e) => {
      // 更新 data 对象
      this.data[e.target.name] = e.target.value;
    });

    // 监听 data 对象的变化
    Object.defineProperty(this.data, 'value', {
      get: () => this.element.value,
      set: (newValue) => {
        this.element.value = newValue;
      },
    });
  }
}

5. 实现一个 new 函数

new 函数是 JavaScript 中用于创建对象的函数。它通过调用函数的构造函数来创建一个新的对象，并将该对象作为 this 上下文。

function newFunction(func, ...args) {
  // 创建一个新的对象
  const obj = {};

  // 将构造函数的 `prototype` 属性赋给新对象的 `__proto__` 属性
  obj.__proto__ = func.prototype;

  // 将 `this` 上下文指向新对象
  const result = func.apply(obj, args);

  // 返回新对象
  return result instanceof Object ? result : obj;
}

6. 实现一个数据类型的判断函数

数据类型的判断函数可以用来判断一个变量的类型。JavaScript 中有许多内置的数据类型，包括字符串、数字、布尔值、数组、对象等。

function getType(value) {
  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}

掌握这些常见的手写 JavaScript 代码题目，可以帮助你更好地理解 JavaScript 的底层原理，并提高你解决实际问题的能力。希望这些代码题对你的求职面试有所帮助。