掌握 6 个强大的 JavaScript 函数！

在这篇文章中，我们将探讨每个网页开发人员都应该了解的 6 个必备函数，以帮助您使代码更加简洁和高效。

一. 防抖（Debounce）

防抖是一种优化性能的方法，通过限制函数执行的频率来提高应用的响应能力。特别适用于处理像窗口调整大小或输入等频繁触发的事件。

function debounce(func, delay) {
  let timeoutId; // 定义一个变量存储超时ID
  return function (...args) { // 返回一个新函数
    clearTimeout(timeoutId); // 清除之前的超时
    timeoutId = setTimeout(() => func.apply(this, args), delay); // 设置新的超时
  };
}

// 示例用法：
window.addEventListener('resize', debounce(() => {
  console.log('窗口已调整大小'); // 当窗口调整大小时，输出信息
}, 500));

二. 节流（Throttle）

节流控制函数的执行速率，以避免在频繁事件（如滚动或窗口调整大小）中引发过多的函数调用。

function throttle(func, delay) {
  let lastTime = 0; // 记录上次执行的时间
  return function (...args) { // 返回一个新函数
    const now = new Date().getTime(); // 获取当前时间
    if (now - lastTime >= delay) { // 如果距离上次执行时间超过 delay
      func.apply(this, args); // 执行函数
      lastTime = now; // 更新上次执行时间
    }
  };
}

// 示例用法：
window.addEventListener('scroll', throttle(() => {
  console.log('滚动事件触发'); // 当滚动时，输出信息
}, 500));

三. 柯里化（Currying）

柯里化将一个多参数的函数转换成一系列单参数函数，使得代码更加模块化和灵活。

function curry(func) {
  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); // 将 sum 函数柯里化
console.log(curriedSum(1)(2)(3)); // 输出: 6

四. 记忆化（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（从缓存中获取）

五. 深拷贝（Deep Clone）

深拷贝可以精确地复制复杂对象，而不会产生引用问题。

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 代码的性能和可读性。让我们一起提升编码效率，使代码更加优雅！