1. 程式人生 > 程式設計 >JavaScript程式碼簡化技巧例項解析

JavaScript程式碼簡化技巧例項解析

函數語言程式設計可以使您的程式碼更簡單。簡單意味著程式碼易於閱讀和理解,可測試和可維護。

在本文中,我描述了一些函數語言程式設計(FP)技巧,您可以使用它們來簡化程式碼,從而使程式碼更好。

擺脫臨時變數和不變性原則

函數語言程式設計傾向於不變性,這種不變性原則意味著在初始化變數之後不會更改它們的值。同樣,建立物件或字串後,您也無需對其進行突變。

如果使用JavaScript程式設計,則所有變數定義都應使用 const。對於正在閱讀您的程式碼的任何人,常量定義都可以讓您高枕無憂:它保證永遠不會重新分配變數,因為重新分配是不可能的,所以讀者的大腦從跟蹤和識別程式碼中重新分配的負擔中解脫出來。

何時需要更改值呢?首先,您可以擁有一個數組:

const fruits = ['apple','orange','banana']

要將新水果新增到此列表中,該怎麼辦?解決方案是用新的或更新的值初始化一個新的常量變數,我們可以使用點擴充套件符複製現有的 fruits 值:

const allFruits = [...fruits,'pineapple']

您應該在程式碼的任何地方都遵循不變性原則,因為如果這樣做,您的程式碼將變得更乾淨。

您知道 fruits 變數的值永遠不會改變,並且您第一次看到變數的宣告時就知道這一事實,初始化後,在任何可見的 fruits 變數處,您都知道。

擺脫迴圈

考慮以下迴圈:

var list = [];
var i = 0;
while (i < rows.length) {
  var row = rows[i];
  var message = {
    childAddress: row[1],action: 'switchToBackupNode2',role: 'edge'
  };
  list.push(message);
  i += 1;
}

函式程式設計方法去掉了while迴圈,並使用map將行處理為一個列表。

const list = rows.map(r => ({ 
  childAddress: r[1],role: 'edge'
 }))

除了擺脫迴圈之外,這段程式碼還刪除了臨時變數 row 和 message 以及迴圈變數 i。

結果更具可讀性,非常清晰。

為了公平起見,要獲得此信任級別,您需要首先了解map函式。map函式在函數語言程式設計中無處不在,因此學習它是過渡到FP的重要步驟。

map是程式設計師用於列表處理的函式之一。處理列表中的資料是FP的重要組成部分,您還應該學習其他列表處理功能:最重要的是 reduce 和 filter 函式。

刪除if..else

在我的簡化程式碼的實踐中,刪除 if 是一個有用的策略。有幾種策略可以用於從程式碼中刪除 if 語句,並且應用其中任何一種通常都會得到更清晰、更容易理解的結構。

讓我們看一下刪除 if 語句的一些策略。

三元運算子

三元運算子是我從變數賦值中去掉 if 語句的主要工具。

考慮以下:

let message;
if (person !== null) {
 message = `hello,${person}!`
} else {
 message = 'hey there!'
}

上面的程式碼中有兩個問題:

我必須使用非 const 變數 message,因為對於 if 結構,我無法在變數宣告中立即給 message 賦值。
考慮到它只完成了宣告變數和有條件地為變數賦值的簡單任務,程式碼相當冗長和複雜。
使用三元運算子? 可以在一行中完成相同的工作:

const message = person !== null ? `hello,${person}!` : 'hey there!'

布林運算子 && 和 ||

布林運算子 && 和 || 為 if 語句提供有效的替代方法。

不要這樣做:

if (value) {
doStuff(value)
} else {
doStuff(1)
}

改進:

doStuff(value || 1)

這裡的邏輯或操作符 || 提供了向函式傳遞預設值的快速方法。每次不知道或不確定變數是否具有值時,都可以使用相同的技巧:使用 || <default> 作為字首提供預設值。

這是一個如何使用邏輯與運算子 && 的示例。首先,使用 if 的版本:

if (data) {
sendData(data.value);
}

然後我們使用 && 刪除 if :

data && sendData(data.value)

在這裡,我們使用 && 來首先檢查資料變數是否包含值。如果沒有這個檢查,當沒有值時程式碼就會崩潰(換句話說,值為 null 或 undefined)。

在這裡使用這些運算子時,我們依賴布林表示式的短路求值。&& 和 || 運算子,當第一部分錯誤時,JavaScript不會計算表示式的後半部分。

Map 和 查詢

使用 map 作為查詢 list 是替換一系列if語句的有效方法。考慮以下:

let language;
if (country === 'FI') {
	language = 'Finnish'
} else if (country === 'SE') {
	language = 'Swedish'
} else if (country === 'USA') {
 language = 'English (American)'
} else if (country === 'UK') {
 language = 'English (UK)'
} // etc...

更簡潔的方法是使用國家/語言對的Map。

const languages = new Map([
 ['FI','Finnish'],['SE','Swedish'],['USA','English (American)'],['UK','English (UK)'],])
const language = languages.get('SE')
console.log(language) // Swedish

第二種實現要簡單得多。該程式碼立即顯示出它的意圖。另外,它將 language 變數轉換為使用 const。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。