前端人必看!这 10 个 JavaScript 技巧，让你代码效率狂飙 99%!
前端开发的 “江湖” 里，JavaScript 就是咱们闯荡的 “绝世武功”。可不少兄弟天天对着代码抓耳挠腮，写得又慢又容易出 Bug，加班都成了家常便饭！别愁！今天带来的这 10 个 JavaScript 实战技巧，堪称 “效率神器”，不管你是刚入行的 “小白萌新”，还是经验丰富的 “前端大佬”，看完保准直呼过瘾，从此告别低效代码，在团队里脱颖而出！咱这文章还藏了超多当下最火的前端类热搜词，干货满满，跟着学就对了！
一、数组去重：一行代码解决重复数据 “大麻烦”
在实际开发中，从后端接口拿到的数据，经常会有重复项。要是直接用这些数据，业务逻辑准出岔子！以前用循环遍历去重，又麻烦又费时间。现在有了Set对象和扩展运算符，去重简直小菜一碟，这也是前端面试和开发的高频考点，学会它面试稳加分！
// 创建一个Set对象，Set集合有个超厉害的特性，存储的值都是唯一的，自动帮我们去掉重复元素
const uniqueSet = new Set([1, 2, 3, 2, 4, 3]);
// 用扩展运算符...把Set集合转换回数组，一行代码就实现了数组去重
const uniqueArray = [...uniqueSet];
console.log(uniqueArray); // 输出 [1, 2, 3, 4]二、对象属性合并：告别手动赋值的 “笨办法”
当我们需要把多个对象的属性合并到一起时，手动一个一个赋值，不仅效率低，还特别容易写错。像合并用户基础信息和权限信息，用Object.assign()方法或者对象展开运算符，瞬间搞定！
// 定义用户基础信息对象
const userInfo = { name: '张三', age: 25 };
// 定义用户权限信息对象
const userPermission = { role: 'admin', permission: ['read', 'write'] };
// 使用Object.assign()方法，把userPermission合并到userInfo中，第一个参数是目标对象，这里传空对象避免修改原对象
const mergedInfo = Object.assign({}, userInfo, userPermission);
console.log(mergedInfo);
// 输出 { name: '张三', age: 25, role: 'admin', permission: ['read', 'write'] }
// ES2018后更常用的对象展开运算符，效果一样，代码更简洁
const newMergedInfo = {...userInfo,...userPermission };
console.log(newMergedInfo);
// 输出 { name: '张三', age: 25, role: 'admin', permission: ['read', 'write'] }三、防抖节流：拯救页面卡顿的 “救命稻草”
在开发过程中，滚动页面、改变窗口大小、在搜索框输入内容，这些操作会频繁触发回调函数，导致页面卡顿，用户体验直线下降！别慌，防抖和节流就是解决这些问题的 “神器”！
防抖（Debounce）
防抖的原理就像等电梯，等一会儿没人来了再关门。在事件触发后，延迟一段时间再执行回调函数，如果这段时间内又触发了事件，就重新计时。特别适合搜索框搜索、按钮重复点击这些场景。
// 定义防抖函数，接收要执行的函数func和延迟时间delay
function debounce(func, delay) {
// 声明一个定时器变量timer
let timer;
// 返回一个新函数，这个函数就是我们实际使用的防抖函数
return function() {
const context = this;
const args = arguments;
// 清除之前设置的定时器，防止重复执行
clearTimeout(timer);
// 设置新的定时器，延迟delay时间后执行func函数
timer = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
// 获取搜索框元素
const searchInput = document.getElementById('search-input');
// 创建防抖后的搜索函数，延迟300毫秒执行搜索操作
const debouncedSearch = debounce(() => {
console.log('执行搜索操作');
}, 300);
// 给搜索框添加input事件监听器，触发防抖后的搜索函数
searchInput.addEventListener('input', debouncedSearch);节流（Throttle）
节流就好比控制人流量，在规定时间内只允许通过一批人。它保证在一定时间间隔内，回调函数只能触发一次。滚动加载、鼠标拖拽这些场景用它再合适不过！
// 定义节流函数，接收要执行的函数func和时间间隔delay
function throttle(func, delay) {
// 声明一个定时器变量timer
let timer;
// 返回一个新函数，这个函数就是我们实际使用的节流函数
return function() {
const context = this;
const args = arguments;
// 如果timer为null，说明当前时间间隔内还没执行过函数
if (!timer) {
// 执行函数
func.apply(context, args);
// 设置定时器，delay时间后将timer设为null，允许下一次执行
timer = setTimeout(() => {
timer = null;
}, delay);
}
};
}
// 给窗口添加scroll事件监听器，触发节流后的滚动加载函数，时间间隔500毫秒
window.addEventListener('scroll', throttle(() => {
console.log('执行滚动加载操作');
}, 500));四、链式调用：让代码 “丝滑” 到飞起
在操作对象或数组时，要是多次调用方法，代码会变得又长又难看。链式调用就像搭积木，能让我们在一行代码里连续调用多个方法，代码瞬间变得简洁优雅，可读性直接拉满！
const numbers = [1, 2, 3, 4, 5];
// 先使用map方法对数组进行映射，把每个元素乘以2
// 再用filter方法过滤出大于5的元素
// 最后用reduce方法对过滤后的元素求和
const result = numbers
.map(num => num * 2)
.filter(num => num > 5)
.reduce((acc, num) => acc + num, 0);
console.log(result); // 输出 18五、可选链操作符：告别 “踩雷” 的非空判断
当我们访问对象的深层属性时，要是不检查属性是否为空，分分钟抛出TypeError错误，调试起来头都大了！可选链操作符?.就是救星，帮我们轻松搞定这个难题，它可是 ES2020 的重要新特性，前端开发热门知识点！
const user = { name: '李四' };
// 使用可选链操作符安全地访问深层属性，如果user.address为null或undefined，不会报错，直接返回undefined
const city = user.address?.city;
console.log(city); // 输出 undefined六、Promise.all：并发请求，效率 “开挂”
有时候我们需要同时发起多个异步请求，比如获取用户信息、订单信息和商品信息，等所有请求都完成后再统一处理。这时候Promise.all就派上大用场了，合理用它，异步操作效率直接翻倍！
// 模拟获取用户信息的异步操作，1秒后返回用户信息
const getUserInfo = () => new Promise((resolve) => {
setTimeout(() => {
resolve({ name: '王五', age: 30 });
}, 1000);
});
// 模拟获取订单信息的异步操作，1.5秒后返回订单信息
const getOrderInfo = () => new Promise((resolve) => {
setTimeout(() => {
resolve({ orderId: 12345, amount: 100 });
}, 1500);
});
// 模拟获取商品信息的异步操作，2秒后返回商品信息
const getProductInfo = () => new Promise((resolve) => {
setTimeout(() => {
resolve({ productName: '手机', price: 5000 });
}, 2000);
});
// 使用Promise.all同时发起多个请求，所有请求成功后，在then回调中处理结果
Promise.all([getUserInfo(), getOrderInfo(), getProductInfo()])
.then(([user, order, product]) => {
console.log('用户信息:', user);
console.log('订单信息:', order);
console.log('商品信息:', product);
});七、动态加载脚本：给页面加载速度 “瘦身”
开发过程中，有些脚本不需要在页面一开始就加载，像第三方统计脚本、广告脚本这些。如果一开始就加载，会拖慢页面速度。动态加载脚本就能解决这个问题，需要的时候再加载，页面加载速度直接起飞！
// 定义动态加载脚本函数，接收脚本的src路径
function loadScript(src) {
// 返回一个Promise对象
return new Promise((resolve, reject) => {
// 创建script标签
const script = document.createElement('script');
// 设置script标签的src属性
script.src = src;
// 脚本加载成功时执行resolve回调
script.onload = resolve;
// 脚本加载失败时执行reject回调
script.onerror = reject;
// 将script标签添加到页面的head中
document.head.appendChild(script);
});
}
// 动态加载jQuery脚本
loadScript('https://code.jquery.com/jquery-3.6.0.min.js')
.then(() => {
console.log('jQuery加载成功');
// 在这里可以使用jQuery进行后续操作
})
.catch((error) => {
console.error('jQuery加载失败:', error);
});八、正则表达式：文本处理的 “万能钥匙”
正则表达式在处理文本匹配、替换、验证这些场景时，简直无敌！验证邮箱格式、手机号格式，提取字符串里的特定内容，都能轻松搞定。虽然学起来有点难，但学会了就是 “真香”！
验证邮箱格式
const email = 'example@example.com';
// 定义邮箱格式的正则表达式，匹配符合邮箱规则的字符串
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
// 使用test方法验证邮箱是否符合格式，返回true或false
const isValidEmail = emailRegex.test(email);
console.log(isValidEmail); // 输出 true提取字符串中的数字
const text = '价格是199元';
// 定义提取数字的正则表达式，\d+表示匹配一个或多个数字，g表示全局匹配
const numberRegex = /\d+/g;
// 使用match方法提取字符串中符合正则表达式的数字，返回数组
const numbers = text.match(numberRegex);
console.log(numbers); // 输出 ['199']九、ES6 解构赋值：数据提取 “快人一步”
从对象或数组里获取特定数据，用传统方法又麻烦又啰嗦。ES6 的解构赋值就像 “数据提取神器”，简单又高效，还能设置默认值，处理数据超方便！
数组解构
// 从数组[1, 2, 3]中依次提取元素赋值给a、b、c
const [a, b, c] = [1, 2, 3];
console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3对象解构
const user = { name: '赵六', age: 28, address: '北京' };
// 从user对象中提取name和age属性赋值给同名变量
const { name, age } = user;
console.log(name); // 输出 赵六
console.log(age); // 输出 28
// 解构赋值设置默认值，如果user对象中没有city属性，city变量就等于默认值'上海'
const { city = '上海' } = user;
console.log(city); // 输出 上海十、函数柯里化：让函数 “灵活百变”
函数柯里化能把一个多参数函数变成多个单参数函数，让函数变得超级灵活，在复杂业务逻辑和函数组合场景中，简直是 “代码复用神器”！
// 普通的加法函数，接收两个参数并返回它们的和
function add(a, b) {
return a + b;
}
// 柯里化后的加法函数，先接收一个参数a，返回一个新函数，新函数再接收参数b并返回和
function curriedAdd(a) {
return function(b) {
return a + b;
};
}
// 创建一个固定加5的函数
const add5 = curriedAdd(5);
console.log(add5(3)); // 输出 8这 10 个 JavaScript 实战技巧，涵盖了前端开发的多个场景，从数据处理到性能优化，从代码简洁性到灵活性，每一个都超实用！赶紧在项目里试试，体验效率飙升的快感！要是你还有其他 JavaScript 技巧想了解，或者对某个知识点有疑问，欢迎在评论区留言，咱们一起交流，共同进步！