Maison > interface Web > js tutoriel > le corps du texte

Fonction - Défis JavaScript

DDD
Libérer: 2024-11-02 03:44:30
original
855 Les gens l'ont consulté

Function - JavaScript Challenges

Vous pouvez trouver tout le code dans cet article sur le repo Github.


Défis liés à la fonction


Arguments et paramètres

/**
 * @param {Function} fn
 * @return {number}
 */

function FunctionLength(fn) {
  return fn.length;
}

// Usage example
function myFunction(a, b, c) {
  console.log(a, b, c);
}

console.log(FunctionLength(myFunction)); // => 3

/**
 * @param {...any} args
 * @return {number}
 */

function numOfArguments(...args) {
  // return args.length;
  return arguments.length;
}

// Usage example
console.log(numOfArguments(1, 2, 3, 4, 5)); // => 5
console.log(numOfArguments()); // => 0
Copier après la connexion

Composer

/**
 * @param {...Functions} fns
 * @return Function
 */

function compose(...fns) {
  return function (x) {
    let result = x;

    for (const fn of fns.reverse()) {
      result = fn(result);
    }

    return result;
  };
}

// Usage example
const add1 = (num) => num + 1;
const double = (num) => num * 2;
const subtract10 = (num) => num - 10;

const composedFn = compose(subtract10, double, add1);
console.log(composedFn(3)); // (3 + 1) * 2 - 10 => -2
Copier après la connexion

Curry

/**
 * @param {Function} fn
 * @return {Function}
 */

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }

    return curried.bind(this, ...args);
  };
}

// Usage example
// single parameter case
function add(a, b) {
  return a + b;
}

const curriedAdd = curry(add);
console.log(curriedAdd(3)(4)); // => 7
const alreadyAddedThree = curriedAdd(3);
console.log(alreadyAddedThree(4)); // => 7

// fixed parameters case
function addTwo(a, b) {
  return a + b;
}

const curriedAddTwo = curry(addTwo);
console.log(curriedAddTwo(3, 4)); // => 7
console.log(curriedAddTwo(3)(4)); // => 7
const alreadyAddedThreeB = curriedAdd(3);
console.log(alreadyAddedThreeB(4)); // => 7

//-------------------------------------------

/**
 * @param {Function} fn
 * @return {Function}
 */

function curry(fn) {
  return function curried(...args) {
    const bindFn = curried.bind(this, ...args);
    bindFn[Symbol.toPrimitive] = () => fn.call(this, ...args);

    return bindFn;
  };
}

// Usage example
// non-fixed parameters case
function multiply(...numbers) {
  return numbers.reduce((a, b) => a * b, 1);
}

const curriedMultiply = curry(multiply);
const multiplyByThree = curriedMultiply(3);
console.log(multiplyByThree); // => 3
console.log(multiplyByThree(4)); // => 12

const multiplyByFifteen = multiplyByThree(5);
console.log(multiplyByFifteen); // => 15
console.log(multiplyByFifteen(2)); // => 30

console.log(curriedMultiply(1)(2)(3)(4)); // => 24
console.log(curriedMultiply(1, 2, 3, 4)); // => 24
Copier après la connexion

Note

/**
 * @param {Function} func
 * @return {Function}
 */

function memoize(fn) {
  const cache = new Map();

  return function (arg) {
    if (cache.has(arg)) {
      return cache.get(arg);
    }

    const result = fn.call(this, arg);
    cache.set(arg, result);

    return result;
  };
}

// Usage example
function expensiveFunction(n) {
  console.log("Computing...");
  return n * 2;
}

// Create a memoized version of the function.
const memoizedExpensiveFunction = memoize(expensiveFunction);

// First call (computes and caches the result).
console.log(memoizedExpensiveFunction(5)); // => Computing... 10

// Second call with the same argument (returns the cached result).
console.log(memoizedExpensiveFunction(5)); // => 10

// Third call with a different argument (computes and caches the new result).
console.log(memoizedExpensiveFunction(10)); // => Computing... 20

// Fourth call with the same argument as the third call (returns the cached result).
console.log(memoizedExpensiveFunction(10)); // => 20

// ----------------------------------------
// When parameters could be array
/**
 * @param {Function} fn
 * @return {Function}
 */

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.call(this, ...args);
    cache.set(key, result);

    return result;
  };
}

// Usage example
function expensiveMul(a, b) {
  console.log("Computing...");
  return a * b;
}

// Create a memoized version of the function.
const memoizedExpensiveMul = memoize(expensiveMul);

// First call (computes and caches the result).
console.log(memoizedExpensiveMul(3, 7)); // => Computing... 21

// Second call with the same argument (returns the cached result).
console.log(memoizedExpensiveMul(3, 7)); // => 21

// Third call with a different argument (computes and caches the new result).
console.log(memoizedExpensiveMul(5, 8)); // => Computing... 40

// Fourth call with the same argument as the third call (returns the cached result).
console.log(memoizedExpensiveMul(5, 8)); // => 40
Copier après la connexion

Partiel

/**
 * @param {Function} fn
 * @param {any[]} args
 * @returns {Function}
 */

function partial(fn, ...args) {
  return function (...restArgs) {
    const copyArgs = args.map((arg) => {
      return arg === partial.placeholder ? restArgs.shift() : arg;
    });

    return fn.call(this, ...copyArgs, ...restArgs);
  };
}

partial.placeholder = Symbol();

// Usage example
const func = (...args) => args;
const func123 = partial(func, 1, 2, 3);
console.log(func123(4)); // => [1, 2, 3, 4]
Copier après la connexion

Référence

  • GreatFrontEnd
  • L'objet arguments - MDN
  • Paramètre - MDN
  • Composition des fonctions (informatique) - Wikipedia.org
  • 11. qu'est-ce que la composition ? créer un pipe() - BFE.dev
  • 1. implémenter curry() - BFE.dev
  • 2. implémentez curry() avec la prise en charge des espaces réservés - BFE.dev
  • Curry - Wikipedia.org
  • 14. Implémenter une fonction générale de mémorisation - memo() - BFE.dev
  • 122. implémenter memoizeOne() - BFE.dev
  • Mémoisation - Wikipedia.org
  • Candidature partielle - Wikipedia.org
  • 139. implémenter _.partial() - BFE.dev

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!