JS優(yōu)化冗余代碼的技巧分享
更新時間：2023年08月02日 14:10:22 作者：二價亞鐵
這篇文章主要為大家整理了18個JavaScript優(yōu)化冗余代碼的技巧，文中的示例代碼簡潔易懂，具有一定的借鑒價值，感興趣的小伙伴可以了解一下
1. 使用箭頭函數簡化函數定義
// 傳統(tǒng)函數定義
function add(a, b) {
return a + b;
}
// 箭頭函數簡化
const add = (a, b) => a + b;2. 使用解構賦值簡化變量聲明
// 傳統(tǒng)變量聲明
const firstName = person.firstName;
const lastName = person.lastName;
// 解構賦值簡化
const { firstName, lastName } = person;3. 使用模板字面量進行字符串拼接
// 傳統(tǒng)字符串拼接
const greeting = 'Hello, ' + name + '!';
// 模板字面量簡化
const greeting = `Hello, ${name}!`;4. 使用展開運算符進行數組和對象操作
// 合并數組
const combined = [...array1, ...array2];
// 復制對象
const clone = { ...original };5. 使用數組的高階方法簡化循環(huán)和數據操作
// 遍歷數組并返回新數組 const doubled = numbers.map(num => num * 2); // 過濾數組 const evens = numbers.filter(num => num % 2 === 0);
6. 使用條件運算符簡化條件判斷
// 傳統(tǒng)條件判斷
let message;
if (isSuccess) {
message = 'Operation successful';
} else {
message = 'Operation failed';
}
// 條件運算符簡化
const message = isSuccess ? 'Operation successful' : 'Operation failed';7. 使用對象解構和默認參數簡化函數參數
// 傳統(tǒng)參數設置默認值
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. 使用對象字面量簡化對象的創(chuàng)建和定義
// 傳統(tǒng)對象創(chuàng)建
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. 優(yōu)雅的寫條件判斷代碼
簡單的條件判斷邏輯用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 活動狀態(tài)：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]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}`)
}再來一個栗子
函數要做的事情如下：
遍歷clients數組
遍歷過程中，通過lookup函數得到一個新的對象clientRecord
判斷clientRecord對象中isActive函數返回的是不是true,
isActive函數返回true,執(zhí)行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()
}上面不好的栗子一眼看過去是不是感覺一堆代碼在那，一時半會甚至不想去看了。
好的栗子，是不是邏輯很清晰，易讀。
1.巧用filter函數，把filter的回調單開一個函數進行條件處理，返回符合條件的數據
2.符合條件的數據再巧用forEach，執(zhí)行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. 函數參數兩個以下最好
說一千道一萬，就是為了優(yōu)雅，就是為了可讀性好。
// 不好的
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會被觸發(fā)，取值的時候get會被觸發(fā)。
巧用自帶屬性，提升性能。
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第一個示例
優(yōu)點：
通過原型鏈共享方法，節(jié)省了內存空間。所有實例對象共享同一個 getName 方法，而不是每個實例對象都創(chuàng)建一個獨立的方法。
缺點：
在構造函數中無法直接定義私有屬性或方法，所有屬性和方法都會被暴露在原型鏈上。
第二個示例
優(yōu)點：
可以在構造函數內部定義私有屬性和方法，不會暴露在對象的原型鏈上，提供了更好的封裝性。
缺點：
每次創(chuàng)建實例對象時，都會創(chuàng)建一個獨立的方法，每個實例對象都有自己的 getName 方法,占用更多的內存空間。
18. 使用方法鏈
鏈式寫法也是代碼優(yōu)雅之道的重頭戲。
ps：發(fā)明這個的程序員肯定是后端出身的，這種寫法在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();看完上面的這么多栗子，小伙伴的思路是不是清晰了很多，在你們的項目里練練手吧。
以上就是JS優(yōu)化冗余代碼的技巧分享的詳細內容，更多關于JS優(yōu)化的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了JS 動態(tài)判斷PC和手機瀏覽器實現代碼的相關資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細介紹了如何使用JavaScript實現支持過期時間的數據緩存功能,文中的示例代碼講解詳細,感興趣的小伙伴可以參考下2025-01-01
語音排隊叫號系統(tǒng)廣泛用于銀行，餐飲，醫(yī)院等場景。本文主要介紹了通過JavaScript實現的語音排隊叫號系統(tǒng)，有掃碼排隊，語音叫號等功能。需要的可以參考一下2021-12-12
這篇文章主要為大家詳細介紹了原生js模擬購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了JS實現基本的網頁計算器功能,涉及JavaScript事件響應及數值運算相關操作技巧,需要的朋友可以參考下2020-01-01
2008-04-04
這篇文章主要為大家介紹了JavaScript中高級語法??表達式用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
用javascript調出windows色版的代碼...2007-07-07
這篇文章主要為大家詳細介紹了原生js點擊輪播切換圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了JS實現時間校驗的代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05