ホームページ > 記事 > ウェブフロントエンド > JavaScript を学習する際によく使用される 5 つの関数
JavaScript を学習する際によく使用される 5 つの関数
- 青灯夜游オリジナル
- 2018-09-12 17:31:591026ブラウズ
JavaScript には、頻繁に議論される問題がいくつかあります (例: スロットル関数、アンチシェイク関数、再帰関数など)。この章では、JavaScriptz の使用方法を学習する過程でよく使用される 5 つの関数を紹介します。困っている友人は参考にしていただければ幸いです。
配列の平坦化
配列を平坦化する方法はたくさんありますが、最終的に最善の方法は、基本的なルーチンを理解できるように、指定された深さで平坦化メソッドを再帰して実装することです。
function flattenDepth(array, depth = 1) {
let result = []
array.forEach(item => {
let d = depth
if (Array.isArray(item) && d > 0) {
result.push(...(flattenDepth(item, --d)))
} else {
result.push(item)
}
})
return result
}
console.log(flattenDepth([1, [2, [3, [4]], 5]])) // [ 1, 2, [ 3, [ 4 ] ], 5 ]
console.log(flattenDepth([1, [2, [3, [4]], 5]], 2)) // [ 1, 2, 3, [ 4 ], 5 ]
console.log(flattenDepth([1, [2, [3, [4]], 5]], 3)) // [ 1, 2, 3, 4, 5 ]再帰的な実装は非常にシンプルで理解しやすいです。つまり、項目が配列の場合、このパラメーターは各項目に影響を与えるため、その項目を引き続き呼び出すようにします。これらはすべて役割を持っているため、ループ内に配置されます。
カリー化
関数のカリー化については、人によって理解や実装方法が異なります。一言で説明すると、パラメータが十分であれば実行され、十分でなければ実行されます。パラメータを指定すると、関数が返されます。以前のパラメータは、十分な数が必要になるまで保存されます。
function curry(func) {
var l = func.length
return function curried() {
var args = [].slice.call(arguments)
if(args.length < l) {
return function() {
var argsInner = [].slice.call(arguments)
return curried.apply(this, args.concat(argsInner))
}
} else {
return func.apply(this, args)
}
}
}
var f = function(a, b, c) {
return console.log([a, b, c])
};
var curried = curry(f)
curried(1)(2)(3) // => [1, 2, 3]
curried(1, 2)(3) // => [1, 2, 3]
curried(1, 2, 3) // => [1, 2, 3]上記のコードを見ると難しくありませんが、パラメータの数が判定されるたびに、カリングされた関数のパラメータの数と比較され、その数より小さい場合は関数を返し続けます。それ以外の場合は実行されます。
手ぶれ補正
私の理解によれば、手ぶれ補正とは、何度トリガーしても、最後のトリガーから指定した時間が経過するまではトリガーされないことを意味します。この説明に続いて、基本バージョンを作成します。
function debounce(func, wait) { var timer return function() { var context = this
var args = arguments
clearTimeout(timer)
timer = setTimeout(function() {
func.apply(context, args)
}, wait)
}
}ここで、最初と最後にトリガーされるという要件があり、これを設定できます。まず、スペースバーを押すたびに、関数のテストを容易にするためのテストページを作成します。手ぶれ補正とスロットル機能をテストするには、1 ずつ増やします。
<html>
<head>
<style>
#container{text-align: center; color: #333; font-size: 30px;}
</style>
</head>
<body>
<div id="container"></div>
<script>
var count = 1
var container = document.getElementById('container')
function getUserAction(e) {
// 空格
if (e.keyCode === 32) {
container.innerHTML = count++
}
}
// document.onkeydown = debounce(getUserAction, 1000, false, true)
document.onkeydown = throttle(getUserAction, 1000, true, true)
function debounce(func, wait, leading, trailing) {}
function throttle(func, wait, leading, trailing) {}
</script>
</body>
</html>先頭と末尾の 2 つのパラメータを使用して、先頭と末尾を実行するかどうかを決定します。先頭が true の場合、スペースを押すたびに 1 回実行され、末尾が true の場合は、毎回最後のトリガーが実行されます。終わり。手ぶれ補正機能の距離、両方が true の場合、最初にスペースを押すと 1 が追加され、すぐにスペースを押すと、この時点では内部の getUserAction は実行されませんが、末尾を false に放した後に実行されます。 、手放した後は実行されません。
function debounce(func, wait, leading, trailing) {
var timer, lastCall = 0, flag = true
return function() {
var context = this
var args = arguments
var now = + new Date()
if (now - lastCall < wait) {
flag = false
lastCall = now
} else {
flag = true
}
if (leading && flag) {
lastCall = now
return func.apply(context, args)
}
if (trailing) {
clearTimeout(timer)
timer = setTimeout(function() {
flag = true
func.apply(context, args)
}, wait)
}
}
}説明します、最後の呼び出しの時間が記録されるたびに、それが間隔より小さい場合、最初の実行後または呼び出された後は実行されません。一定の時間が経過するとフラグがリセットされ、上記の基本バージョンと比較できます。
スロットリング
スロットリングとは、どのようにトリガーされたとしても、指定された間隔で実行されます 基本バージョンも提供します。
function throttle(func, wait) {
var timer
return function() {
var context = this
var args = arguments
if (!timer) {
timer = setTimeout(function () {
timer = null
func.apply(context, args)
}, wait)
}
}
}手ぶれ補正機能のような 2 つのパラメーターも追加します。実際、この 2 つのコードは非常に似ています。
function throttle(func, wait, leading, trailing) { var timer, lastCall = 0, flag = true
return function() { var context = this
var args = arguments
var now = + new Date()
flag = now - lastCall > wait if (leading && flag) {
lastCall = now return func.apply(context, args)
} if (!timer && trailing && !(flag && leading)) {
timer = setTimeout(function () {
timer = null
lastCall = + new Date()
func.apply(context, args)
}, wait)
} else {
lastCall = now
}
}
}オブジェクトコピー
オブジェクトコピーが深いコピーと浅いコピーに分けられることは誰もが知っています
JSON.parse(JSON.stringify(obj))
もう1つの方法は再帰を使用することです
function clone(value, isDeep) {
if (value === null) return null
if (typeof value !== 'object') return value
if (Array.isArray(value)) {
if (isDeep) {
return value.map(item => clone(item, true))
}
return [].concat(value)
} else {
if (isDeep) {
var obj = {}
Object.keys(value).forEach(item => {
obj[item] = clone(value[item], true)
})
return obj
}
return { ...value }
}
}
var objects = { c: { 'a': 1, e: [1, {f: 2}] }, d: { 'b': 2 } }
var shallow = clone(objects, true)
console.log(shallow.c.e[1]) // { f: 2 }
console.log(shallow.c === objects.c) // false
console.log(shallow.d === objects.d) // false
console.log(shallow === objects) // false基本的なタイプの場合は、ダイレクトです。 return、参照用 再帰的に clone メソッドを入力し、走査し、呼び出します。
概要
実際、上記のメソッドの一般的な考え方は、クロージャの使用を含む再帰と高階関数の使用です。フロントエンドはこれらの質問をすることを好みます。自分で実装するのが最善です。これは理解に役立ちます。
以上がJavaScript を学習する際によく使用される 5 つの関数の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。