JavaScript常見(jiàn)函數(shù)類(lèi)型和用途實(shí)現(xiàn)場(chǎng)景分析

更新時(shí)間：2024年12月17日 11:13:35 作者：Amo?6729

在JavaScript中,除了惰性函數(shù)和防抖函數(shù)外,還有許多其他有用的函數(shù)模式和功能函數(shù),以下是一些常見(jiàn)的函數(shù)類(lèi)型和用途,感興趣的朋友一起看看吧

1. 節(jié)流函數(shù) (Throttle)
2. 柯里化函數(shù) (Currying)
3. 記憶化函數(shù) (Memoization)
4. 高階函數(shù) (Higher-Order Functions)
5. 單例模式函數(shù) (Singleton)
6. 偏函數(shù) (Partial Function)
7. 自執(zhí)行函數(shù) (IIFE)
8. 工廠函數(shù) (Factory Function)
9. 遞歸函數(shù)
10. 管道函數(shù) (Pipeline Function)
11. 遞歸尾調(diào)用優(yōu)化函數(shù) (Tail Call Optimization)
12. 偏應(yīng)用函數(shù) (Arity Reduction)
13. 生成器函數(shù) (Generator Function)
14. 異步函數(shù) (Async Function)
15. 中間件函數(shù) (Middleware Function)
16. 動(dòng)態(tài)函數(shù) (Dynamic Function)
17. 鏈?zhǔn)秸{(diào)用函數(shù) (Chaining)
18. 觀察者模式函數(shù) (Observer)
19. 策略模式函數(shù) (Strategy)
20. 代理模式函數(shù) (Proxy)

在 JavaScript 中，除了惰性函數(shù)和防抖函數(shù)外，還有許多其他有用的函數(shù)模式和功能函數(shù)。以下是一些常見(jiàn)的函數(shù)類(lèi)型和用途：

1. 節(jié)流函數(shù) (Throttle)

作用： 控制函數(shù)執(zhí)行的頻率，在一定時(shí)間間隔內(nèi)只執(zhí)行一次，即使事件被頻繁觸發(fā)。

實(shí)現(xiàn)：

function throttle(func, delay) {
    let lastTime = 0;
    return function (...args) {
        const now = Date.now();
        if (now - lastTime >= delay) {
            lastTime = now;
            func.apply(this, args);
        }
    };
}

應(yīng)用場(chǎng)景：

滾動(dòng)事件監(jiān)聽(tīng) (scroll)
瀏覽器窗口大小調(diào)整 (resize)

2. 柯里化函數(shù) (Currying)

作用： 將一個(gè)接受多個(gè)參數(shù)的函數(shù)轉(zhuǎn)換為一系列只接受一個(gè)參數(shù)的函數(shù)。

實(shí)現(xiàn)：

function curry(func) {
    return function curried(...args) {
        if (args.length >= func.length) {
            return func.apply(this, args);
        } else {
            return function (...nextArgs) {
                return curried.apply(this, args.concat(nextArgs));
            };
        }
    };
}
// 示例
function add(a, b, c) {
    return a + b + c;
}
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6

應(yīng)用場(chǎng)景：

參數(shù)復(fù)用
提高代碼可讀性

3. 記憶化函數(shù) (Memoization)

作用： 緩存函數(shù)的計(jì)算結(jié)果，避免重復(fù)計(jì)算，提高性能。

實(shí)現(xiàn)：

function memoize(func) {
    const cache = new Map();
    return function (...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            return cache.get(key);
        }
        const result = func.apply(this, args);
        cache.set(key, result);
        return result;
    };
}
// 示例
function slowFunction(num) {
    console.log("Calculating...");
    return num * 2;
}
const memoizedFunction = memoize(slowFunction);
console.log(memoizedFunction(5)); // Calculating... 10
console.log(memoizedFunction(5)); // 10 (從緩存中獲取)

應(yīng)用場(chǎng)景：

動(dòng)態(tài)規(guī)劃
遞歸計(jì)算（如斐波那契數(shù)列）

4. 高階函數(shù) (Higher-Order Functions)

作用： 接受函數(shù)作為參數(shù)，或返回另一個(gè)函數(shù)。

示例：

function higherOrderFunction(callback) {
    return function (...args) {
        console.log("Before callback");
        const result = callback(...args);
        console.log("After callback");
        return result;
    };
}
// 示例
const wrappedFunction = higherOrderFunction((x, y) => x + y);
console.log(wrappedFunction(3, 4));

應(yīng)用場(chǎng)景：

函數(shù)式編程
中間件設(shè)計(jì)

5. 單例模式函數(shù) (Singleton)

作用： 確保一個(gè)類(lèi)或函數(shù)只實(shí)例化一次。

實(shí)現(xiàn)：

function Singleton() {
    let instance;
    return function () {
        if (!instance) {
            instance = { name: "Singleton Instance" };
        }
        return instance;
    };
}
const getInstance = Singleton();
console.log(getInstance() === getInstance()); // true

應(yīng)用場(chǎng)景：

全局狀態(tài)管理
配置管理

6. 偏函數(shù) (Partial Function)

作用： 固定函數(shù)的一部分參數(shù)，返回一個(gè)新的函數(shù)。

實(shí)現(xiàn)：

function partial(func, ...fixedArgs) {
    return function (...remainingArgs) {
        return func.apply(this, [...fixedArgs, ...remainingArgs]);
    };
}
// 示例
function multiply(a, b, c) {
    return a * b * c;
}
const partialMultiply = partial(multiply, 2);
console.log(partialMultiply(3, 4)); // 24

應(yīng)用場(chǎng)景：

參數(shù)預(yù)設(shè)
簡(jiǎn)化函數(shù)調(diào)用

7. 自執(zhí)行函數(shù) (IIFE)

作用： 定義后立即執(zhí)行，避免變量污染。

示例：

(function () {
    const a = 10;
    console.log("IIFE executed:", a);
})();

應(yīng)用場(chǎng)景：

模塊化開(kāi)發(fā)
立即初始化代碼

8. 工廠函數(shù) (Factory Function)

作用： 動(dòng)態(tài)創(chuàng)建對(duì)象或函數(shù)實(shí)例。

示例：

function createPerson(name, age) {
    return {
        name,
        age,
        greet() {
            console.log(`Hi, my name is ${name}`);
        }
    };
}
const person = createPerson("Alice", 25);
person.greet();

應(yīng)用場(chǎng)景：

動(dòng)態(tài)對(duì)象創(chuàng)建
替代類(lèi)構(gòu)造函數(shù)

9. 遞歸函數(shù)

作用： 函數(shù)調(diào)用自身，用于解決分治問(wèn)題或重復(fù)性任務(wù)。

示例：

function factorial(n) {
    if (n === 1) return 1;
    return n * factorial(n - 1);
}
console.log(factorial(5)); // 120

應(yīng)用場(chǎng)景：

樹(shù)結(jié)構(gòu)遍歷遞歸算法（如歸并排序）

10. 管道函數(shù) (Pipeline Function)

作用： 將函數(shù)按順序組合執(zhí)行，類(lèi)似于管道。

實(shí)現(xiàn)：

function pipe(...funcs) {
    return function (value) {
        return funcs.reduce((acc, func) => func(acc), value);
    };
}
// 示例
const add = (x) => x + 2;
const multiply = (x) => x * 3;
const pipedFunction = pipe(add, multiply);
console.log(pipedFunction(5)); // 21

應(yīng)用場(chǎng)景：

函數(shù)式編程
數(shù)據(jù)流處理

11. 遞歸尾調(diào)用優(yōu)化函數(shù) (Tail Call Optimization)

作用： 在遞歸函數(shù)中，將最后一個(gè)操作是函數(shù)調(diào)用的場(chǎng)景優(yōu)化，減少棧的使用。

示例：

function factorial(n, total = 1) {
    if (n === 1) return total;
    return factorial(n - 1, n * total); // 尾調(diào)用
}
console.log(factorial(5)); // 120

應(yīng)用場(chǎng)景：

深度遞歸場(chǎng)景（如處理樹(shù)形結(jié)構(gòu)）

12. 偏應(yīng)用函數(shù) (Arity Reduction)

作用： 減少函數(shù)參數(shù)的復(fù)雜性，通過(guò)固定某些參數(shù)返回一個(gè)新函數(shù)。

示例：

function partialRight(func, ...fixedArgs) {
    return function (...args) {
        return func(...args, ...fixedArgs);
    };
}
// 示例
function greet(greeting, name) {
    return `${greeting}, ${name}`;
}
const sayHelloTo = partialRight(greet, "Hello");
console.log(sayHelloTo("Alice")); // "Hello, Alice"

13. 生成器函數(shù) (Generator Function)

作用： 用于生成一系列值，每次調(diào)用時(shí)返回一個(gè)新值，適合處理流式數(shù)據(jù)。

示例：

function* generatorFunction() {
    yield 1;
    yield 2;
    yield 3;
}
const gen = generatorFunction();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

應(yīng)用場(chǎng)景：

異步流處理
數(shù)據(jù)生成器

14. 異步函數(shù) (Async Function)

作用： 通過(guò) async 和 await 關(guān)鍵字處理異步操作，簡(jiǎn)化回調(diào)地獄。

示例：

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}
fetchData();

應(yīng)用場(chǎng)景：

異步操作（如網(wǎng)絡(luò)請(qǐng)求、文件讀?。?/li>

15. 中間件函數(shù) (Middleware Function)

作用： 按順序執(zhí)行一系列函數(shù)，可以動(dòng)態(tài)添加功能。

示例：

function middlewarePipeline(context, middlewares) {
    const executeMiddleware = (index) => {
        if (index < middlewares.length) {
            middlewares[index](context, () => executeMiddleware(index + 1));
        }
    };
    executeMiddleware(0);
}
// 示例
const middlewares = [
    (ctx, next) => { console.log('Middleware 1'); next(); },
    (ctx, next) => { console.log('Middleware 2'); next(); },
    (ctx, next) => { console.log('Middleware 3'); }
];
middlewarePipeline({}, middlewares);
// 輸出:
// Middleware 1
// Middleware 2
// Middleware 3

應(yīng)用場(chǎng)景：

Web 框架（如 Express、Koa）

16. 動(dòng)態(tài)函數(shù) (Dynamic Function)

作用： 使用 new Function 動(dòng)態(tài)創(chuàng)建函數(shù)。

示例：

const dynamicFunc = new Function('a', 'b', 'return a + b');
console.log(dynamicFunc(2, 3)); // 5

應(yīng)用場(chǎng)景：

動(dòng)態(tài)代碼生成
模板引擎

17. 鏈?zhǔn)秸{(diào)用函數(shù) (Chaining)

作用： 返回 this，允許多次調(diào)用。

示例：

class Chain {
    constructor(value) {
        this.value = value;
    }
    add(num) {
        this.value += num;
        return this;
    }
    multiply(num) {
        this.value *= num;
        return this;
    }
    print() {
        console.log(this.value);
        return this;
    }
}
const chain = new Chain(1);
chain.add(2).multiply(3).print(); // 9

應(yīng)用場(chǎng)景：

API 設(shè)計(jì)（如 jQuery）

18. 觀察者模式函數(shù) (Observer)

作用： 用于監(jiān)聽(tīng)對(duì)象狀態(tài)的變化并執(zhí)行回調(diào)。

示例：

class Observable {
    constructor() {
        this.subscribers = [];
    }
    subscribe(callback) {
        this.subscribers.push(callback);
    }
    notify(data) {
        this.subscribers.forEach(callback => callback(data));
    }
}
// 示例
const observable = new Observable();
observable.subscribe(data => console.log('Subscriber 1:', data));
observable.subscribe(data => console.log('Subscriber 2:', data));
observable.notify('Hello, Observers!');
// 輸出:
// Subscriber 1: Hello, Observers!
// Subscriber 2: Hello, Observers!

應(yīng)用場(chǎng)景：

狀態(tài)管理（如 Redux、Vuex）

19. 策略模式函數(shù) (Strategy)

作用： 根據(jù)不同的策略執(zhí)行不同的邏輯。

示例：

const strategies = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b
};
function executeStrategy(strategy, a, b) {
    return strategies[strategy](a, b);
}
console.log(executeStrategy('add', 3, 2)); // 5
console.log(executeStrategy('multiply', 3, 2)); // 6

應(yīng)用場(chǎng)景：

動(dòng)態(tài)行為切換
復(fù)雜邏輯分離

20. 代理模式函數(shù) (Proxy)

作用： 使用 Proxy 攔截對(duì)象的操作，添加額外邏輯。

示例：

const handler = {
    get(target, property) {
        console.log(`Getting ${property}`);
        return target[property];
    },
    set(target, property, value) {
        console.log(`Setting ${property} to ${value}`);
        target[property] = value;
    }
};
const obj = new Proxy({}, handler);
obj.a = 10; // Setting a to 10
console.log(obj.a); // Getting a -> 10

應(yīng)用場(chǎng)景：

數(shù)據(jù)綁定
權(quán)限控制

到此這篇關(guān)于JavaScript常見(jiàn)函數(shù)類(lèi)型和用途的文章就介紹到這了,更多相關(guān)js 常見(jiàn)函數(shù)類(lèi)型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: