JavaScript开发实用技巧汇总

Mon, 15 Jan 2024 14:30:00 +0800

在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技巧在日常开发中都非常实用。掌握这些技巧不仅能提高代码的可读性和性能，还能让我们的开发工作更加高效。

Web开发 on Zampo Blog

JavaScript开发实用技巧汇总

1. 数组去重的几种方法

使用Set

使用filter和indexOf

2. 对象属性的简洁写法

3. 解构赋值的妙用

交换变量

提取对象属性

4. 链式操作符

5. 数组的高阶函数

map, filter, reduce的组合使用

6. 异步编程最佳实践

使用async/await处理异步操作

Promise.all并发处理

7. 防抖和节流

防抖函数

节流函数

总结