代码优化

...大约 8 分钟

代码优化

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

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

主要有以下几个优点：

可读性：易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确，降低理解代码的难度，提高代码的可读性。
可维护性：易于维护。当代码逻辑清晰、结构简洁时，开发者可以更快速地定位和修复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里的条件越多越不利于接盘侠的维护，不利于人脑的理解，一眼看过去又是一堆逻辑。多个逻辑应该化零为整。

// 大脑：'别来碰我，让我静静'
// 不好的
if (fsm.state === 'fetching' && isEmpty(listNode)) {
	// ...
}
	// 好的
shouldShowSpinner(fsm, listNode){
  	return fsm.state === 'fetching' && isEmpty(listNode)
}
if(shouldShowSpinner(fsm, listNode)){
  	//...doSomething
}

3. 函数应该只做一件事

函数式写法推崇柯里化, 一个函数一个功能，可拆分可组装。

// 不好的
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}`)
}

再来一个栗子

函数要做的事情如下：

遍历clients数组
遍历过程中，通过lookup函数得到一个新的对象clientRecord
判断clientRecord对象中isActive函数返回的是不是true,
isActive函数返回true,执行email函数并把当前成员带过去

// 不好的
function emailClients(clients) {
    clients.forEach((client) => {
      	 const clientRecord = database.lookup(client)
         if (clientRecord.isActive()) {
            email(client)
         }
    });
}
// 好的
function emailClients(clients) {
  	clients
    	.filter(isClientRecord)
    	.forEach(email)
}
function isClientRecord(client) {
  	const clientRecord = database.lookup(client)
  	return clientRecord.isActive()
}

上面不好的栗子一眼看过去是不是感觉一堆代码在那，一时半会甚至不想去看了。

好的栗子，是不是逻辑很清晰，易读。

巧用filter函数，把filter的回调单开一个函数进行条件处理，返回符合条件的数据
符合条件的数据再巧用forEach，执行email函数

4. 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)

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

说一千道一万，就是为了优雅，就是为了可读性好。

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

6. 使用解释性的变量

省流，用了扩展运算符，为了可读性（saveCityZipCode(city, zipCode)可读性很好，知道参数是干嘛的）

// 不好的
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);

// 好的
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
cosnt [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode)

7. 想对类中的属性进行更多自定义取/增/改的操作时，使用set/get

第一次见这个写法，不知道是啥意思的小伙伴，把他当成vue2中的defineProperty

Object.defineProperty(data1,'age',{
    set:function(newAge){
        console.log(this.name+'现在'+newAge+'岁')
    },
    get:function(){
	    return 18;
	}
})

是一个意思，赋值的时候set会被触发，取值的时候get会被触发。

巧用自带属性，提升性能。

class BankAccount {
	constructor(balance = 1000) {
  	this._balance = balance;
}
// It doesn't have to be prefixed with `get` or `set` to be a
//getter/setter
set balance(amount) {
  	console.log('set')
    if (verifyIfAmountCanBeSetted(amount)) {
        this._balance = amount
    }
    }
    get balance() {
        console.log('get')
        return this._balance;
    }
    verifyIfAmountCanBeSetted(val) {
        // ...
    }
}
const bankAccount = new BankAccount();
// Buy shoes...
bankAccount.balance -= 100;
// Get balance
let balance = bankAccount.balance;

8. 让对象拥有私有成员-通过闭包来实现

闭包天生就是做私有化的

// 不好的
const Employee = function(name) {
    this.name = name;
};
Employee.prototype.getName = function getName() {
	return this.name;
};
const employee = new Employee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined
// 好的
const Employee = function(name){
    this.name = name;
    this.getName = function(){
         return this.name
    }
}
const employee = new Employee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined

第一个示例

优点：

通过原型链共享方法，节省了内存空间。所有实例对象共享同一个 getName 方法，而不是每个实例对象都创建一个独立的方法。

缺点：

在构造函数中无法直接定义私有属性或方法，所有属性和方法都会被暴露在原型链上。

第二个示例

优点：

可以在构造函数内部定义私有属性和方法，不会暴露在对象的原型链上，提供了更好的封装性。

缺点：

每次创建实例对象时，都会创建一个独立的方法，每个实例对象都有自己的 getName 方法,占用更多的内存空间。

9. 使用方法链

链式写法也是代码优雅之道的重头戏。

ps：发明这个的程序员肯定是后端出身的，这种写法在PHP的CI框架中见过。

// 不好的
class Car {
    constructor() {
      this.make = 'Honda';
      this.model = 'Accord';
      this.color = 'white';
   }
    setMake(make) {
      this.make = make;
   }
    save() {
      console.log(this.make, this.model, this.color);
   }
  }
  const car = new Car();
  car.setMake('Ford');
  car.save();
  // 好的
  class Car {
    constructor() {
      this.make = 'Honda';
      this.model = 'Accord';
      this.color = 'white';
   }
    setMake(make) {
      this.make = make;
      // NOTE: return this是为了用链式写法
      return this;
   }
    save() {
      console.log(this.make, this.model, this.color);
      // NOTE:return this是为了用链式写法
      return this;
   }
}
const car = new Car()
	.setMake('Ford')
	.save();

昵称

邮箱

网址

按正序
按倒序
按热度

代码优化

# 代码优化

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

# 基本功

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

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

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

# 4. 使用展开运算符进行数组和对象操作

# 5. 使用数组的高阶方法简化循环和数据操作

# 6. 使用条件运算符简化条件判断

# 7. 使用对象解构和默认参数简化函数参数

# 8. 使用函数式编程概念如纯函数和函数组合

# 9. 使用对象字面量简化对象的创建和定义

# 10. 使用适当的命名和注释来提高代码可读性

# 实战

# 1. 优雅的写条件判断代码

# 1，普通的if else

# 2，三元运算符

# 3，多个if else

# 4，switch case

# 5，对象写法

# 5，Map写法

# 2. 封装条件语句

# 3. 函数应该只做一件事

# 4. Object.assign给默认对象赋默认值

# 5. 函数参数两个以下最好

# 6. 使用解释性的变量

# 7. 想对类中的属性进行更多自定义取/增/改的操作时，使用set/get

# 8. 让对象拥有私有成员-通过闭包来实现

# 9. 使用方法链

预览:

代码优化

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

基本功

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

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

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

4. 使用展开运算符进行数组和对象操作

5. 使用数组的高阶方法简化循环和数据操作

6. 使用条件运算符简化条件判断

7. 使用对象解构和默认参数简化函数参数

8. 使用函数式编程概念如纯函数和函数组合

9. 使用对象字面量简化对象的创建和定义

10. 使用适当的命名和注释来提高代码可读性

实战

1. 优雅的写条件判断代码

1，普通的if else

2，三元运算符

3，多个if else

4，switch case

5，对象写法

5，Map写法

2. 封装条件语句

3. 函数应该只做一件事

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

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

6. 使用解释性的变量

7. 想对类中的属性进行更多自定义取/增/改的操作时，使用set/get

8. 让对象拥有私有成员-通过闭包来实现

9. 使用方法链