首页 > 网络编程 > JavaScript > javascript技巧 > js 常见函数类型

JavaScript常见函数类型和用途实现场景分析

2024-12-17 11:12:44 作者：Amo 6729

在JavaScript中,除了惰性函数和防抖函数外,还有许多其他有用的函数模式和功能函数,以下是一些常见的函数类型和用途,感兴趣的朋友一起看看吧

在 JavaScript 中，除了惰性函数和防抖函数外，还有许多其他有用的函数模式和功能函数。以下是一些常见的函数类型和用途：

1. 节流函数 (Throttle)

作用： 控制函数执行的频率，在一定时间间隔内只执行一次，即使事件被频繁触发。

实现：

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

应用场景：

滚动事件监听 (scroll)
浏览器窗口大小调整 (resize)

2. 柯里化函数 (Currying)

作用： 将一个接受多个参数的函数转换为一系列只接受一个参数的函数。

实现：

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

应用场景：

参数复用
提高代码可读性

3. 记忆化函数 (Memoization)

作用： 缓存函数的计算结果，避免重复计算，提高性能。

实现：

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 (从缓存中获取)

应用场景：

动态规划
递归计算（如斐波那契数列）

4. 高阶函数 (Higher-Order Functions)

作用： 接受函数作为参数，或返回另一个函数。

示例：

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));

应用场景：

函数式编程
中间件设计

5. 单例模式函数 (Singleton)

作用： 确保一个类或函数只实例化一次。

实现：

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

应用场景：

全局状态管理
配置管理

6. 偏函数 (Partial Function)

作用： 固定函数的一部分参数，返回一个新的函数。

实现：

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

应用场景：

参数预设
简化函数调用

7. 自执行函数 (IIFE)

作用： 定义后立即执行，避免变量污染。

示例：

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

应用场景：

模块化开发
立即初始化代码

8. 工厂函数 (Factory Function)

作用： 动态创建对象或函数实例。

示例：

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

应用场景：

动态对象创建
替代类构造函数

9. 递归函数

作用： 函数调用自身，用于解决分治问题或重复性任务。

示例：

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

应用场景：

树结构遍历递归算法（如归并排序）

10. 管道函数 (Pipeline Function)

作用： 将函数按顺序组合执行，类似于管道。

实现：

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

应用场景：

函数式编程
数据流处理

11. 递归尾调用优化函数 (Tail Call Optimization)

作用： 在递归函数中，将最后一个操作是函数调用的场景优化，减少栈的使用。

示例：

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

应用场景：

深度递归场景（如处理树形结构）

12. 偏应用函数 (Arity Reduction)

作用： 减少函数参数的复杂性，通过固定某些参数返回一个新函数。

示例：

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. 生成器函数 (Generator Function)

作用： 用于生成一系列值，每次调用时返回一个新值，适合处理流式数据。

示例：

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

应用场景：

异步流处理
数据生成器

14. 异步函数 (Async Function)

作用： 通过 async 和 await 关键字处理异步操作，简化回调地狱。

示例：

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

应用场景：

异步操作（如网络请求、文件读取）

15. 中间件函数 (Middleware Function)

作用： 按顺序执行一系列函数，可以动态添加功能。

示例：

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

应用场景：

Web 框架（如 Express、Koa）

16. 动态函数 (Dynamic Function)

作用： 使用 new Function 动态创建函数。

示例：

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

应用场景：

动态代码生成
模板引擎

17. 链式调用函数 (Chaining)

作用： 返回 this，允许多次调用。

示例：

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

应用场景：

API 设计（如 jQuery）

18. 观察者模式函数 (Observer)

作用： 用于监听对象状态的变化并执行回调。

示例：

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!

应用场景：

状态管理（如 Redux、Vuex）

19. 策略模式函数 (Strategy)

作用： 根据不同的策略执行不同的逻辑。

示例：

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

应用场景：

动态行为切换
复杂逻辑分离

20. 代理模式函数 (Proxy)

作用： 使用 Proxy 拦截对象的操作，添加额外逻辑。

示例：

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

应用场景：

数据绑定
权限控制

到此这篇关于JavaScript常见函数类型和用途的文章就介绍到这了,更多相关js 常见函数类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

JavaScript常见函数类型和用途实现场景分析

1. 节流函数 (Throttle)

2. 柯里化函数 (Currying)

3. 记忆化函数 (Memoization)

4. 高阶函数 (Higher-Order Functions)

5. 单例模式函数 (Singleton)

6. 偏函数 (Partial Function)

7. 自执行函数 (IIFE)

8. 工厂函数 (Factory Function)

9. 递归函数

10. 管道函数 (Pipeline Function)

11. 递归尾调用优化函数 (Tail Call Optimization)

12. 偏应用函数 (Arity Reduction)

13. 生成器函数 (Generator Function)

14. 异步函数 (Async Function)

15. 中间件函数 (Middleware Function)

16. 动态函数 (Dynamic Function)

17. 链式调用函数 (Chaining)

18. 观察者模式函数 (Observer)

19. 策略模式函数 (Strategy)

20. 代理模式函数 (Proxy)

您可能感兴趣的文章: