JavaScript - 函數式程式設計有什麼大不了的？-js教程-PHP中文網

JavaScript 是一種支援多種程式設計範例的通用語言。了解這些範例可以幫助開發人員選擇解決不同問題的最佳方法。主要的程式範例包括：

命令式：專注於如何執行任務（一步一步）。
過程式：類似命令式，但具有可重複使用的過程。
物件導向：將程式碼組織成可重複使用的物件。
聲明式：專注於程式應該完成的任務。
函數式：將計算視為數學函數（我們今天的星星！）。

在本文中，我們將探索 JavaScript 中的函數式編程，這是一種強調純函數、高階函數和不變性的強大範例。

1. 純函數

純函數是一種輸出值僅由其輸入值決定的函數，沒有可觀察到的副作用。

確定性：對於相同的輸入，函數總是產生相同的輸出。
無副作用：此函數不會修改任何外部狀態（例如全域變數、輸入參數）。

範例：

// Pure function
function add(a, b) {
  return a + b;
}

// Impure function
let count = 0;
function increment() {
  count += 1;
  return count;
}

登入後複製

在上面的範例中，add 是一個純函數，因為它對於相同的輸入總是會傳回相同的結果，並且不會修改任何外部狀態。相反，increment是一個不純函數，因為它修改了外部變數count。

2. 高階函數

高階函數是一個可以將其他函數作為參數和/或傳回函數作為結果的函數。

函數作為參數：可以接受函數作為輸入參數。
函數作為回傳值：可以傳回函數作為輸出。

範例：

// Higher-order function
function applyOperation(a, b, operation) {
  return operation(a, b);
}

// Function to be used as an argument
function multiply(x, y) {
  return x * y;
}

// Using the higher-order function
const result = applyOperation(5, 3, multiply); // Output: 15

登入後複製

在此範例中，applyOperation 是一個高階函數，因為它採用函數（操作）作為參數。

3. 不變性

不變性是指資料一旦建立就無法改變的概念。不是修改現有的資料結構，而是建立新的資料結構。

無突變：資料結構在建立後不會改變。
複製和修改：操作建立具有所需變更的新資料結構。

範例：

// Mutable object
let user = { name: 'Alice', age: 25 };
user.age = 26; // Mutation

// Immutable object using Object.assign
const newUser = Object.assign({}, user, { age: 26 });
console.log(newUser); // Output: { name: 'Alice', age: 26 }

登入後複製

在此範例中，我們沒有直接修改使用者對象，而是使用更新後的年齡建立了一個新物件 newUser。

函數式程式設計有什麼大不了的？

JavaScript - What

現在，想像一下您正在寫一些程式碼（請耐心等待，我們將在這裡進行完整的比喻）。命令式程式設計就像做一頓飯，給出一步一步的指令：「切洋蔥，然後炒它們，然後添加大蒜...」另一方面，函數式程式設計就像擁有一個專業廚師團隊，每一個都完善了菜餚的一部分。你只需告訴他們你想要什麼，瞧！烹飪魔法發生了。

是否曾經感覺你的程式碼是一團混亂的 for 迴圈和 if 語句？好吧，請繫好安全帶，因為我們即將踏上 JavaScript 函數式程式設計 (FP) 世界的神奇之旅。這就像將您的義大利麵代碼變成一頓美食！ ➡️？

讓我們透過一些美味的程式碼範例來看看這個廚房魔法的實際效果！

為了了解函數式程式設計的好處，讓我們將其與更傳統的命令式風格進行比較：

陣列轉換：開胃菜

命令式（老式廚房）：

const veggies = ['carrot', 'broccoli', 'cauliflower'];
const cookedVeggies = [];
for (let i = 0; i < veggies.length; i++) {
    cookedVeggies.push(`cooked ${veggies[i]}`);
}

登入後複製

功能風格（現代廚房）：

const veggies = ['carrot', 'broccoli', 'cauliflower'];
const cookedVeggies = veggies.map(veggie => `cooked ${veggie}`);

登入後複製

看看我們如何將笨重的 for 迴圈變成流暢的單行程式碼？這就是 FP 的美妙之處——就像有一個副主廚（地圖）為你做所有重複的工作！

煎餅堆疊逆轉：翻轉早餐塔

想像一下，您是一名煎餅藝術家，您剛剛製作了一堆高聳的煎餅，每個煎餅上都寫著字母。現在您想要翻轉整個堆疊以從下到上讀取訊息。讓我們看看如何使用程式碼來做到這一點！

命令式（老式煎餅腳蹼）：

function flipPancakeStack(stack) {
    let flippedStack = '';
    for (let i = stack.length - 1; i >= 0; i--) {
        flippedStack += stack[i];
    }
    return flippedStack;
}

const originalStack = "PANCAKE";
const flippedStack = flipPancakeStack(originalStack);
console.log(flippedStack); // "EKACNAP"

登入後複製

在這種方法中，我們手動將每個煎餅從頂部到底部逐個翻轉。它確實有效，但是有點費力，不是嗎？想像一下這樣翻轉一大堆！

功能型（滑順的煎餅機）：

const flipPancakeStack = str => 
    str.split('').reduce((reversed, char) => char + reversed, '');

const originalStack = "PANCAKE";
const flippedStack = flipPancakeStack(originalStack);
console.log(flippedStack); // "EKACNAP"

登入後複製

Wow! Look at that smooth operator! ? We've turned our string into an array of characters, then used the reduce function to flip our pancake in one sweeping motion. Here's what's happening:

split('') turns our string into an array of characters.
reduce goes through each character, adding it to the front of our accumulating result.
We start with an empty string '' and build it up, character by character.

It's like having a fancy pancake-flipping robot that assembles the pancake in reverse as it goes along. No manual flipping required!

The Beauty of Functional Flipping

Notice how our functional approach doesn't use any loops or temporary variables. It's a single expression that flows from left to right. This makes it:

More readable: Once you're used to reduce, this reads almost like English.
Immutable: We're not changing any existing data, just creating new strings.
Shorter: We've reduced our function to a single, powerful line.

Remember, in the kitchen of code, it's not just about getting the job done – it's about style, efficiency, and leaving a clean workspace. Our functional pancake flipper does all three!

Main Course: Curry Transformation Feast

Now, let's spice things up with some Indian cuisine! Imagine we're running a bustling Indian restaurant, and we need to transform our thali menu. We want to adjust spice levels, filter out dishes based on dietary preferences, and format the names for our trendy menu board.

Imperative Style (The frazzled curry chef):

const thaliMenu = [
    { name: 'Butter Chicken', spiceLevel: 2, vegetarian: false, available: true },
    { name: 'Palak Paneer', spiceLevel: 1, vegetarian: true, available: true },
    { name: 'Lamb Vindaloo', spiceLevel: 4, vegetarian: false, available: false },
    { name: 'Dal Makhani', spiceLevel: 1, vegetarian: true, available: true },
    { name: 'Chicken Tikka Masala', spiceLevel: 3, vegetarian: false, available: true }
];

const veggieSpicyMenu = [];
for (let i = 0; i < thaliMenu.length; i++) {
    if (thaliMenu[i].vegetarian && thaliMenu[i].available) {
        let dish = {
            name: thaliMenu[i].name.toUpperCase().replace(/ /g, '_'),
            spiceLevel: thaliMenu[i].spiceLevel + 1
        };
        if (dish.spiceLevel > 5) dish.spiceLevel = 5;
        veggieSpicyMenu.push(dish);
    }
}

登入後複製

Functional Style (The Michelin-star tandoor master):

const thaliMenu = [
    { name: 'Butter Chicken', spiceLevel: 2, vegetarian: false, available: true },
    { name: 'Palak Paneer', spiceLevel: 1, vegetarian: true, available: true },
    { name: 'Lamb Vindaloo', spiceLevel: 4, vegetarian: false, available: false },
    { name: 'Dal Makhani', spiceLevel: 1, vegetarian: true, available: true },
    { name: 'Chicken Tikka Masala', spiceLevel: 3, vegetarian: false, available: true }
];

const veggieSpicyMenu = thaliMenu
    .filter(dish => dish.vegetarian && dish.available)
    .map(dish => ({
        name: dish.name.toUpperCase().replace(/ /g, '_'),
        spiceLevel: Math.min(dish.spiceLevel + 1, 5)
    }));

登入後複製

?✨ We've just transformed our thali menu with the grace of a yoga master. The functional approach reads like a recipe from a classic Indian cookbook: "Filter the vegetarian and available dishes, then map them to new objects with formatted names and increased spice levels." It's a recipe for code that's as aromatic and delightful as the dishes it describes!

Dessert: Async Chai Brewing Symphony

For our final course, let's steep ourselves in the art of asynchronous chai brewing. Imagine we're creating a smart chai maker that needs to check tea leaves, heat water, and blend spices, all in perfect harmony.

Imperative Style (The flustered chai wallah):

function brewChai(teaType, callback) {
    checkTeaLeaves(teaType)
        .then(leaves => {
            if (leaves.quality === 'good') {
                heatWater(leaves.requiredTemperature)
                    .then(water => {
                        blendSpices(teaType)
                            .then(spices => {
                                const chai = mixChaiIngredients(leaves, water, spices);
                                callback(null, chai);
                            })
                            .catch(error => callback(error));
                    })
                    .catch(error => callback(error));
            } else {
                callback(new Error('Tea leaves are not of good quality'));
            }
        })
        .catch(error => callback(error));
}

登入後複製

Functional Style (The serene chai master):

const brewChai = teaType =>
    checkTeaLeaves(teaType)
        .then(leaves => 
            leaves.quality === 'good'
                ? Promise.all([
                    Promise.resolve(leaves),
                    heatWater(leaves.requiredTemperature),
                    blendSpices(teaType)
                  ])
                : Promise.reject(new Error('Tea leaves are not of good quality'))
        )
        .then(([leaves, water, spices]) => mixChaiIngredients(leaves, water, spices));

登入後複製

Wah, what a beautiful symphony! ?? We've just orchestrated a complex chai brewing process into a smooth, promise-based operation. It's like watching a graceful kathak dance – each step flows seamlessly into the next, creating a perfect blend of flavors and aromas.

The Secret Masala: Why FP is the Chef's Kiss ?‍??

Readability: FP code often reads like a story. "Filter this, map that, reduce those." It's like writing a recipe for your future self (or your poor colleague who has to maintain your code).
Predictability: Pure functions always return the same output for a given input. No surprises, no "it worked on my machine" mysteries.
Testability: Since FP emphasizes pure functions, testing becomes a breeze. It's like being able to taste each ingredient separately before combining them.
Conciseness: As we've seen, FP can often express complex operations in just a few lines. Less code means fewer bugs and easier maintenance.
Composition: You can combine simple functions to create complex behaviors, like stacking Lego bricks to build a castle. ?

Wrapping Up Our Functional Feast

There you have it, folks! We've transformed our code from a fast-food joint to a Michelin-star restaurant. Functional programming in JavaScript isn't just about writing less code; it's about writing code that's easier to understand, test, and maintain.

Remember, you don't have to go full Gordon Ramsay and remake your entire codebase overnight. Start small – try using map instead of a for-loop, or break a complex function into smaller, pure functions. Before you know it, you'll be whipping up functional programming delicacies that would make any code chef proud!

Now, go forth and func-tionalize! May your code be pure, your functions be high-order, and your bugs be few.

Happy coding, and may the func be with you! ??
JavaScript - What