我的 React 之旅：第 16 天

函數式程式設計
函數式程式設計著重於使用避免共享狀態、可變資料和副作用的函數。它強調純粹的函數和操作，如映射、過濾和歸約，以實現乾淨、簡潔和可預測的程式碼。

函數式程式設計的核心功能
1.map()

• 使用回呼函數轉換數組中的每個元素並傳回一個新數組。
• 語法：array.map(callback) 例：

正方形和立方體

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

function square(element) {
    return Math.pow(element, 2);
}

function cube(element) {
    return Math.pow(element, 3);
}

const squares = numbers.map(square);
const cubes = numbers.map(cube);

console.log(squares); // [1, 4, 9, 16, 25]
console.log(cubes);   // [1, 8, 27, 64, 125]

格式化日期

const dates = ["2024-1-10", "2025-2-20", "2026-3-30"];

function formatDate(element) {
    const parts = element.split("-");
    return `${parts[1]}/${parts[2]}/${parts[0]}`;
}

const formattedDates = dates.map(formatDate);
console.log(formattedDates); // ['1/10/2024', '2/20/2025', '3/30/2026']

2.filter()

• 透過過濾掉不滿足給定條件的元素（回呼）來建立新數組。
• 語法：array.filter(回呼) 例：

偶數和奇數

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

function isEven(element) {
    return element % 2 === 0;
}

function isOdd(element) {
    return element % 2 !== 0;
}

const evenNums = numbers.filter(isEven);
const oddNums = numbers.filter(isOdd);

console.log(evenNums); // [2, 4, 6]
console.log(oddNums);  // [1, 3, 5, 7]

過濾成人（年齡 >= 18）

const ages = [16, 17, 18, 18, 19, 20, 60];

function isAdult(element) {
    return element >= 18;
}

const adults = ages.filter(isAdult);
console.log(adults); // [18, 18, 19, 20, 60]

3.reduce()

• 透過迭代應用回呼函數將陣列減少為單一值。
• 語法：array.reduce(回呼, 初始值) 例：

價格總和

const prices = [5, 30, 10, 25, 15, 20];

function sum(previous, next) {
    return previous + next;
}

const total = prices.reduce(sum);
console.log(`$${total.toFixed(2)}`); // 5.00

找最高成績

const grades = [75, 50, 90, 80, 65, 95];

function getMax(accumulator, element) {
    return Math.max(accumulator, element);
}

const maximum = grades.reduce(getMax);
console.log(maximum); // 95

倒影
我學到了什麼：

• 如何使用映射轉換數組。
• 使用過濾器依條件過濾數組。
• 使用reduce 將陣列減少為單一值（總和、最大值）。

我喜歡這種成長。

以上是我的 React 之旅：第 16 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！