Exemples de cinq fonctions JavaScript couramment utilisées (partage de résumé)

Cet article vous apporte des connaissances pertinentes sur JavaScript, qui présente principalement cinq fonctions courantes et leurs exemples, notamment les minuteries, le contrôle de processus, l'application de fermeture, les paramètres restants des arguments et les fonctions encapsulées secondaires. Jetons un coup d'œil aux problèmes connexes ci-dessous, je l'espère. cela sera utile à tout le monde.

[Recommandations associées : tutoriel vidéo javascript, front-end web]

1. Timer

Pour implémenter un minuteur de points, exigences :

1. jusqu'à end (y compris start et end), console.log un nombre toutes les 100 millisecondes, à chaque fois que le nombre augmente est 1start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1

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

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

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

第一个数立即输出，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

示例：

输入：15输出：fizzbuzz

这就是简单的分支判断：

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;}

三、闭包应用

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

示例：

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

解：

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

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

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

四、arguments剩余参数

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

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

解：

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

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

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

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

Array.prototype.reduce(callbackFn, initialValue)

参数：

• callbackFn
  一个 “reducer

  2. L'objet renvoyé doit contenir une méthode cancel, qui est utilisée pour arrêter l'opération de synchronisation🎜🎜3 Le premier nombre doit être affiché immédiatement🎜

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

  🎜Le premier nombre. doit être affiché immédiatement, < In code>console.log(start++), start++ est d'abord affiché puis incrémenté de 1. 🎜🎜Après cela, utilisez le minuteur setInterval, la fonction count return pour produire cancel, cancel Inside se trouve une opération pour effacer le timer (en référence à la variable timer déclarée dans la fonction count La connaissance de la fermeture). est utilisé ici. 🎜🎜cancel est une fonction de fermeture, qui peut accéder à la variable timer dans la fonction count A ce moment, ce timer<. /code >Ne sera pas effacé par le <code>JSmécanisme de récupération de place (sera résistera en permanence en mémoire, même si le compte</strong> code> est détruite), c'est pourquoi le timer <code>timer peut être effacé en externe en appelant cancel. 🎜

  🎜Une fermeture fait référence à une fonction qui a accès à des variables locales dans le cadre d'une autre fonction. Une fonction déclarée dans une fonction est appelée fonction de fermeture. Et la fonction interne peut toujours accéder aux paramètres et variables déclarés dans la fonction externe dans laquelle elle se trouve, même après le retour de sa fonction externe (fin de vie). 🎜

  🎜2. Contrôle de processus🎜🎜 Implémentez la fonction fizzBuzz La relation entre le paramètre num et la valeur de retour est la suivante :
  1. Si num peut être divisible par 3 et 5 à la fois, renvoie la chaîne fizzbuzz
  2. Si num peut être. divisible par 3, renvoie la chaîne fizz
  3. Si num est divisible par 5, renvoie la chaîne buzz
  4. Si le paramètre est vide ou n'est pas de type Number, retournez false
  5. Dans les autres cas, retournez le paramètre num🎜🎜 Exemple : 🎜rrreee🎜Il s'agit d'un simple jugement de branche :🎜 rrreee🎜3. Application de fermeture🎜🎜Implémentez la fonction makeClosures et remplissez les conditions suivantes après l'appel :
  1. Renvoyez une fonction. tableau result, la longueur est la même que arr est la même
  2. Exécutez la ième fonction dans result , c'est-à-dire result[i](), et le résultat Identique à fn(arr[i]) 🎜🎜Exemple : 🎜rrreee🎜Solution : 🎜rrreee🎜Cette question peut paraître compliquée à première vue, mais vous pouvez facilement trouver la solution si vous la peignez de haut en bas. Méthode : 🎜
  • makeClosures renvoie un tableau
  • Chaque élément du tableau est une fonction
  • et les résultats de ces fonctions sont exécutés. Il doit être cohérent avec le résultat de l'appel de fn en utilisant l'élément correspondant dans < code>arr en tant que paramètre
  🎜4. Les paramètres restants de la fonction arguments🎜🎜 useArguments< /code> peuvent recevoir 1 ou plusieurs paramètres. Veuillez implémenter la fonction <code>useArguments pour renvoyer le résultat de l'ajout de tous les paramètres d'appel. Les paramètres de test de cette question sont tous de type Number et il n'est pas nécessaire d'envisager la conversion des paramètres. 🎜rrreee🎜Solution : 🎜rrreee🎜La variable arguments est accessible directement dans la fonction. Cette variable est un pseudo-tableau contenant tous les paramètres reçus par la fonction (sans tous. les paramètres de la méthode array). 🎜🎜J'ai donc d'abord utilisé la déstructuration ... pour convertir les arguments en un vrai tableau, puis j'ai appelé la méthode de sommation reduce du tableau. faire la sommation. 🎜🎜La méthode reduce() exécute séquentiellement une fonction reducer fournie par vous sur chaque élément du tableau. Chaque fois que le reducer est exécuté, Les résultats du calcul des éléments précédents sont transmis en tant que paramètres, et enfin les résultats sont résumés en une seule valeur de retour. 🎜rrreee🎜Paramètres :🎜
  • 🎜callbackFn
    Une fonction "reducer", contenant quatre paramètres : 🎜
    • 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前端】

  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!