一、条件逻辑优化
1.1 策略模式替代复杂分支
反例(多层 switch-case)
function getPrice(type) {
switch(type) {
case 'student': return 10;
case 'vip': return 20;
default: return 30;
}
}
推荐方案(策略对象)
const PRICE_MAP = {
student: 10,
vip: 20,
default: 30
};
function getPrice(type) {
return PRICE_MAP[type] || PRICE_MAP.default;
}
策略模式优势
- 解耦:将算法封装为独立策略对象,实现可变与不变部分的分离
- 标准化:提供清晰的代码结构规范,提升复杂逻辑的可读性
- 可扩展性:新增策略无需修改现有代码,仅需扩展策略对象
- 减少重复:消除大量条件判断语句,简化代码结构
1.2 数组方法替代循环
反例(传统循环)
const activeUsers = [];
for (let i = 0; i < users.length; i++) {
if (users[i].isActive) {
activeUsers.push(users[i]);
}
}
推荐方案(filter方法)
const activeUsers = users.filter(user => user.isActive);
数组方法优势
- 简洁性:链式调用使数据处理流程更直观
- 声明式编程:更关注"做什么"而非"如何做"
- 性能优化:内置方法通常经过性能优化
二、函数设计原则
2.1 单一职责原则
反例(混合多步操作)
function processOrder(order) {
validateOrder(order);
calculateTotal(order);
sendEmail(order.user);
saveToDatabase(order);
}
推荐方案(原子函数拆分)
function processOrder(order) {
validateOrder(order);
const total = calculateOrderTotal(order);
persistOrder(order, total);
notifyUser(order.user);
}
2.2 参数控制
反例(过多参数)
function createUser(name, email, age, country, isAdmin) {}
推荐方案(对象参数)
function createUser({ name, email, age, country, isAdmin }) {}
三、代码格式化规范
3.1 缩进规则
- 使用2或4空格缩进(团队统一)
- 禁止混用制表符和空格
3.2 操作符换行
// 对齐更易扫描
const total = calculatePrice(quantity, price)
+ calculateTax(quantity, price)
- applyDiscount(discountCode);
四、命名规范
4.1 命名清晰度
反例
const userList = {}; // 对象命名为List
let d; // 无意义单字母
function proc() {} // 模糊缩写
推荐
let daysSinceLastLogin;
function calculateOrderTotal() {}
4.2 命名风格统一
- 布尔变量:isLoading, hasPermission, shouldRender
- 事件处理:handleSubmit, handleClick
五、代码结构优化
5.1 逻辑分组
反例(分散逻辑)
function processUser(user) {
validateUser(user);
}
function validateUser(user) { /* ... */ }
function formatUserData(user) { /* ... */ }
推荐(集中管理)
function processUser(user) {
validateUser(user);
formatUserData(user);
saveToDatabase(user);
}
5.2 减少嵌套层级
反例(深层嵌套)
function checkAccess(user) {
if (user.isLoggedIn) {
if (user.role === 'admin') {
return true;
} else {
// 其他逻辑...
}
}
}
推荐(卫语句)
function checkAccess(user) {
if (!user.isLoggedIn) return false;
if (user.role === 'admin') return true;
// 其他逻辑...
}
六、利用现代语言特性
6.1 箭头函数与隐式返回
反例
const doubled = numbers.map(function(num) {
return num * 2;
});
推荐
const doubled = numbers.map(num => num * 2);
6.2 使用展开运算符
// 合并对象/数组
const updatedUser = { ...oldUser, ...newData };
const allNumbers = [...arr1, ...arr2];
你见过最奇葩的代码命名是什么?评论区见!