孤寂人生 发表于 2023-8-2 22:22:37

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

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: "未开始"



}



//调用直接 statusMapp5,Map写法

const actions = new Map([



,



,



,







])



// 调用直接 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), address.match(cityZipCodeRegex));



// 好的



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();看完上面的这么多栗子,小伙伴的思路是不是清晰了很多,在你们的项目里练练手吧。

来源:https://www.cnblogs.com/xw-01/p/17600393.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: JS优化技巧,解决冗余代码