查看这些每个 web 开发人员都应该知道的必备功能特性，让你的代码更清晰、更高效：

1️⃣ 防重复点击：

通过减少函数执行次数来优化性能，这特别适合处理如调整大小或输入文字之类的事件。

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

//  a debounce function: 函数防抖
// 例如：
window.addEventListener('resize', debounce(() => {
  console.log('窗口已调整大小');
}, 500));

全屏 退出全屏

2. 油门踏板：

控制执行速率以避免频繁事件如滚动或调整窗口大小时过载。

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastTime >= delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

// 一个防抖处理的例子：
window.addEventListener('scroll', throttle(() => {
  console.log('滚动事件触发了');
}, 500)); // 500毫秒延迟

全屏模式退出全屏

3️⃣ 柯里化

将函数转换为处理参数的序列，每次处理一个参数，从而实现更模块化和灵活的代码。

    function curry(func) {
      // currying 函数
      return function curried(...args) {
        if (args.length >= func.length) {
          return func.apply(this, args);
        } else {
          // 将当前参数和后续参数合并
          return function (...nextArgs) {
            return curried.apply(this, args.concat(nextArgs));
          };
        }
      };
    }

    // 示例用法:
    function sum(a, b, c) {
      return a + b + c;
    }

    const curriedSum = curry(sum);
    // 输出应为 6
    console.log(curriedSum(1)(2)(3)); // 输出结果是 6

全屏模式 退出全屏

4️⃣ Memoization：
通过缓存函数的结果来提高代码速度，避免不必要的重复计算。

    function memoize(func) {
      const cache = {};
      return function (...args) { // 可变参数
        const key = JSON.stringify(args);
        if (cache[key]) {
          return cache[key];
        } else {
          const result = func.apply(this, args); // 应用函数
          cache[key] = result;
          return result;
        }
      };
    }

    // 示例使用：
    const factorial = memoize(function (n) {
      if (n <= 1) return 1;
      return n * factorial(n - 1);
    });

    console.log(factorial(5)); // 控制台输出结果: 120
    console.log(factorial(5)); // 控制台输出结果: 120（来自缓存的值）

全屏模式 退出全屏

5️⃣ 深度克隆：
制作复杂对象的精确复制，避免出现任何引用问题。

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

      if (Array.isArray(obj)) {
        return obj.map(deepClone);
      }

      const clonedObj = {};
      for (const key in obj) {
        clonedObj[key] = deepClone(obj[key]);
      }

      return clonedObj;
    }

    // 深度复制函数：递归复制对象及其嵌套属性

    // 用法示例：
    // 原始对象：
    // 深度复制原始对象
    const original = { a: 1, b: { c: 2 } };
    const copy = deepClone(original);

    console.log(copy); // 输出：{ a: 1, b: { c: 2 } }
    console.log(copy.b === original.b); // 结果：false

全屏（点这里/退出）

将这些技术运用到您的JavaScript代码中，可以大大提升代码的性能和可读性。让我们让编码更快速、更整洁、更高效！