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



}



//調用直接 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();

看完上面的這么多栗子，小伙伴的思路是不是清晰了很多，在你們的項目里練練手吧。

posted @ 2023-08-02 12:50 二價亞鐵閱讀(365) 評論(0) 收藏舉報

刷新頁面返回頂部

二價亞鐵.

JS優化技巧，解決冗余代碼

1. 使用箭頭函數簡化函數定義

2. 使用解構賦值簡化變量聲明

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

4. 使用展開運算符進行數組和對象操作

5. 使用數組的高階方法簡化循環和數據操作

6. 使用條件運算符簡化條件判斷

7. 使用對象解構和默認參數簡化函數參數

8. 使用函數式編程概念如純函數和函數組合

9. 使用對象字面量簡化對象的創建和定義

10. 使用適當的命名和注釋來提高代碼可讀性

11. 優雅的寫條件判斷代碼

1，普通的if else

2，三元運算符

3，多個if else

4，switch case

5，對象寫法

5，Map寫法

12. 封裝條件語句

13. 函數應該只做一件事

14. Object.assign給默認對象賦默認值

15. 函數參數兩個以下最好

16. 使用解釋性的變量

17. 讓對象擁有私有成員-通過閉包來實現

18. 使用方法鏈

公告

二價亞鐵.

JS優化技巧，解決冗余代碼

1. 使用箭頭函數簡化函數定義

2. 使用解構賦值簡化變量聲明

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

4. 使用展開運算符進行數組和對象操作

5. 使用數組的高階方法簡化循環和數據操作

6. 使用條件運算符簡化條件判斷

7. 使用對象解構和默認參數簡化函數參數

8. 使用函數式編程概念如純函數和函數組合

9. 使用對象字面量簡化對象的創建和定義

10. 使用適當的命名和注釋來提高代碼可讀性

11. 優雅的寫條件判斷代碼

1，普通的if else

2，三元運算符

3，多個if else

4，switch case

5，對象寫法

5，Map寫法

12. 封裝條件語句

13. 函數應該只做一件事

14. Object.assign給默認對象賦默認值

15. 函數參數兩個以下最好

16. 使用解釋性的變量

17. 讓對象擁有私有成員-通過閉包來實現

18. 使用方法鏈

公告

JS優化技巧，解決冗余代碼

2，三元運算符

3，多個if else

5，對象寫法

5，Map寫法