学会 6 个强大的 JavaScript 技巧!💻
精通6个超赞的JavaScript函数!
查看这些每个 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代码中,可以大大提升代码的性能和可读性。让我们让编码更快速、更整洁、更高效!
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦