让你的代码变优雅的一些小技巧

为什么要写一手优雅的代码？

采用简洁的语法和结构，遵循一致的命名规范，具有良好的代码组织和注释，同时表达了代码的意图和逻辑。

主要有以下几个优点：

可读性：易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确，降低理解代码的难度，提高代码的可读性。
可维护性：易于维护。当代码逻辑清晰、结构简洁时，开发者可以更快速地定位和修复bug，进行功能扩展或修改。同时，可读性高的代码也有助于后续的代码重构和优化。
可扩展性：更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。此外，简洁的代码往往更少依赖于特定的实现细节，提供了更多的灵活性和可替换性。
错误减少和调试时间：更容易写出正确的逻辑，减少了出错的概率。同时，当代码出现问题时，优雅简洁的代码也更容易进行调试和定位错误。
性能优化：简洁的代码通常更高效，减少了不必要的计算和资源消耗。精简的代码结构和算法可以提高代码的执行效率和性能。

1. 使用箭头函数简化函数定义

箭头函数是ES6中引入的一种语法，它可以缩短函数的代码长度，同时提高代码的可读性。

// 传统函数定义
function add(a, b) {
 return a + b;
 }
// 箭头函数简化
const add = (a, b) => a + b;

2. 使用解构赋值简化变量声明

解构赋值是ES6中引入的一种语法，它可以将对象或数组中的值解构出来，赋值给变量。这样可以使代码更加简洁易懂，提高代码的可读性和可维护性。

// 传统变量声明
const firstName = person.firstName;
const lastName = person.lastName;
// 解构赋值简化
const { firstName, lastName } = person;

3. 使用模板字面量进行字符串拼接

在ES6之前，我们通常使用加号或者concat()方法来进行字符串拼接。但这种方式比较繁琐，代码可读性也较差。在ES6中，我们可以使用模板字符串来处理字符串拼接，可以让代码更加清晰易懂。

// 传统字符串拼接
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; // 返回输入值的两倍
}

11. if条件表达式不要太复杂

简单的条件判断逻辑用if else 或者三元运算符, 一眼看过去还能知道说的啥，但是大量的if else和叠加在一起的三元运算符就是接盘侠的噩梦~~~

复杂逻辑推荐使用对象Map写法，符合人脑的逻辑，可读性高，看着舒服~~~

1，普通的if else

let txt = '';
if (falg) {
 txt = "成功"
} else {
 txt = "失败"
}

2，三元运算符

let txt = flag ? "成功" : "失败";

3，多个if else

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]

6，Map写法

const actions = new Map([
 [1, "成功"],
 [2, "失败"],
 [3, "进行中"],
 [4, "未开始"]
])
// 调用直接 actions.get(status)

12. 封装条件语句

同上，if里的条件越多越不利于接盘侠的维护，不利于人脑的理解，一眼看过去又是一堆逻辑。多个逻辑应该化零为整。

// 不好的
if (fsm.state === 'fetching' && isEmpty(listNode)) {
 // ...
}

// 好的
shouldShowSpinner(fsm, listNode){
 return fsm.state === 'fetching' && isEmpty(listNode)
}
if(shouldShowSpinner(fsm, listNode)){
 //...doSomething
}

13. 类和方法单一职责

代码太长，给人的第一眼感觉就很复杂，让人不想读下去；同时方法太长的代码可能读起来容易让人摸不着头脑，不知道哪一些代码是同一个业务的功能。函数应该只做一件事，函数式写法推崇柯里化, 一个函数一个功能，可拆分可组装。

// 不好的
function createFile(name, temp) {
 if (temp) {
   fs.create(`./temp/${name}`);
 } else {
   fs.create(name);
 }
}

// 好的
function createFile(name) {
 fs.create(name);
}

function createTempFile(name) {
 createFile(`./temp/${name}`)
}

14. Object.assign给默认对象赋默认值

Object.assign()该方法可以将一个或多个源对象的所有属性复制到目标对象中，从而实现对象的合并。

// 不好的
const menuConfig = {
 title: null,
 body: 'Bar',
 buttonText: null,
 cancellable: true
};
function createMenu(config) {
 config.title = config.title || 'Foo';
 config.body = config.body || 'Bar';
 config.buttonText = config.buttonText || 'Baz';
 config.cancellable = config.cancellable === undefined ?
 config.cancellable : true;
}
createMenu(menuConfig);

// 好的
const menuConfig = {
 title: 'Order',
 buttonText: 'Send',
 cancellable: true
};
function createMenu(config) {
 Object.assign({
   title: 'Foo',
   body: 'Bar',
   buttonText: 'Baz',
   cancellable: true 
 }, config)
}
createMenu(menuConfig);

15. 函数参数两个以下最好

/ 不好的
function createMenu(title, body, buttonText, cancellable) {
 // ...
}

// 好的
const menuConfig = {
 title: 'Foo',
 body: 'Bar',
 buttonText: 'Baz',
 cancellable: true
};
function createMenu(config){
 // ...
}

createMenu(menuConfig)