掌握 6 个强大的 JavaScript 函数!💻

2025-06-10

掌握 6 个强大的 JavaScript 函数!💻

掌握 6 个强大的 JavaScript 函数!

查看每个 Web 开发人员都应该知道的这些基本功能,以使您的代码更简洁、更高效:

1️⃣ 去抖动:

通过限制函数执行来优化性能。非常适合处理调整大小或输入等事件。

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

// Example usage:
window.addEventListener('resize', debounce(() => {
  console.log('Window resized');
}, 500));

Enter fullscreen mode Exit fullscreen mode

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;
    }
  };
}

// Example usage:
window.addEventListener('scroll', throttle(() => {
  console.log('Scroll event triggered');
}, 500));

Enter fullscreen mode Exit fullscreen mode

3️⃣ 咖喱:

将函数转换为序列,一次处理一个参数,以获得更加模块化和灵活的代码。

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));
      };
    }
  };
}

// Example usage:
function sum(a, b, c) {
  return a + b + c;
}

const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // Output: 6
Enter fullscreen mode Exit fullscreen mode

4️⃣ 记忆化:
通过缓存函数结果来加快代码速度,避免不必要的重新计算。

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;
    }
  };
}

// Example usage:
const factorial = memoize(function (n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
});

console.log(factorial(5)); // Output: 120
console.log(factorial(5)); // Output: 120 (from cache)
Enter fullscreen mode Exit fullscreen mode

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;
}

// Example usage:
const original = { a: 1, b: { c: 2 } };
const copy = deepClone(original);

console.log(copy); // Output: { a: 1, b: { c: 2 } }
console.log(copy.b === original.b); // Output: false
Enter fullscreen mode Exit fullscreen mode

结合这些技巧可以显著提升 JavaScript 代码的性能和可读性。让我们一起让编码更快、更简洁、更高效!

鏂囩珷鏉ユ簮锛�https://dev.to/nozibul_islam_113b1d5334f/master-6-powerful-javascript-functions-599b
PREV
您是一位具有多种热情的开发人员吗?
NEXT
我们在 Github 上很流行,我们就是这样做的🤯