よく使用される 5 つの JavaScript 関数の例 (概要の共有)

この記事では、JavaScript に関する関連知識を提供します。主に、タイマー、プロセス制御、クロージャ アプリケーション、引数の残りのパラメータを含む 5 つの一般的な関数とその例、および二次カプセル化関数の関連問題を紹介します。 、以下でそれらを見てみましょう。皆さんの参考になれば幸いです。

[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]

1. タイマー

ドット タイマーを実装するには、要件は次のとおりです:

1. start から end (start と # を含む) ##end )、100 ミリ秒ごと console.log 数値、各数値は 1

cancel が含まれている必要がありますメソッド 、タイミング操作を停止するために使用されます

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

console.log(start) Mediumstart は、最初に出力してから 1 を追加することです。

setInterval タイマー、count 関数 return out cancel、inside cancel## を使用します。 # タイマーをクリアする操作です (count 関数で宣言された timer 変数を参照) ここで closure の知識が使用されます。

は、count 関数内の変数 timer にアクセスできるクロージャ関数です。このとき、この timerJSガベージ コレクション メカニズムによってクリアされません (count関数が破棄された場合でも、メモリ内に永続的に残ります )、これは外部呼び出し cancelCleartimerこのタイマーの理由で実行できることです。

2. プロセス制御

実装

関数、パラメータnumと戻り値の関係は次のとおりです。 1. num が 3 と 5 で同時に割り切れる場合は、文字列
fizzbuzz を返します。 2. num が 3 で割り切れる場合は、文字列
fizzbuzz を返します。 、文字列 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;}

3. クロージャ アプリケーション

は関数 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}

この質問は一見するとわかりにくいかもしれませんが、上から下に調べていくと簡単に解決策を見つけることができます。

• makeClosuresReturn an array
• 配列内の各要素は関数です
• そして、これらの関数の実行結果は、## の対応する要素を使用して fn を呼び出した結果と一致する必要があります。 #arr パラメータとして

useArguments は 1 つ以上のパラメータを受け取ることができます。すべての呼び出しパラメーターを追加した結果を返す関数 useArguments を実装してください。この質問のテスト パラメーターはすべて Number 型であり、パラメーターの変換を考慮する必要はありません。

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

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

arguments 変数に直接アクセスできます。この変数は、関数によって受け取られたすべてのパラメータを含む 疑似配列です。関数 (配列のすべてのメソッドではありません)。

... 分割を使用して arguments を実数の配列に変換し、次に配列の reduce to sum メソッドを呼び出しました。合計を実行します。

reduce() メソッドは、実行されるたびに、配列内の各要素に対して指定された reducer 関数を順番に実行します。前の要素の計算結果がパラメータとして渡され、最終的に結果が 1 つの戻り値にまとめられます。

Array.prototype.reduce(callbackFn, initialValue)

callbackFn

• 「reducer」関数。 4 つのパラメータ:
  

  • 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前端】

以上がよく使用される 5 つの JavaScript 関数の例 (概要の共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。