前端开发的痛，谁懂啊！写好的表单提交数据错乱，页面渲染卡成 PPT，熬了通宵的代码上线就报错…… 别让这些 “坑” 继续折磨你！今天带来 6 个 JavaScript 实战技巧，从数据处理到性能优化，全是能在 React、Vue 项目里直接抄作业的干货，手把手教你逆天改命！

一、数组去重的「神仙操作」：Set + 扩展运算符

处理数据时，重复元素就像 “牛皮糖”，甩都甩不掉。用传统for循环去重？代码又臭又长！试试Set结合扩展运算符，一行代码搞定！

// 定义一个包含重复元素的数组
const fruits = ['苹果', '香蕉', '苹果', '橙子', '香蕉'];
// 使用Set对象创建一个不包含重复元素的集合，Set会自动去除重复值
const uniqueFruitsSet = new Set(fruits);
// 使用扩展运算符将Set集合转换回数组
const uniqueFruits = [...uniqueFruitsSet];
// 输出去重后的数组
console.log(uniqueFruits);
// 预期输出 ["苹果", "香蕉", "橙子"]

但要注意，Set只能处理基本数据类型的去重，如果数组里是对象，这种方法就 “失灵” 了。很多人在处理用户列表、商品数据时踩过这个坑！

二、函数防抖节流：拯救卡顿的「救命稻草」

做搜索框实时联想、滚动加载时，事件疯狂触发，页面直接 “死机”！别慌，防抖节流这对 “CP”，能让你的页面操作丝般顺滑，这可是大厂面试的高频考点！

防抖函数

// 定义防抖函数，func是要执行的函数，delay是延迟时间
function debounce(func, delay) {
    let timer;
    return function() {
// 如果timer存在，说明之前的延迟任务还没执行，清除它
        if (timer) {
            clearTimeout(timer);
        }
// 设置新的定时器，延迟delay毫秒后执行func函数
        timer = setTimeout(() => {
            func.apply(this, arguments);
        }, delay);
    };
}
// 假设这是搜索框的搜索函数
function search() {
    console.log('执行搜索操作');
}
// 使用防抖函数包装search函数，延迟300毫秒执行
const debouncedSearch = debounce(search, 300);

这里有个容易忽略的细节：如果在延迟时间内不断触发事件，debounce会一直重置定时器，导致函数迟迟不执行。有些场景下，可能需要一个 “立即执行版” 的防抖，你知道怎么改吗？

节流函数

// 定义节流函数，func是要执行的函数，limit是时间间隔
function throttle(func, limit) {
    let inThrottle;
    return function() {
// 如果inThrottle为false，说明可以执行函数
        if (!inThrottle) {
            func.apply(this, arguments);
// 设置inThrottle为true，限制一段时间内不能再次执行
            inThrottle = true;
            setTimeout(() => {
                inThrottle = false;
            }, limit);
        }
    };
}
// 假设这是滚动事件的处理函数
function handleScroll() {
    console.log('处理滚动事件');
}
// 使用节流函数包装handleScroll函数，限制每500毫秒执行一次
const throttledScroll = throttle(handleScroll, 500);

节流函数虽然能控制执行频率，但如果时间间隔设置不合理，可能会出现操作卡顿的情况，你在项目里遇到过这种问题吗？

三、async/await：异步操作的「终极形态」

用Promise处理异步请求，结果代码嵌套成 “俄罗斯套娃”？async/await直接让异步代码像同步代码一样清爽，在 Node.js 后端开发和前端数据请求里都超好用！

// 模拟一个异步函数，返回Promise对象，这里模拟延迟1秒获取数据
function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ message: '数据获取成功' });
        }, 1000);
    });
}
// 定义一个async函数
async function getData() {
// 使用await等待异步操作完成，这里注意没有捕获错误
    const data = await fetchData();
    console.log(data);
}
// 调用async函数
getData();

上面的代码有个致命问题：如果fetchData请求失败，整个程序就会报错卡死！你知道怎么给async/await加上错误处理吗？

四、Object.assign()：对象合并的「便捷工具」

合并多个对象时，还在一个个属性复制？Object.assign()让你一键搞定！在 Vue 组件数据合并、React 状态更新时经常用到。

// 定义两个对象
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
// 使用Object.assign()方法合并对象，第一个参数是目标对象，后面是源对象
const mergedObj = Object.assign(obj1, obj2);
// 输出合并后的对象
console.log(mergedObj);
// 预期输出 { a: 1, b: 3, c: 4 }

不过要小心，Object.assign()是浅拷贝，如果对象里有嵌套对象，修改源对象可能会影响合并后的对象。这种情况下，你会选择深拷贝还是其他方法？

五、requestAnimationFrame：动画流畅的「秘密武器」

用setTimeout做动画，画面像 “PPT” 一样卡顿？requestAnimationFrame和浏览器刷新频率完美同步，做交互动画、游戏特效必备！

// 获取要做动画的元素
const box = document.getElementById('box');
// 定义动画函数
function animate() {
    let left = parseInt(window.getComputedStyle(box).left, 10);
    left += 1;
    box.style.left = left + 'px';
// 递归调用animate函数，持续更新动画
    requestAnimationFrame(animate);
}
// 启动动画
animate();

这里有个隐藏 “陷阱”：如果在动画过程中元素被删除，requestAnimationFrame依然会尝试访问，导致报错！你有什么好的解决办法？

六、URLSearchParams：URL 参数处理的「利器」

解析 URL 参数还在手动分割字符串？URLSearchParams一行代码搞定！在 React Router、Vue Router 传参时超方便。

// 创建一个URLSearchParams实例，传入查询字符串
const params = new URLSearchParams('name=Alice&age=25');
// 获取指定参数的值
console.log(params.get('name'));
// 预期输出 Alice
// 添加新的参数
params.append('city', 'Beijing');
// 将参数转换为字符串
console.log(params.toString());
// 预期输出 name=Alice&age=25&city=Beijing

但在低版本浏览器中，URLSearchParams可能不被支持，你会选择用 polyfill 还是其他替代方案？

上面的 6 个技巧里，明面上藏了 3 处错误，暗地里还有 2 处不易察觉的 “坑”！火眼金睛的你，能全部找出来吗？快来评论区留言，揪出错误的小伙伴，咱们一起讨论正确解法！要是还有其他 JavaScript 的 “疑难杂症”，也欢迎随时交流～