ホームページ  >  記事  >  ウェブフロントエンド  >  よく使用される 5 つの JavaScript 関数の例 (概要の共有)

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

WBOY
WBOY転載
2022-10-01 08:00:262167ブラウズ

この記事では、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. プロセス制御

実装

fizzBu​​zz

関数、パラメータ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. resulti 番目の関数を実行します。つまり、次のようになります。 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)
パラメータ:

    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修改调用的这个slicethis指向,使其指向到arguments,这样就相当于是在arguments上使用slice方法。

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

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

【相关推荐:javascript视频教程web前端

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

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。