Heim > Web-Frontend > js-Tutorial > Hauptteil

Abschluss – JavaScript-Herausforderungen

DDD
Freigeben: 2024-11-02 13:16:30
Original
293 Leute haben es durchsucht

Closure - JavaScript Challenges

Sie finden den gesamten Code in diesem Beitrag im Repo Github.


Herausforderungen im Zusammenhang mit Schließungen


Hallo Welt

/**
 * @return {Function}
 */

function createHelloWorld() {
  return function (...args) {
    return "Hello World";
  };
}

// Usage example
const output = createHelloWorld();
console.log(output()); // => "Hello World"
Nach dem Login kopieren

hinzufügen

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

function add(...args) {
  let sum = args.reduce((acc, val) => acc + val, 0);

  function innerAdd(...moreArgs) {
    sum += moreArgs.reduce((acc, val) => acc + val, 0);
    return innerAdd;
  }
  innerAdd.getValue = function () {
    return sum;
  };

  return innerAdd;
}

// Usage example
console.log(add(1).getValue()); // => 1
console.log(add(1)(2).getValue()); // => 3
console.log(add(1)(2)(3).getValue()); // => 6
console.log(add(1)(2, 3).getValue()); // => 6
console.log(add(1, 2)(3).getValue()); // => 6
console.log(add(1, 2, 3).getValue()); // => 6
Nach dem Login kopieren

Summe

/**
 * @param {number} num
 */

function sum(num) {
  const func = function (num2) {
    return num2 ? sum(num + num2) : num;
  };

  func.valueOf = () => num;
  return func;
}

// Usage example
const sum1 = sum(1);
console.log(sum1(2) == 3); // => true
console.log(sum1(3) == 4); // => true
console.log(sum(1)(2)(3) == 6); // => true
console.log(sum(5)(-1)(2) == 6); // => true

Nach dem Login kopieren

Schalter

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

function makeCounter(initialValue = 0) {
  let count = initialValue - 1;

  return function (...args) {
    count += 1;
    return count;
  };
}

// Usage example
const counter = makeCounter(0);
console.log(counter()); // => 0
console.log(counter()); // => 1
console.log(counter()); // => 2

//------------------------------
// return an object
/**
 * @param {number} initialValue
 * @return {{get: Function, increment: Function, decrement: Function, reset: Function }}
 */
function makeCounter(initialValue = 0) {
  let count = initialValue;

  return {
    get: () => count,
    increment: () => ++count,
    decrement: () => --count,
    reset: () => (count = initialValue),
  };
}

// Usage example
const counterObj = makeCounter(0);
console.log(counterObj.get()); // => 0
counterObj.increment();
console.log(counterObj.get()); // => 1
counterObj.decrement();
counterObj.reset();
console.log(counterObj.get()); // => 0
Nach dem Login kopieren

Zyklus

/**
 * @template T
 * @param  {...T} values
 * @returns () => T
 */

function cycle(...values) {
  let index = -1;

  return function (...args) {
    index = (index + 1) % values.length;
    return values[index];
  };
}

// Usage example
const helloFn = cycle("hello");
console.log(helloFn()); // => "hello"
console.log(helloFn()); // => "hello"

const onOffFn = cycle("on", "off");
console.log(onOffFn()); // => "on"
console.log(onOffFn()); // => "off"
console.log(onOffFn()); // => "on"
Nach dem Login kopieren

Limit

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

function limit(fn, max) {
  let count = 0;
  let value;

  return function (...args) {
    if (count < max) {
      value = fn.call(this, ...args);
      count++;
    }

    return value;
  };
}

// Usage example
let i = 1;
function incrementBy(value) {
  i += value;
  return i;
}

const incrementByAtMostThrice = limit(incrementBy, 3);
console.log(incrementByAtMostThrice(2)); // i is now 3; The function returns 3.
console.log(incrementByAtMostThrice(3)); // i is now 6; The function returns 6.
console.log(incrementByAtMostThrice(4)); // i is now 10; The function returns 10.
console.log(incrementByAtMostThrice(5)); // i is still 10 as this is the 4th invocation; The function returns 10 as it's the result of the last invocation.
i = 4;
console.log(incrementByAtMostThrice(2)); // i is still 4 as it is not modified. The function still returns 10.
Nach dem Login kopieren

Einmal

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

function once(fn) {
  let ranOnce = false;
  let value;

  return function (...args) {
    if (!ranOnce) {
      value = fn.call(this, ...args);
      ranOnce = true;
    }

    return value;
  };
}

// Usage example
function func(num) {
  return num;
}

const onced = once(func);
console.log(onced(1)); // => 1, func called with 1
console.log(onced(2)); // => 1, even 2 is passed, previous result is returned
Nach dem Login kopieren

Sein oder nicht sein

/**
 * @param {any} val
 * @return {true | Error}
 */

function expect(val) {
  return {
    toBe: function (arg) {
      if (val === arg) {
        return true;
      } else {
        throw new Error("Not Equal");
      }
    },
    notToBe: function (arg) {
      if (val !== arg) {
        return true;
      } else {
        throw new Error("Equal");
      }
    },
  };
}

// Usage example
expect(5).toBe(5); // Passes
expect(5).notToBe(6); // Passes

try {
  expect(5).toBe(6); // Throws an error
} catch (error) {
  console.log(error.message); // Not Equal
}
Nach dem Login kopieren

Referenz

  • 148. Erstellen Sie ein Gegenobjekt – BFE.dev
  • 2620. Zähler – LeetCode
  • 2665. Zähler II – LeetCode
  • 2665. Zähler II – LeetCode
  • GreatFrontEnd
  • 2667. Erstellen Sie die Funktion „Hello World“ – LeetCode
  • 23. Erstelle eine sum() - BFE.dev
  • 46. implementieren Sie _.once() - BFE.dev
  • 2704. Sein oder Nichtsein - BFE.dev
  • 161. toBe() oder not.toBe() - BFE.dev
  • „Hallo Welt!“ Programm - Wikipedia.org

Das obige ist der detaillierte Inhalt vonAbschluss – JavaScript-Herausforderungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!