よく使用される 5 つの JavaScript 関数の例 (概要の共有)-jsチュートリアル-php.cn

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

WBOY

リリース： 2022-10-01 08:00:26

転載

2142 人が閲覧しました

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

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

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

1. タイマー

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

1. start から 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) Mediumstart は、最初に出力してから 1 を追加することです。

その後、

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

cancel

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

クロージャは、別の関数のスコープ内のローカル変数にアクセスできる関数を指します。関数内で宣言された関数をクロージャ関数と呼びます。また、内部関数は、外部関数が返された後 (サポート終了後) も、それが配置されている外部関数で宣言されたパラメーターと変数に常にアクセスできます。

2. プロセス制御

実装

fizzBuzz

関数、パラメータ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 パラメータとして

#4. Arguments残りのパラメータ

Function

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)

ログイン後にコピー

パラメータ:

「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方法。