在 JavaScript 开发中，掌握一些高频使用的技巧可以提升代码的可读性、性能和开发效率。以下是一些常用的 JavaScript 开发技巧：
1. 使用 Optional Chaining 避免深层嵌套报错
适用场景： 访问深层嵌套对象属性时避免 undefined 或 null 造成的错误。
const user = {
profile: {
address: {
city: "Shanghai",
},
},
};
console.log(user?.profile?.address?.city); // "Shanghai"
console.log(user?.profile?.address?.street); // undefined
2. 使用 Nullish Coalescing（??）处理默认值
适用场景： 区分 null 和 undefined，只在这两种情况下使用默认值，而 0、false 等不会触发默认值。
const value = null;
const defaultValue = value ?? "Default";
console.log(defaultValue); // "Default"
const zero = 0;
console.log(zero ?? 100); // 0，不会变成 100
3. 快速去重数组
适用场景： 去除数组中的重复元素。
const numbers = [1, 2, 3, 2, 4, 3, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]
4. 使用 map()、filter()、reduce() 代替 forEach()
适用场景： 数组操作时减少副作用，提高可读性。
const numbers = [1, 2, 3, 4, 5];
// `map()` 创建新数组
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]
// `filter()` 过滤数组
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]
// `reduce()` 计算总和
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15
5. 使用 Object.entries() 进行对象迭代
适用场景： 将对象转换为可遍历的数组。
const user = { name: "Alice", age: 25 };
for (const [key, value] of Object.entries(user)) {
console.log(`${key}: ${value}`);
}
// name: Alice
// age: 25
6. 使用 Object.fromEntries() 将数组转换为对象
适用场景： 处理 Map 或键值对数组并转换为对象。
const entries = [
["name", "Bob"],
["age", 30],
];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: "Bob", age: 30 }
7. 使用 Array.flat() 扁平化嵌套数组
适用场景： 处理多层嵌套数组。
const nestedArray = [1, [2, [3, 4]], 5];
console.log(nestedArray.flat(2)); // [1, 2, 3, 4, 5]
8. 使用 Array.some() 和 Array.every() 进行条件判断
适用场景： 判断数组是否符合某些条件，而不需要 for 循环。
const numbers = [10, 20, 30, 40];
// 至少有一个满足条件
console.log(numbers.some(num => num > 25)); // true
// 所有元素都满足条件
console.log(numbers.every(num => num > 25)); // false
9. 快速交换变量值
适用场景： 交换变量而不使用临时变量。
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1
10. 使用 fetch 进行网络请求
适用场景： 替代 XMLHttpRequest 进行 AJAX 请求。
async function fetchData() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Fetch error:", error);
}
}
fetchData();
11. 使用 debounce 和 throttle 限制函数执行频率
适用场景： 处理窗口大小变化、搜索框输入等高频事件。
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
function throttle(fn, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}
// 使用
window.addEventListener("resize", debounce(() => console.log("Resize!"), 300));
12. 使用 localStorage 和 sessionStorage 存储数据
适用场景： 缓存用户数据或页面状态。
localStorage.setItem("name", "Alice");
console.log(localStorage.getItem("name")); // "Alice"
sessionStorage.setItem("sessionKey", "12345");
console.log(sessionStorage.getItem("sessionKey")); // "12345"
13. 使用 ?? 处理 null 和 undefined 默认值
const name = null;
console.log(name ?? "Guest"); // "Guest"
14. 使用 includes() 检查数组是否包含某个值
const colors = ["red", "blue", "green"];
console.log(colors.includes("blue")); // true
15. 使用 navigator.clipboard 进行剪贴板操作
适用场景： 复制文本到剪贴板。
navigator.clipboard.writeText("Hello World").then(() => {
console.log("Text copied!");
});
总结
技巧
适用场景
?. 可选链
避免 undefined 访问报错
?? 空值合并
处理 null 和 undefined
Set 去重
数组去重
map/filter/reduce
数组转换
Object.entries()
遍历对象
Array.flat()
数组扁平化
debounce/throttle
限制事件触发频率
fetch
进行 AJAX 请求
localStorage/sessionStorage
数据存储
这些技巧可以帮助你在开发过程中写出更简洁、高效的 JavaScript 代码！🚀
