Es gibt einige Probleme in JavaScript, die oft diskutiert werden. Wenn Sie diese Probleme verstehen möchten, wenden Sie sich am besten an das Thema.
Array-Reduzierung
Es gibt viele Möglichkeiten, Arrays zu reduzieren, aber am Ende ist es am besten, eine Reduzierungsmethode mit einer bestimmten Tiefe zu rekursieren und zu implementieren, damit Sie die grundlegenden Routinen verstehen .
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 ]Nach dem Login kopieren
Die rekursive Implementierung ist sehr einfach und leicht zu verstehen. Wenn ein Element ein Array ist, wird das Element weiterhin aufgerufen . Die Tiefe wird hier als Abflachungstiefe angegeben, da dieser Parameter jedes Element des Arrays beeinflusst und innerhalb der Schleife platziert wird.
Currying
Über das Currying von Funktionen wurde schlecht gesprochen. Jeder hat sein eigenes Verständnis und seine eigene Implementierungsmethode. Die Erklärung in einem Satz lautet: Wenn genügend Parameter vorhanden sind, wird sie ausgeführt. und wenn nicht genügend Parameter vorhanden sind, wird eine Funktion mit den zuvor gespeicherten Parametern zurückgegeben, bis diese ausreichen.
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]Nach dem Login kopieren
Aus dem obigen Code ist nicht schwer zu erkennen, dass die Anzahl der Parameter jedes Mal mit der Anzahl der Curry-Funktionsparameter verglichen wird Ist sie kleiner als die Zahl, wird die Funktion weiterhin zurückgegeben, andernfalls wird sie ausgeführt.
Anti-Shake
Nach meinem Verständnis bedeutet Anti-Shake, dass, egal wie oft man es auslöst, es erst nach einem von Ihnen festgelegten Zeitraum nach dem letzten Auslösen ausgelöst wird. Schreiben Sie im Anschluss an diese Erklärung eine Basisversion.
function debounce(func, wait) {
var timer
return function() {
var context = this
var args = arguments
clearTimeout(timer)
timer = setTimeout(function() {
func.apply(context, args)
}, wait)
}
}Nach dem Login kopieren
Jetzt besteht die Anforderung, dass es zu Beginn und beim letzten Mal ausgelöst wird, und es kann konfiguriert werden. Schreiben Sie zunächst eine Testseite, um dies zu erleichtern Testen der Funktion Jedes Mal, wenn Sie die Leertaste drücken, wird die Zahl um 1 erhöht, um die Anti-Shake- und Throttling-Funktionen zu testen.
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
#container{text-align: center; color: #333; font-size: 30px;}
</style>
</head>
<body>
<p id="container"></p>
<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>Nach dem Login kopieren
Bestimmen Sie, ob der Anfang und das Ende durch die beiden Parameter „Leading“ und „Trailing“ ausgeführt werden Trailing ist Wenn true, wird der letzte Trigger jedes Mal ausgeführt, wenn er endet. Anti-Shake-Funktionsabstand: Wenn beide wahr sind, wird durch das erste Drücken der Leertaste 1 hinzugefügt, und dann wird durch schnelles Drücken der Leertaste die darin enthaltene getUserAction zu diesem Zeitpunkt nicht ausgeführt, sondern nach dem Loslassen , es wird nach dem Loslassen nicht ausgeführt.
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)
}
}
}Nach dem Login kopieren
Erklären Sie, dass jedes Mal die Zeit des letzten Anrufs aufgezeichnet und mit der aktuellen Zeit verglichen wird. Wenn sie kleiner als das Intervall ist, wird dies nicht der Fall sein nach der ersten Ausführung ausgeführt wird, größer als das Intervall ist oder nach dem Intervall aufgerufen wird, wird das Flag zurückgesetzt. Sie können es mit der obigen Basisversion vergleichen.
Drosselung
Drosselung bedeutet, dass sie unabhängig von der Auslösung gemäß dem angegebenen Intervall ausgeführt wird. Es gibt auch eine Basisversion.
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)
}
}
}Nach dem Login kopieren
fügt auch zwei Parameter wie die Anti-Shake-Funktion hinzu. Sie können das obige Beispiel auch zum Testen verwenden. Tatsächlich sind die Codes der beiden sehr ähnlich .
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
}
}
}Nach dem Login kopieren
Objektkopie
Objektkopie wird bekanntermaßen in tiefe Kopie und flache Kopie unterteilt. Die Schwarztechnologiemethode ist die Verwendung von
JSON.parse(JSON.stringify(obj))
Eine andere Methode ist die Verwendung von Rekursion
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) // falseNach dem Login kopieren
Für Referenztypen direkt zurückkehren Rufen Sie die Klonmethode auf.
Zusammenfassung
Tatsächlich besteht die allgemeine Idee für die oben genannten Methoden in der Verwendung von Rekursion und Funktionen höherer Ordnung, einschließlich der Verwendung von Abschlüssen Am besten implementieren Sie es einfach selbst, um Ihr Verständnis zu verbessern.
Verwandte Empfehlungen:
Verschiedene gängige Methoden zur Funktionsdefinition in JavaScript_Javascript-Fähigkeiten
Zusammenfassung der Wissenspunkte im Zusammenhang mit JS-Funktionen Teilen
Erklärung der Wertübergabe von js-Funktionsparametern
Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung von fünf gängigen Funktionen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
