ホームページ > 記事 > ウェブフロントエンド > よく使用される 5 つの JavaScript 関数の例 (概要の共有)
この記事では、JavaScript に関する関連知識を提供します。主に、タイマー、プロセス制御、クロージャ アプリケーション、引数の残りのパラメータを含む 5 つの一般的な関数とその例、および二次カプセル化関数の関連問題を紹介します。 、以下でそれらを見てみましょう。皆さんの参考になれば幸いです。
[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]
ドット タイマーを実装するには、要件は次のとおりです:
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) Medium
start は、最初に出力してから 1 を追加することです。
setInterval タイマー、
count 関数
return out
cancel、inside
cancel## を使用します。 # タイマーをクリアする操作です (count
関数で宣言された timer
変数を参照) ここで closure
の知識が使用されます。
は、count
関数内の変数 timer
にアクセスできるクロージャ関数です。このとき、この timer
JS
ガベージ コレクション メカニズム
によってクリアされません (count関数が破棄された場合でも、メモリ内に永続的に残ります )、これは外部呼び出し cancel
Cleartimer
このタイマーの理由で実行できることです。
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;}
は関数 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
Return an arrayfn
を呼び出した結果と一致する必要があります。 #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)
パラメータ:
「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 サイトの他の関連記事を参照してください。