JS优化技巧,解决冗余代码

  • JS优化技巧,解决冗余代码已关闭评论
  • 95 次浏览
  • A+
所属分类:Web前端
摘要

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


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; // 返回输入值的两倍 

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

简单的条件判断逻辑用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) 

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}`)    } 

再来一个栗子

函数要做的事情如下:

  • 遍历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函数

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

16. 使用解释性的变量

省流,用了扩展运算符,为了可读性(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) 

想对类中的属性进行更多自定义取/增/改的操作时,使用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; 

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

闭包天生就是做私有化的

// 不好的    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.getName = function(){       return 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 方法,占用更多的内存空间。

18. 使用方法链

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

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(); 

看完上面的这么多栗子,小伙伴的思路是不是清晰了很多,在你们的项目里练练手吧。