在JavaScript开发过程中，掌握一些实用的技巧能够大大提高我们的开发效率。今天分享一些我在项目中经常使用的JavaScript技巧。
1. 数组去重的几种方法
使用Set
1
2
3
| const numbers = [1, 2, 2, 3, 3, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]
|
使用filter和indexOf
1
| const uniqueNumbers = numbers.filter((item, index) => numbers.indexOf(item) === index);
|
2. 对象属性的简洁写法
1
2
3
4
5
6
7
8
9
10
11
| const name = "张三";
const age = 25;
// 传统写法
const person = {
name: name,
age: age
};
// ES6简洁写法
const person = { name, age };
|
3. 解构赋值的妙用
交换变量
1
2
3
| let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1
|
提取对象属性
1
2
| const user = { name: "李四", age: 30, city: "北京" };
const { name, age } = user;
|
4. 链式操作符
1
2
3
4
5
6
7
8
9
10
11
12
| // 可选链操作符
const user = {
profile: {
name: "王五"
}
};
console.log(user?.profile?.name); // "王五"
console.log(user?.address?.street); // undefined (不会报错)
// 空值合并操作符
const defaultName = user?.name ?? "匿名用户";
|
5. 数组的高阶函数
map, filter, reduce的组合使用
1
2
3
4
5
6
7
8
9
10
11
12
13
| const products = [
{ name: "商品A", price: 100, category: "电子" },
{ name: "商品B", price: 200, category: "服装" },
{ name: "商品C", price: 150, category: "电子" }
];
// 筛选电子产品，计算总价
const totalPrice = products
.filter(product => product.category === "电子")
.map(product => product.price)
.reduce((sum, price) => sum + price, 0);
console.log(totalPrice); // 250
|
6. 异步编程最佳实践
使用async/await处理异步操作
1
2
3
4
5
6
7
8
9
10
| async function fetchUserData(userId) {
try {
const response = await fetch(`/api/users/${userId}`);
const userData = await response.json();
return userData;
} catch (error) {
console.error("获取用户数据失败:", error);
throw error;
}
}
|
Promise.all并发处理
1
2
3
4
5
| async function fetchMultipleUsers(userIds) {
const promises = userIds.map(id => fetchUserData(id));
const users = await Promise.all(promises);
return users;
}
|
7. 防抖和节流
防抖函数
1
2
3
4
5
6
7
8
9
10
11
12
| function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
// 使用示例
const debouncedSearch = debounce((query) => {
console.log("搜索:", query);
}, 300);
|
节流函数
1
2
3
4
5
6
7
8
9
10
| function throttle(func, delay) {
let lastCall = 0;
return function(...args) {
const now = new Date().getTime();
if (now - lastCall >= delay) {
lastCall = now;
func.apply(this, args);
}
};
}
|
总结
这些JavaScript技巧在日常开发中都非常实用。掌握这些技巧不仅能提高代码的可读性和性能，还能让我们的开发工作更加高效。
记住，好的代码不仅要功能正确，还要简洁、优雅、易维护。持续学习和实践这些技巧，相信你的JavaScript技能会有显著提升！