Beispiele für fünf häufig verwendete JavaScript-Funktionen (Zusammenfassungsfreigabe)

Dieser Artikel vermittelt Ihnen relevantes Wissen über JavaScript, in dem hauptsächlich fünf gängige Funktionen und deren Beispiele vorgestellt werden, darunter Timer, Prozesssteuerung, Abschlussanwendung, Argumente, verbleibende Parameter und sekundäre gekapselte Funktionen. Ich hoffe, wir werfen einen Blick auf die damit verbundenen Probleme es wird für alle hilfreich sein. 🔜 bis end (einschließlich start und end), console.log alle 100 Millisekunden eine Zahl, jedes Mal, wenn die Zahl erhöht ist 1

2. Das zurückgegebene Objekt muss eine cancel-Methode enthalten, die verwendet wird, um den Timing-Vorgang zu stoppen

3 Die erste Zahl muss sofort ausgegeben werden

function count(start, end) {
    console.log(start++); 
    let timer = setInterval(() => {
        if (start <= end) {
            console.log(start++);
        }
    }, 100);
    return {
        cancel: () => {
            clearInterval(timer);
        },
    };}

Die erste Zahl muss sofort ausgegeben werden, < In code>console.log(start++) wird start++ zuerst ausgegeben und dann um 1 erhöht. Danach verwenden Sie den Timer setInterval und die Funktion count return, um cancel und cancel zu erzeugen Darin befindet sich eine Operation zum Löschen des Timers (bezogen auf die Variable timer, die in der Funktion count deklariert wurde. Das Wissen von closure). wird hier verwendet.

cancel ist eine Abschlussfunktion, die auf die Variable timer in der Funktion count zugreifen kann. Zu diesem Zeitpunkt ist dieser timer< /code >Wird nicht durch den <code>JSGarbage-Collection-Mechanismus gelöscht (wird dauerhaft im Speicher verbleiben, auch wenn die Anzahl</ code>-Funktion wird zerstört), deshalb kann der Timer <code>timer extern durch Aufruf von cancel gelöscht werden.

Ein Abschluss bezieht sich auf eine Funktion, die Zugriff auf lokale Variablen im Gültigkeitsbereich einer anderen Funktion hat. Eine innerhalb einer Funktion deklarierte Funktion wird als Abschlussfunktion bezeichnet. Und die innere Funktion kann immer auf die Parameter und Variablen zugreifen, die in der äußeren Funktion deklariert sind, in der sie sich befindet, auch nachdem ihre äußere Funktion zurückgegeben wurde (Lebensende).

2. Prozesssteuerung

start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1

2、返回的对象中需要包含一个 cancel 方法，用于停止定时操作

3、第一个数需要立即输出

输入：15输出：fizzbuzz

第一个数立即输出，console.log(start++) 中start++是先输出再自加1。

之后使用setInterval定时器，count函数return出cancel，cancel内是一个清除定时器的操作（引用了timer这个在count函数中声明的变量），这里用到了闭包的知识。

cancel是一个闭包函数，它能访问count函数中的变量timer，这时这个timer不会被JS垃圾回收机制清除（会永驻内存，即使count函数被销毁），这就是可以在外部调用cancel清除timer这个定时器的原因。

闭包是指有权访问另外一个函数作用域中的局部变量的函数。声明在一个函数中的函数，叫做闭包函数。而且内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。

二、流程控制

实现 fizzBuzz 函数，参数 num 与返回值的关系如下：
1、如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz
2、如果 num 能被 3 整除，返回字符串 fizz
3、如果 num 能被 5 整除，返回字符串 buzz
4、如果参数为空或者不是 Number 类型，返回 false
5、其余情况，返回参数 num

示例：

function fizzBuzz(num) {
    if (!num || typeof num !== "number") return false;
    
    if (num % 3 === 0 && num % 5 === 0) return "fizzbuzz";

    if (num % 3 === 0) return "fizz";

    if (num % 5 === 0) return "buzz";

    return num;}

这就是简单的分支判断：

var arr = [1, 2, 3];var fn = function (x) {
    return x * x;};var result = makeClosures(arr, fn);result[1]() === fn(arr[1]) ? console.log("yes") === 4 : console.log("no"); // yes

三、闭包应用

实现函数 makeClosures，调用之后满足如下条件：
1、返回一个函数数组 result，长度与 arr 相同
2、运行 result 中第 i 个函数，即 result[i]()，结果与 fn(arr[i]) 相同

示例：

function makeClosures(arr, fn) {
    const result = []
    arr.forEach(item=>{
        result.push(function(){
            return fn(item)
        })
    })
    return result}

解：

输入：1, 2, 3, 4输出：10

这题一眼看上去感觉是比较绕，但你从上到下去梳理就很容易找到解决的方法：

• makeClosures返回一个数组
• 数组中每个元素都是一个函数
• 并且这些函数执行的结果要与使用arr中对应元素作为参数调用fn的结果一致

四、arguments剩余参数

函数 useArguments 可以接收 1 个及以上的参数。请实现函数 useArguments，返回所有调用参数相加后的结果。本题的测试参数全部为 Number 类型，不需考虑参数转换。

function useArguments() {
    return [...arguments].reduce((a, b) => a + b);}

解：

Array.prototype.reduce(callbackFn, initialValue)

函数中能直接访问arguments变量，这个变量是一个含有该函数接收的所有参数的伪数组（不具有数组的全部方法）。

所以我是先使用...解构来将arguments转换成一个真正的数组，之后调用数组的reduce求和方法进行求和即可。

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

function partialUsingArguments(fn) {
  const arr = [].slice.call(arguments,1)
  return function (...arr2) { // ...arr2表示用arr2接收所有参数，arr2是一个数组
      return fn(...arr,...arr2)
  }}

参数：

• callbackFn
  一个 “reducer Implementieren Sie die Funktion fizzBuzz. Die Beziehung zwischen dem Parameter num und dem Rückgabewert ist wie folgt:
  1 . Wenn num gleichzeitig durch 3 und 5 teilbar sein kann, wird die Zeichenfolge fizzbuzz
  2 zurückgegeben. Wenn num sein kann durch 3 teilbar ist, wird die Zeichenfolge fizz
  zurückgegeben. 3. Wenn num durch 5 teilbar ist, wird die Zeichenfolge buzz
  zurückgegeben 4. Wenn der Parameter leer ist oder nicht vom Typ Number, geben Sie false
  zurück. 5. In anderen Fällen geben Sie den Parameter num zurück

  🎜 Beispiel: 🎜rrreee🎜Dies ist ein einfaches Zweigurteil:🎜 rrreee🎜3. Abschlussanwendung🎜🎜Implementieren Sie die Funktion makeClosures und erfüllen Sie nach dem Aufruf die folgenden Bedingungen:
  1. Geben Sie eine Funktion zurück Array result, die Länge ist die gleiche wie arr ist die gleiche
  2. Führen Sie die ite Funktion in result aus , also result[i](), und das Ergebnis ist dasselbe wie fn(arr[i]) 🎜🎜Beispiel: 🎜rrreee🎜Lösung: 🎜rrreee🎜Diese Frage mag auf den ersten Blick verwirrend erscheinen, aber Sie können die Lösung leicht finden, wenn Sie sie von oben nach unten durchkämmen. Methode: 🎜
  • makeClosures gibt ein Array zurück
  • Jedes Element im Array ist eine Funktion
  • und die Ergebnisse dieser Funktionen werden ausgeführt. Sie müssen mit dem Ergebnis des Aufrufs von fn unter Verwendung des entsprechenden Elements in < übereinstimmen code>arr als Parameter
  🎜4. Die übrigen Parameter der Argumente🎜🎜Funktion useArguments< /code> können einen oder mehrere Parameter erhalten. Bitte implementieren Sie die Funktion <code>useArguments, um das Ergebnis der Hinzufügung aller Aufrufparameter zurückzugeben. Die Testparameter dieser Frage sind alle vom Typ Number und eine Parameterkonvertierung ist nicht erforderlich. 🎜rrreee🎜Lösung: 🎜rrreee🎜Auf die Variable arguments kann direkt in der Funktion zugegriffen werden. Diese Variable ist ein Pseudo-Array, das alle von der Funktion empfangenen Parameter enthält (ohne alle die Parameter der Array-Methode). 🎜🎜Also habe ich zuerst die Destrukturierung von ... verwendet, um Argumente in ein echtes Array umzuwandeln, und dann die Summierungsmethode reduce des Arrays Just aufgerufen Führe die Summierung durch. 🎜🎜Die reduce()-Methode führt nacheinander eine von Ihnen bereitgestellte reducer-Funktion für jedes Element im Array aus. Jedes Mal, wenn der reducer ausgeführt wird, Die Berechnungsergebnisse der vorherigen Elemente werden als Parameter übergeben und schließlich werden die Ergebnisse in einem einzigen Rückgabewert zusammengefasst. 🎜rrreee🎜Parameter:🎜
  • 🎜callbackFn
    Eine „reducer“-Funktion, die vier Parameter enthält: 🎜
    • previousValue：上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。
    • currentValue：数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。
    • currentIndex：数组中正在处理的元素的索引。若指定了初始值
    • initialValue，则起始索引号为 0，否则从索引 1 起始。
    • array：用于遍历的数组。

  • initialValue 可选
    作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。

  五、二次封装函数

  实现函数 partialUsingArguments，调用之后满足如下条件：
  1、返回一个函数 result
  2、调用 result 之后，返回的结果与调用函数 fn 的结果一致
  3、fn 的调用参数为 partialUsingArguments 的第一个参数之后的全部参数以及 result 的调用参数

  解：

  function partialUsingArguments(fn) {
    const arr = [].slice.call(arguments,1)
    return function (...arr2) { // ...arr2表示用arr2接收所有参数，arr2是一个数组
        return fn(...arr,...arr2)
    }}

  第一个arr数组表示的是partialUsingArguments接收的第一个参数之后的全部参数数组。

  因为arguments是伪数组，不具有slice方法，所以这里通过随便一个数组（我选的是空数组[]）来调用slice，然后通过call修改调用的这个slice的this指向，使其指向到arguments，这样就相当于是在arguments上使用slice方法。

  call修改函数this指向并立即调用该函数，call第一个参数表示需要修改的this指向，之后的所有参数都会作为原函数的参数传递到原函数中。

  slice(begin,end) 方法能切割数组，返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
  不加end参数表示从 begin一直切割到最后。

  【相关推荐：javascript视频教程、web前端】

  Das obige ist der detaillierte Inhalt vonBeispiele für fünf häufig verwendete JavaScript-Funktionen (Zusammenfassungsfreigabe). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!