掌握 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));
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));
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
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)
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
结合这些技巧可以显著提升 JavaScript 代码的性能和可读性。让我们一起让编码更快、更简洁、更高效!
鏂囩珷鏉ユ簮锛�https://dev.to/nozibul_islam_113b1d5334f/master-6-powerful-javascript-functions-599b