JavaScript常見函數(shù)類型和用途實(shí)現(xiàn)場(chǎng)景分析
更新時(shí)間：2024年12月17日 11:13:35 作者：Amo?6729
在JavaScript中,除了惰性函數(shù)和防抖函數(shù)外,還有許多其他有用的函數(shù)模式和功能函數(shù),以下是一些常見的函數(shù)類型和用途,感興趣的朋友一起看看吧
在 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)文章
在網(wǎng)上搜索了下關(guān)于性能優(yōu)化方面的內(nèi)容，現(xiàn)簡(jiǎn)單整理可供大家在優(yōu)化過程中使用，感興趣的額朋友可以了解下2013-08-08
uniapp中全局頁(yè)面掛載組件實(shí)戰(zhàn)過程(小程序)
這篇文章主要給大家介紹了關(guān)于uniapp中全局頁(yè)面掛載組件(小程序)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用uniapp具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12
瀏覽器JavaScript調(diào)試功能無(wú)法使用解決方案
這篇文章主要介紹了瀏覽器JavaScript調(diào)試功能無(wú)法使用解決方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
JavaScript使用Web Worker解析CSV文件的操作方法
在處理大型 CSV 文件時(shí),直接在主線程中解析可能會(huì)導(dǎo)致頁(yè)面卡頓,影響用戶體驗(yàn),使用 Web Worker 可以將計(jì)算密集型任務(wù)移到后臺(tái)線程,避免阻塞主線程,從而提升應(yīng)用的響應(yīng)速度,所以本文給大家介紹了JavaScript使用Web Worker解析CSV文件的操作方法,需要的朋友可以參考下2025-03-03
javascript XML數(shù)據(jù)顯示為HTML一例
通過Javascript把xml轉(zhuǎn)換成html格式輸出一列2008-12-12
js實(shí)現(xiàn)瀑布流觸底動(dòng)態(tài)加載數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)瀑布流觸底動(dòng)態(tài)加載數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
前端無(wú)感刷新token的實(shí)現(xiàn)步驟
這篇文章主要給大家介紹了關(guān)于前端無(wú)感刷新token的實(shí)現(xiàn)步驟,Axios無(wú)感知刷新令牌技術(shù)通過設(shè)置請(qǐng)求攔截器和刷新邏輯,確保API請(qǐng)求不會(huì)因令牌過期而中斷,使用訪問令牌和刷新令牌實(shí)現(xiàn)自動(dòng)刷新,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了微信小程序 css使用技巧總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-01-01
本文給大家分享的是如何解決獲取JavaScript異步函數(shù)返回值的經(jīng)歷及最后的解決方法，有需要的小伙伴可以參考下2016-12-12
這篇文章主要介紹了詳解微信小程序中的頁(yè)面代碼中的模板的封裝的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10