高階函式

老毛發表於2022-05-02
函式
把一個函式作為引數，或者把一個函式作為返回值，這樣的結構成為”高階函式“。

JavaScript的引數

值型別的引數

function plusFive(number) {
  return number + 5;  
};
plusFive(3); // 8

回撥函式型別引數

在JavaScript中function可以當做引數傳入function中：

const isEven = (n) => {
  return n % 2 == 0;
}

const isEven = (n) => {
  return n % 2 == 0;
}
 
let printMsg = (evenFunc, num) => {
  const isNumEven = evenFunc(num);
  console.log(`The number ${num} is an even number: ${isNumEven}.`)
}
 
// Pass in isEven as the callback function
printMsg(isEven, 4); 
// Prints: The number 4 is an even number: True.

高階函式（Higher-Order Functions）

當一個function被當做引數傳入一個函式，或者被當做函式的返回，這種結構就被稱為高階函式。

.reduce()

reduce 函式迭代一個陣列，返回一個累加的值。

const arrayOfNumbers = [1, 2, 3, 4];
 
const sum = arrayOfNumbers.reduce((accumulator, currentValue) => {  
  return accumulator + currentValue;
});
 
console.log(sum); // 10

.forEach()

forEach 函式傳入一個函式，按照陣列元素的順序遍歷每一個元素。


const numbers = [28, 77, 45, 99, 27];
 
numbers.forEach(number => {  
  console.log(number);
});

.filter()

filter 函式按陣列元素順序遍歷每個元素，回撥函式需要返回一個布林值，函式最終返回值為陣列。


const randomNumbers = [4, 11, 42, 14, 39];
const filteredArray = randomNumbers.filter(n => {  
  return n > 5;
});

.map()

map 函式按陣列元素順序遍歷每個元素，根據回撥函式的邏輯返回一個新的陣列。

const finalParticipants = ['Taylor', 'Donald', 'Don', 'Natasha', 'Bobby'];
 
// add string after each final participant
const announcements = finalParticipants.map(member => {
  return member + ' joined the contest.';
})
 
console.log(announcements);

相關文章