正文开始
为什么要写一手优雅的代码?
采用简洁的语法和结构,遵循一致的命名规范,具有良好的代码组织和注释,同时表达了代码的意图和逻辑。微信搜索公众号:架构师指南,回复:架构师 领取资料 。
主要有以下几个优点:
- 可读性:易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确,
降低理解代码的难度
,提高代码的可读性。 - 可维护性:易于维护。当代码逻辑清晰、结构简洁时,开发者可以
更快速地定位和修复bug
,进行功能扩展或修改。同时,可读性高的代码也有助于后续的代码重构和优化。 - 可扩展性:更具有扩展性和
灵活性
。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。此外,简洁的代码往往更少依赖于特定的实现细节,提供了更多的灵活性和可替换性。 - 错误减少和调试时间:
更容易写出正确的逻辑,减少了出错的概率
。同时,当代码出现问题时,优雅简洁的代码也更容易进行调试和定位错误。 - 性能优化:简洁的代码通常更高效,减少了不必要的计算和资源消耗。精简的代码结构和算法可以提高代码的执行效率和性能
基本功
1. 使用箭头函数简化函数定义
// 传统函数定义
function add(a, b) {
return a + b;
}
// 箭头函数简化
const add = (a, b) => a + b;
2. 使用解构赋值简化变量声明
// 传统变量声明
const firstName = person.firstName;
const lastName = person.lastName;
// 解构赋值简化
const { firstName, lastName } = person;
3. 使用模板字面量进行字符串拼接
// 传统字符串拼接
const greeting = 'Hello, ' + name + '!';
// 模板字面量简化
const greeting = `Hello, ${name}!`;
4. 使用展开运算符进行数组和对象操作
// 合并数组
const combined = [...array1, ...array2];
// 复制对象
const clone = { ...original };
5. 使用数组的高阶方法简化循环和数据操作
// 遍历数组并返回新数组
const doubled = numbers.map(num => num * 2);
// 过滤数组
const evens = numbers.filter(num => num % 2 === 0);
6. 使用条件运算符简化条件判断
// 传统条件判断
let message;
if (isSuccess) {
message = 'Operation successful';
} else {
message = 'Operation failed';
}
// 条件运算符简化
const message = isSuccess ? 'Operation successful' : 'Operation failed';
7. 使用对象解构和默认参数简化函数参数
// 传统参数设置默认值
function greet(name) {
const finalName = name || 'Guest';
console.log(`Hello, ${finalName}!`);
}
// 对象解构和默认参数简化
function greet({ name = 'Guest' }) {
console.log(`Hello, ${name}!`);
}
8. 使用函数式编程概念如纯函数和函数组合
// 纯函数
function add(a, b) {
return a + b;
}
// 函数组合
const multiplyByTwo = value => value * 2;
const addFive = value => value + 5;
const result = addFive(multiplyByTwo(3));
9. 使用对象字面量简化对象的创建和定义
// 传统对象创建
const person = {
firstName: 'John',
lastName: 'Doe',
age: 30,
};
// 对象字面量简化
const firstName = 'John';
const lastName = 'Doe';
const age = 30;
const person = { firstName, lastName, age };
10. 使用适当的命名和注释来提高代码可读性
// 不好的
const x = 10; // 设置x的值为10
function a(b) {
return b * 2; // 返回b的两倍
}
// 好的
const speed = 10; // 设置速度为10
function double(value) {
return value * 2; // 返回输入值的两倍
实战
1. 优雅的写条件判断代码
简单的条件判断逻辑用if else
或者 三元运算符, 一眼看过去还能知道说的啥,但是大量的if else
和叠加在一起的三元运算符就是接盘侠的噩梦~~~
给大家上一个三元运算符叠加的案例,我是真实在项目中遇到过,cpu直接干爆~~~<view>{{status===1?'成功': status===2 ? '失败' : status===3 ? '进行中' : '未开始' }}</view>
大概是这样的,具体的项目代码不好放在这里,小伙伴们意会就行。
复杂逻辑推荐使用对象Map写法,符合人脑的逻辑,可读性高,看着舒服~~~
1,普通的if else
let txt = '';
if (falg) {
txt = "成功"
} else {
txt = "失败"
}
2,三元运算符
let txt = flag ? "成功" : "失败";
3,多个if else
// param {status} status 活动状态:1:成功 2:失败 3:进行中 4:未开始
let txt = '';
if (status == 1) {
txt = "成功";
} else if (status == 2) {
txt = "失败";
} else if (status == 3) {
txt = "进行中";
} else {
txt = "未开始";
}
4,switch case
let txt = '';
switch (status) {
case 1:
txt = "成功";
break;
case 2:
txt = "成功";
break;
case 3:
txt = "进行中";
break;
default:
txt = "未开始";
}
5,对象写法
const statusMap = {
1: "成功",
2: "失败",
3: "进行中",
4: "未开始"
}
//调用直接 statusMapp[status]
5,Map写法
const actions = new Map([
[1, "成功"],
[2, "失败"],
[3, "进行中"],
[4, "未开始"]
])
// 调用直接 actions.get(status)
2. 封装条件语句
同上,if里的条件越多越不利于接盘侠的维护,不利于人脑的理解,一眼看过去又是一堆逻辑。多个逻辑应该化零为整
。
大脑:'别来碰我,让我静静'
暂无评论内容