Les fonctions d'ordre supérieur dans JavaScript sont des fonctions qui peuvent prendre d'autres fonctions comme des arguments ou des fonctions de retour comme résultats. Ce concept est une pierre angulaire de la programmation fonctionnelle et est prise en charge en JavaScript en raison de sa nature en tant que langage de fonction de première classe. Les fonctions d'ordre supérieur permettent aux développeurs d'écrire un code plus abstrait, concis et réutilisable en encapsulant des modèles et des comportements communs dans des fonctions réutilisables.
Pour illustrer, considérons un exemple simple d'une fonction d'ordre supérieur qui prend une fonction comme un argument:
<code class="javascript">function applyOperation(operation, num1, num2) { return operation(num1, num2); } let add = function(a, b) { return ab; }; let multiply = function(a, b) { return a * b; }; console.log(applyOperation(add, 5, 3)); // Output: 8 console.log(applyOperation(multiply, 5, 3)); // Output: 15</code>
Dans cet exemple, applyOperation
est une fonction d'ordre supérieur car elle prend une fonction ( operation
) comme argument. En faisant passer différentes fonctions ( add
ou multiply
), nous pouvons appliquer différentes opérations sur les nombres sans réécrire la structure de la fonction, améliorer la concision du code et la réutilisabilité.
Il existe plusieurs fonctions d'ordre supérieur intégrées dans JavaScript qui sont largement utilisées pour améliorer la lisibilité du code. Certains des plus courants comprennent:
Méthodes de tableau comme map
, filter
et reduce
:
map
transforme chaque élément d'un tableau à l'aide d'une fonction fournie.filter
crée un nouveau tableau avec des éléments qui passent un test implémenté par une fonction fournie.reduce
s'applique une fonction contre un accumulateur et chaque élément du tableau (de gauche à droite) pour le réduire à une seule valeur.<code class="javascript">let numbers = [1, 2, 3, 4]; let doubledNumbers = numbers.map(x => x * 2); // [2, 4, 6, 8] let evenNumbers = numbers.filter(x => x % 2 === 0); // [2, 4] let sum = numbers.reduce((acc, curr) => acc curr, 0); // 10</code>
setTimeout et setInterval:
Ces fonctions prennent une fonction comme un argument et l'exécutent après un délai spécifié ou à des intervalles spécifiés, respectivement.
<code class="javascript">setTimeout(() => console.log("Hello after 1 second"), 1000); let intervalId = setInterval(() => console.log("This runs every 2 seconds"), 2000);</code>
Composition de la fonction:
Combinant plusieurs fonctions dans une nouvelle fonction, généralement utilisée dans des bibliothèques comme Lodash ou dans les implémentations personnalisées.
<code class="javascript">const compose = (f, g) => x => f(g(x)); const addOne = x => x 1; const square = x => x * x; const addOneThenSquare = compose(square, addOne); console.log(addOneThenSquare(2)); // Output: 9</code>
Ces exemples illustrent comment les fonctions d'ordre supérieur peuvent transformer les opérations complexes en blocs de code plus lisibles et maintenables.
Les fonctions d'ordre supérieur améliorent la modularité et la maintenabilité dans les applications JavaScript de plusieurs manières:
Abstraction et encapsulation:
Les fonctions d'ordre supérieur permettent aux développeurs de résumer les opérations ou les algorithmes communs, réduisant la complexité d'autres parties de la base de code. Par exemple, en utilisant une fonction d'ordre supérieur pour gérer les opérations asynchrones, vous pouvez encapsuler la logique de rappel, ce qui rend la fonction principale plus claire et plus facile à entretenir.
<code class="javascript">function handleAsyncOperation(asyncFn, onSuccess, onError) { asyncFn().then(onSuccess).catch(onError); } handleAsyncOperation(fetchUserData, displayUserData, handleError);</code>
L'optimisation des performances des fonctions d'ordre supérieur en JavaScript peut être réalisée grâce à plusieurs techniques:
Mémuisation:
La mémorisation implique la mise en cache des résultats des appels de fonction coûteux et le retour du résultat mis en cache lorsque les mêmes entrées se reproduisent. Cela peut être particulièrement efficace avec des fonctions d'ordre supérieur qui sont à forte intensité de calcul.
<code class="javascript">function memoize(fn) { const cache = new Map(); return function(...args) { const key = JSON.stringify(args); if (cache.has(key)) { return cache.get(key); } const result = fn.apply(this, args); cache.set(key, result); return result; }; } const memoizedFib = memoize(function(n) { if (n </code>
Utilisation des fonctions flèches pour les opérations en ligne:
Les fonctions de flèche peuvent fournir une légère amélioration des performances en raison de leur liaison lexicale et this
syntaxe plus courte, ce qui peut réduire l'utilisation de la mémoire et le temps d'analyse.
<code class="javascript">const numbers = [1, 2, 3, 4, 5]; const squaredNumbers = numbers.map(n => n * n); // Faster than using function(n) { return n * n; }</code>
map
ou filter
, si le résultat n'est pas nécessaire immédiatement, envisagez d'utiliser forEach
si possible pour éviter de créer de nouveaux tableaux inutilement. Curry:
Le curry peut être utilisé pour optimiser les fonctions d'ordre supérieur en créant des fonctions spécialisées qui peuvent être réutilisées avec des arguments partiellement appliqués. Cela peut conduire à de meilleures performances en réduisant le nombre d'arguments de fonction et en améliorant la réutilisation du code.
<code class="javascript">function curry(fn) { return function curried(...args) { if (args.length >= fn.length) { return fn.apply(this, args); } else { return function(...args2) { return curried.apply(this, args.concat(args2)); }; } }; } function add(a, b) { return ab; } const curriedAdd = curry(add); const addFive = curriedAdd(5); console.log(addFive(3)); // Output: 8</code>
En appliquant ces techniques, les développeurs peuvent améliorer considérablement les performances des fonctions d'ordre supérieur dans les applications JavaScript.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!