解釋 JavaScript 中函數語言程式設計的概念
主要存在兩種程式設計正規化:指令式程式設計正規化和宣告式程式設計正規化。函數語言程式設計是宣告式正規化的一個子型別。正規化一詞指的是解決特定問題的方法。
函數語言程式設計已經使用了數十年,但在 2015 年 JavaScript 釋出了最後一個主要修訂版本之後才開始流行起來。使用函數語言程式設計有很多好處,我們將在本教程中討論這些好處。
函數語言程式設計的不同概念及其優勢
函數語言程式設計的工作方式與數學函式的工作方式相同。它允許開發人員基於函式求值來開發軟體。這意味著程式設計師可以將程式碼分解成小的部分,我們可以稱之為函式,從而使程式碼更容易評估和測試。本教程涵蓋了以下函數語言程式設計的概念:
純函式
程式碼可讀性
程式碼可維護性和更少的錯誤
高階函式
JavaScript 中的純函式
純函式
在 JavaScript 中,我們可以編寫純函式。簡單來說,純函式將值作為引數,對其執行某些操作,並返回輸出。
純函式永遠不會與其他函式共享任何變數或使用全域性變數。
以下是純函式的屬性:
對於給定的輸入,純函式始終返回相同的輸出。
純函式不依賴於任何外部狀態 - 純函式不依賴於任何外部狀態或未作為引數傳遞給它們的變數。
純函式不會產生任何副作用 - 純函式不會產生任何副作用,例如修改全域性變數或更改外部物件的狀態。
您可以透過以下示例更好地瞭解純函式。
示例 1
在下面的示例中,我們建立了一個名為 pure_func() 的純函式,它將值作為引數並將其乘以 2。之後,它列印該值。使用者可以看到 pure_func() 沒有與其他函式全域性共享任何變數。
此外,我們可以在不將其作為純函式的引數傳遞的情況下直接使用 global_var。儘管如此,我們還是將其作為引數傳遞,因為純函式永遠不會共享在函式作用域之外宣告的任何變數。
<html>
<body>
<h2>Pure function in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
let global_Var = 56;
function pure_func(param) {
param = param*2;
output.innerHTML += "The Double value of param is " + param + " <br/>";
}
pure_func(global_Var);
pure_func(30);
</script>
</body>
</html>
程式碼可讀性
由於我們在函數語言程式設計中使用函式編寫所有邏輯,因此使我們的程式碼更具可讀性。例如,在其他程式語言中,我們使用 for 或 while 迴圈遍歷陣列。但是函數語言程式設計允許我們使用 for-of 迴圈,這使得程式碼更具可讀性,並告訴其他開發人員我們想要遍歷陣列並在每個陣列元素上執行某些操作。
讓我們來看另一個例子。假設我們想從陣列中過濾一些值。在其他程式設計方法中,我們編寫一個手動函式來過濾值,但在函數語言程式設計方法中,我們可以使用 filter() 方法,這表明我們想要根據特定邏輯從陣列中過濾值。
示例 2
在下面的示例中,我們使用了 filter() 方法來過濾所有能被 10 整除的值。使用者可以看到它看起來多麼清晰,並且它告訴我們我們想要從陣列中過濾某些內容。
現在,讓我們看看過濾值的樸素方法。我們使用 for 迴圈遍歷陣列,並使用 if 語句檢查是否能被 10 整除,並將結果推送到另一個數組。但是,這兩個程式碼都會給出相同的結果,但第一個程式碼更具可讀性。
<html>
<body>
<h2>Using the <i> filter() </i> method to filter values from the array</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
// creating the array of values
let array = [10, 20, 50, 54, 32, 60, 54];
output.innerHTML += "Original Array: " + array + "<br>";
// using the functional programming approach to filter
//all values which are divisible by 10
let divisibleBy10 = array.filter((ele) => ele % 10 == 0);
output.innerHTML += "All values divisible by 10: " + divisibleBy10;
// using the normal approach to filter values
let filterValues = [];
for (let i = 0; i < array.length; i++) {
let ele = array[i];
if (ele % 10 == 0) {
filterValues.push(ele);
}
}
</script>
</body>
</html>
程式碼可維護性和更少的錯誤
函數語言程式設計允許我們使程式碼更易於維護。眾所周知,程式碼重構比編寫新程式碼需要更多時間和成本。此外,開發人員花費更多時間進行程式碼重構。
從上面給出的最後一個示例中,我們可以理解,編寫第二種過濾值的方法需要更多時間才能讓其他開發人員理解。因此,如果我們透過函式執行每個邏輯,則可以使程式碼更具可讀性和可維護性。
此外,我們可以透過使用函數語言程式設計來減少錯誤。正如我們在示例 1 中所看到的,當我們使用函式式方法時,我們無需擔心作用域和所有內容。如果任何初學者對作用域沒有足夠的瞭解,他們可能會編寫充滿錯誤的程式碼。
此外,程式碼的每個部分都有其作用域,我們不需要像在面向物件程式語言中那樣使用 `this` 關鍵字來引用作用域。因此,不使用此關鍵字也可以減少錯誤。
高階函式
高階函式允許我們將函式作為另一個函式的引數傳遞。例如,我們可以將回調函式作為陣列的 reduce() 方法的引數傳遞。在回撥函式中,我們可以編寫將陣列縮減為單個元素的邏輯。
示例 3
在此示例中,我們使用了 reduce() 方法將陣列縮減為單個元素,並將回撥函式作為引數傳遞。它表示高階函式,因為我們將函式作為引數傳遞。
<html>
<body>
<h2>Using the <i>reduce()</i> method to introduce higher order functions</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
// creating the array of values
let array = [6, 7, 8, 42, 23, 43, 2, 43, 23, 3, 13];
output.innerHTML = "Original Array: " + array + "<br>";
// using the array.reduce() method to find the total of the array
//and pass the arrow function as an argument of the reduce() method
let total = array.reduce((total, num) => {
return total + num;
});
output.innerHTML += "The total of the array values: " + total;
</script>
</body>
</html>
我們學習了函數語言程式設計方法,以及它與程式設計正規化相比如何有益且有所不同。我們瞭解到,它提供了一種編寫可維護且可讀的程式碼的方法,並且錯誤更少。
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP