JavaScript常見函數(shù)類型和用途實(shí)現(xiàn)場(chǎng)景分析
在 JavaScript 中，除了惰性函數(shù)和防抖函數(shù)外，還有許多其他有用的函數(shù)模式和功能函數(shù)。以下是一些常見的函數(shù)類型和用途：
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)聽 (
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è)類或函數(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)景：
- 模塊化開發(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)建
- 替代類構(gòu)造函數(shù)
9. 遞歸函數(shù)
作用： 函數(shù)調(diào)用自身，用于解決分治問題或重復(fù)性任務(wù)。
示例：
function factorial(n) {
if (n === 1) return 1;
return n * factorial(n - 1);
}
console.log(factorial(5)); // 120應(yīng)用場(chǎng)景：
樹結(jié)構(gòu)遍歷遞歸算法（如歸并排序）
10. 管道函數(shù) (Pipeline Function)
作用： 將函數(shù)按順序組合執(zhí)行，類似于管道。
實(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)景（如處理樹形結(jié)構(gòu)）
12. 偏應(yīng)用函數(shù) (Arity Reduction)
作用： 減少函數(shù)參數(shù)的復(fù)雜性，通過固定某些參數(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)
作用： 通過 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)聽對(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常見函數(shù)類型和用途的文章就介紹到這了,更多相關(guān)js 常見函數(shù)類型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS實(shí)現(xiàn)直接運(yùn)行html代碼的方法
這篇文章主要介紹了JS實(shí)現(xiàn)直接運(yùn)行html代碼的方法,涉及javascript窗口操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了頁面裝載js及性能分析方法,需要的朋友可以參考下2014-03-03
關(guān)于Javascript 對(duì)象(object)的prototype
Javascript中的每個(gè)對(duì)象(object)都會(huì)有 prototype，下面為大家介紹下其具體的應(yīng)用2014-05-05
如何用Driver.js輕松打造完美頁面引導(dǎo)體驗(yàn)
Driver.js是一個(gè)頁面引導(dǎo)插件,封裝完美,只需引入實(shí)例化、綁定類名即可實(shí)現(xiàn)頁面引導(dǎo),這篇文章主要介紹了如何用Driver.js輕松打造完美頁面引導(dǎo)體驗(yàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-08-08
JS實(shí)現(xiàn)星星評(píng)分功能實(shí)例代碼(兩種方法)
這篇文章主要介紹了JS實(shí)現(xiàn)星星評(píng)分功能實(shí)例代碼(兩種方法)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
用RadioButten或CheckBox實(shí)現(xiàn)div的顯示與隱藏
用RadioButten（或CheckBox）實(shí)現(xiàn)div的顯示與隱藏，當(dāng)選擇“女”時(shí)，顯示“美女、才女”；當(dāng)選擇“男”時(shí)隱藏，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-09-09
微信小程序前后端數(shù)據(jù)交互的詳細(xì)圖文教程
這篇文章主要給大家介紹了關(guān)于微信小程序前后端數(shù)據(jù)交互的相關(guān)資料,通過小程序向后端發(fā)送請(qǐng)求,然后后端從數(shù)據(jù)庫獲取車源和求購的數(shù)量反饋給小程序,最后將這兩個(gè)數(shù)據(jù)顯示出來,需要的朋友可以參考下2022-10-10
解決javascript:window.close()在chrome,Firefox下失效的問題
本篇文章是對(duì)javascript:window.close()在chrome,Firefox下失效問題的解決方法進(jìn)行了分析介紹。需要的朋友參考下2013-05-05
javascript 產(chǎn)生隨機(jī)數(shù)的幾種方法總結(jié)
這篇文章主要介紹了javascript 產(chǎn)生隨機(jī)數(shù)的幾種方法總結(jié)的相關(guān)資料,希望通過本文大家能夠掌握如何實(shí)現(xiàn)這樣的方法，需要的朋友可以參考下2017-09-09
BootStrap模態(tài)框和select2合用時(shí)input無法獲取焦點(diǎn)的解決方法
在bootstrap的模態(tài)框里使用select2插件,會(huì)導(dǎo)致select2里的input輸入框沒有辦法獲得焦點(diǎn),沒有辦法輸入。怎么解決這個(gè)問題呢？下面小編給大家?guī)砹薆ootStrap模態(tài)框和select2合用時(shí)input無法獲取焦點(diǎn)的解決方法，一起看看吧2017-09-09