解釋 JavaScript 中的高階函式

---

什麼是 JavaScript 中的高階函式？

JavaScript 作為一種多正規化語言，它支援程序式程式設計、函數語言程式設計和麵向物件程式設計。由於它也是一種函數語言程式設計語言，JavaScript 將函式視為一等實體，其中函式可以分配給變數、將其設定為物件的屬性，並可以將其作為引數傳遞給另一個函式。JavaScript 中的這種特性有助於實現高階函式，這些函式可以透過將其他函式作為引數或返回其他函式來對其他函式進行操作。

讓我們舉個例子，並在不使用任何高階函式的情況下實現它。

示例

在下面的程式碼中，我們有一個數字列表，我們希望將每個元素加 10，為了在不使用高階函式的情況下實現這一點，我們需要使用 for 迴圈遍歷陣列並將每個值加 10，並將遞增的值推送到一個新陣列中。最後，使用 console.log() 列印遞增的陣列。

const numbers = [1, 2, 3, 4, 5];

incrementedNums=[]

for(i=0;i<numbers.length;i++){
   added=i+10
   incrementedNums.push(added)
}
console.log(incrementedNums)

輸出

[ 10, 11, 12, 13, 14 ]

現在，讓我們看看使用 .map() 函式（這是一種高階函式）實現相同的功能。

在這裡，我們不用使用 for 迴圈遍歷整個陣列，而是使用了一個高階函式 .map()，它遍歷陣列並將每個元素傳遞給作為引數傳遞的函式 (add())。

示例

const numbers = [1, 2, 3, 4, 5];

function add(num){
   return(num+10)
}
const incrementedNumbers = numbers.map(add);

console.log(incrementedNumbers);

輸出

[ 11, 12, 13, 14, 15 ]

這就是 map 函式的工作原理。它迭代一個數組，並對每個陣列元素執行提供的函式一次，並將輸出作為陣列返回。Map() 函式不會更改原始陣列，也不會對空陣列執行操作。

以下 JavaScript 函式是一些內建的高階函式：

• map()

• forEach()

• filter()

• reduce()

讓我們看看其他方法：

forEach() 方法

forEach 方法類似於 map 函式，它對陣列中的每個元素執行回撥函式。forEach() 和 map() 之間的唯一區別在於，map 函式返回一個數組輸出，而 forEach 返回 undefined，它只是遍歷陣列。

示例

以下程式碼顯示了 forEach 方法的工作原理：

const numbers = [10, 20, 30, 40];

sum=0
numbers.forEach(add)

function add(n){
   sum=sum+n
}
console.log(sum)

輸出

100

在上面的程式碼中，我們取了一個包含 4 個元素的陣列，使用 .forEach() 遍歷它，並使用回撥函式 add() 找到其中存在的元素的總和。

filter() 方法

.filter() 方法淺複製陣列並過濾掉透過提供的回撥函式實現的條件的值。它是一種迭代方法，它對陣列中的每個元素呼叫作為引數給出的回撥函式，並返回一個輸出陣列，其中包含回撥函式返回真值結果的元素。

示例

numbers=[10, 11, 12, 14, 15]

even=numbers.filter(iseven)
function iseven(n){
   return(n%2===0)
}
console.log(even)

輸出

[ 10, 12, 14 ]

reduce() 方法

與 map 和 foreach 類似，reduce 方法也對陣列的每個元素執行回撥函式（reducer 函式），生成單個輸出。簡單來說，reduce 方法將陣列簡化為單個值。reducer 函式的引數是一個回撥函式，該回調函式進一步有兩個引數，累加器和當前值。其中當前值是陣列的當前迭代值。累加器累積回撥函式的輸出。最終返回值儲存在累加器中。

示例

numbers=[10,11,12,13]

total =numbers.reduce(function(acc,el){
   return acc+el
},0)

console.log(total)

輸出

46

在上面的程式碼中，給定一個數字陣列，我們希望找到該陣列的總和。我們使用 reduce 方法，該方法將回調函式作為其引數。如上所述，此回撥函式有兩個引數：acc（累加器）和 el（當前元素）。

此回撥函式應用於陣列中的每個元素。使用 acc，我們可以在遍歷陣列時累積結果。在這種情況下，回撥函式只是將當前元素 (el) 新增到累加器 (acc)。作為第二個引數傳遞的 0 是累加器。

map() 方法

如上一節所述，map() 函式迭代陣列並對陣列中的每個元素應用回撥函式。讓我們考慮另一個示例並瞭解一下。在下面的示例中，map 函式迭代給定的數字陣列並將它們傳遞給 sqrt 函式，從而生成根值的輸出。

示例

numbers=[4,9,16,25,36]

root= numbers.map(Math.sqrt)
console.log(root)

輸出

[ 2, 3, 4, 5, 6 ]
(node:328974) [DEP0016] DeprecationWarning: 'root' is deprecated, use 'global'