JavaScript高階函數的詳細介紹（附程式碼）

這篇文章帶給大家的內容是關於JavaScript高階函數的詳細介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

把函數以資料的形式去使用，並且解鎖一些強大的模式。

高階函數

接受和/或傳回另一個函數的函數稱為高階函數。

之所以是高階，是因為它並非字串、數字或布林值，而是從更高層次來操作函數。漂亮的元。

使用JavaScript 中的函數，你可以

• 將它們儲存為變數
• 在陣列中使用它們
• 將它們指定為對象屬性（方法）
• 將它們作為參數進行傳遞
• 將它們從其他函數中返回

##就像所有的其他資料一樣。這是關鍵所在。

函數操作資料

字串是資料

sayHi = (name) => `Hi, ${name}!`;
result = sayHi('User');
console.log(result); // 'Hi, User!'

數字是資料

double = (x) => x * 2;
result = double(4);
console.log(result); // 8

布林型是資料

getClearance = (allowed) => allowed ?
  'Access granted' :
  'Access denied';
result1 = getClearance(true);
result2 = getClearance(false);
console.log(result1); // 'Access granted'
console.log(result2); // 'Access denied'

物件是數據

getFirstName = (obj) => obj.firstName;
result = getFirstName({
  firstName: 'Yazeed'
});
console.log(result); // 'Yazeed'

陣列是資料

len = (array) => array.length;
result = len([1, 2, 3]);
console.log(result); // 3

這5種類型是所有主流語言中的一等公民。

是什麼使他們成為一等公民的？你可以傳遞它們，將它們儲存在變數和陣列中，將它們用作計算的輸入。你可以像使用

任何資料一樣去使用它們。

函數也可以當作資料的形式去用

在javascript中把函數當作資料的4種方式：

#把它們當作參數傳給其它函數
1. 把他們設定成物件屬性
2. 保存在陣列中
3. 把它們設為變數的形式

作為參數的函數

isEven = (num) => num % 2 === 0;
result = [1, 2, 3, 4].filter(isEven);
console.log(result); // [2, 4]

看看

filter 是如何用isEven 來決定保留哪些數字的？ isEven是一個函數，是另一個函數的參數。

它由每個數字的

filter 調用，並使用返回值 true 或 false 來確定這個數字是否應該保留或丟棄。

傳回函數

add = (x) => (y) => x + y;

add 需要兩個參數，但不是一次全部提供。這是一個只需要 x 的函數，它會傳回一個只需要y的函數。因為 JavaScript 允許函數成為回傳值 —— 就像字串、數字、布林值那樣。

如果你願意，仍然可以立即提供

x 和y，並進行雙重呼叫

result = add(10)(20);
console.log(result); // 30

或先

x 後y：

add10 = add(10);
result = add10(20);
console.log(result); // 30

讓我們回頭來看最後一個例子。 add10 是用一個參數來呼叫 add 的結果。並控制台中輸出它。

add10 是一個函數，它接受一個 y 並且回傳 x y。在你提供 y 之後，它會馬上計算並回傳你所要的最終結果。

更高的可重複使用性

高階函數的最大好處可能是更高的可重用性。沒有它，JavaScript 陣列的主要方法 —

map，filter 和 reduce 將不存在！

這是一個使用者清單。我們將對他們的資訊進行一些計算。

users = [{
  name: 'Yazeed',
  age: 25
}, {
  name: 'Sam',
  age: 30
}, {
  name: 'Bill',
  age: 20
}];

Map

如果沒有高階函數，我們需要用迴圈來模仿

map 的函數。

getName = (user) => user.name;
usernames = [];
for (let i = 0; i 或我們可以這樣做！ <p></p><pre class="brush:php;toolbar:false">usernames = users.map(getName);
console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

Filter

在沒有高階函數的世界中，我們仍然需要循環來重新實作  

filter 的函數。

startsWithB = (string) => string
  .toLowerCase()
  .startsWith('b');
namesStartingWithB = [];
for (let i = 0; i 或我們可以這樣做！ <p></p><pre class="brush:php;toolbar:false">namesStartingWithB = users
  .filter((user) => startsWithB(user.name));
console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

Reduce

是的，reduce......沒有更高階的功能，實現不了那麼多很酷的東西!!

以上是JavaScript高階函數的詳細介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！