Fünf gängige JavaScript-Funktionen
In der JavaScript-Front-End-Entwicklung wird das Problem der JS-Funktionen häufig diskutiert. Im Folgenden finden Sie eine Einführung in die fünf gängigen JS-Funktionen anhand von Beispielcodes Schauen Sie zusammen
Es gibt einige Probleme in JavaScript, die häufig diskutiert werden. Wenn Sie diese Probleme verstehen möchten, ist es am besten, sie selbst umzusetzen bis zum Thema.
Array-Reduzierung
Es gibt viele Möglichkeiten, Arrays zu reduzieren, aber letztendlich ist die Rekursion die beste Methode, um eine bestimmte Tiefe der Reduzierung zu erreichen Methode, damit Sie die Grundabläufe 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 ]Die rekursive Implementierung ist sehr einfach und leicht zu verstehen. Wenn es sich bei einem Element um ein Array handelt, wird die Tiefe des Elements hier weiterhin als Abflachungstiefe angegeben Dieser Parameter ist für Arrays wichtig. Jedes Element hat eine Rolle und wird daher in die Schleife eingefügt.
Currying
Über das Currying von Funktionen wurde schlecht gesprochen. In einem Satz lautet die Erklärung Wenn genügend Parameter vorhanden sind, wird eine Funktion zurückgegeben. Die vorherigen Parameter werden gespeichert, bis genügend Parameter vorhanden sind.
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]Aus dem obigen Code ist nicht schwer zu erkennen, dass die Anzahl der Parameter bei jeder Beurteilung mit der Anzahl der Curry-Funktionsparameter verglichen wird Geben Sie die Funktion zurück, andernfalls wird sie ausgeführt.
Anti-Shake
Nach meinem Verständnis bedeutet Anti-Shake, dass egal wie oft man es auslöst, es wartet bis ein Zeitraum, den Sie nach dem Auslösen des letzten Auslösers angeben. 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)
}
}Jetzt ist es erforderlich, dass es zu Beginn und beim letzten Mal ausgelöst wird. Schreiben Sie zunächst eine Testseite, um das Testen der Funktion zu erleichtern , die Zahl erhöht sich um 1. Testen Sie hier die Entprell- und Drosselungsfunktionen.
<!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>Bestimmen Sie, ob der Start und das Ende durch die beiden Parameter Leading und Trailing ausgeführt werden. Wenn Leading wahr ist, wird es jedes Mal ausgeführt, wenn Sie die Leertaste drücken. Wenn Trailing wahr ist, wird der letzte Trigger ausgelöst jedes Mal, wenn es 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)
}
}
}Erklären Sie, dass die Zeit des letzten Anrufs jedes Mal mit der aktuellen Zeit verglichen wird. Wenn sie kleiner als das Intervall ist, wird sie nach der ersten Ausführung nicht ausgeführt das Intervall oder wird nach dem Intervall aufgerufen. Setzen Sie dann das Flag zurück und vergleichen Sie es mit der obigen Basisversion.
Drosselung
Drosselung bedeutet, dass sie unabhängig von der Auslösung gemäß dem angegebenen Intervall ausgeführt wird. Wir geben auch eine Grundvoraussetzung Version.
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)
}
}
}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
}
}
}Objektkopie
Es ist bekannt, dass Objektkopien in tiefe Kopien und flache Kopien unterteilt werden. Die Schwarztechnologiemethode ist
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) // falseFür Basistypen direkt zurückkehren. Für Referenztypen die Klonmethode durchlaufen und rekursiv aufrufen.
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
Einführung in Time-Sharing-Funktionen zur Leistungsoptimierung von Javascript
Überprüfung des E-Mail-Adressformats in JavaScript
So führen Sie ein Symbolsymbol in ein Vue-Projekt ein
Das obige ist der detaillierte Inhalt vonFünf gängige JavaScript-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Tipps zum dynamischen Erstellen neuer Funktionen in Golang-Funktionen
Apr 25, 2024 pm 02:39 PM
Die Go-Sprache bietet zwei Technologien zur dynamischen Funktionserstellung: Schließung und Reflexion. Abschlüsse ermöglichen den Zugriff auf Variablen innerhalb des Abschlussbereichs, und durch Reflektion können mithilfe der FuncOf-Funktion neue Funktionen erstellt werden. Diese Technologien sind nützlich bei der Anpassung von HTTP-Routern, der Implementierung hochgradig anpassbarer Systeme und dem Aufbau steckbarer Komponenten.
Überlegungen zur Parameterreihenfolge bei der Benennung von C++-Funktionen
Apr 24, 2024 pm 04:21 PM
Bei der Benennung von C++-Funktionen ist es wichtig, die Reihenfolge der Parameter zu berücksichtigen, um die Lesbarkeit zu verbessern, Fehler zu reduzieren und das Refactoring zu erleichtern. Zu den gängigen Konventionen für die Parameterreihenfolge gehören: Aktion-Objekt, Objekt-Aktion, semantische Bedeutung und Einhaltung der Standardbibliothek. Die optimale Reihenfolge hängt vom Zweck der Funktion, den Parametertypen, möglichen Verwirrungen und Sprachkonventionen ab.
Wie schreibe ich effiziente und wartbare Funktionen in Java?
Apr 24, 2024 am 11:33 AM
Der Schlüssel zum Schreiben effizienter und wartbarer Java-Funktionen ist: Halten Sie es einfach. Verwenden Sie eine aussagekräftige Benennung. Bewältigen Sie besondere Situationen. Nutzen Sie entsprechende Sichtbarkeit.
Vollständige Sammlung von Excel-Funktionsformeln
May 07, 2024 pm 12:04 PM
1. Die SUMME-Funktion wird verwendet, um die Zahlen in einer Spalte oder einer Gruppe von Zellen zu summieren, zum Beispiel: =SUMME(A1:J10). 2. Die Funktion AVERAGE wird verwendet, um den Durchschnitt der Zahlen in einer Spalte oder einer Gruppe von Zellen zu berechnen, zum Beispiel: =AVERAGE(A1:A10). 3. COUNT-Funktion, die verwendet wird, um die Anzahl der Zahlen oder Texte in einer Spalte oder einer Gruppe von Zellen zu zählen, zum Beispiel: =COUNT(A1:A10) 4. IF-Funktion, die verwendet wird, um logische Urteile auf der Grundlage spezifizierter Bedingungen zu treffen und die zurückzugeben entsprechendes Ergebnis.
Welche Vorteile haben C++-Funktionen, die Referenztypen zurückgeben?
Apr 20, 2024 pm 09:12 PM
Zu den Vorteilen von Funktionen, die Referenztypen in C++ zurückgeben, gehören: Leistungsverbesserungen: Durch die Übergabe als Referenz wird das Kopieren von Objekten vermieden, wodurch Speicher und Zeit gespart werden. Direkte Änderung: Der Aufrufer kann das zurückgegebene Referenzobjekt direkt ändern, ohne es neu zuzuweisen. Einfachheit des Codes: Die Übergabe als Referenz vereinfacht den Code und erfordert keine zusätzlichen Zuweisungsvorgänge.
Vergleich der Vor- und Nachteile von C++-Funktionsstandardparametern und variablen Parametern
Apr 21, 2024 am 10:21 AM
Zu den Vorteilen von Standardparametern in C++-Funktionen gehören die Vereinfachung von Aufrufen, die Verbesserung der Lesbarkeit und die Vermeidung von Fehlern. Die Nachteile sind eingeschränkte Flexibilität und Namensbeschränkungen. Zu den Vorteilen variadischer Parameter gehören unbegrenzte Flexibilität und dynamische Bindung. Zu den Nachteilen gehören eine größere Komplexität, implizite Typkonvertierungen und Schwierigkeiten beim Debuggen.
Was ist der Unterschied zwischen benutzerdefinierten PHP-Funktionen und vordefinierten Funktionen?
Apr 22, 2024 pm 02:21 PM
Der Unterschied zwischen benutzerdefinierten PHP-Funktionen und vordefinierten Funktionen ist: Umfang: Benutzerdefinierte Funktionen sind auf den Umfang ihrer Definition beschränkt, während auf vordefinierte Funktionen im gesamten Skript zugegriffen werden kann. So definieren Sie: Benutzerdefinierte Funktionen werden mit dem Schlüsselwort function definiert, während vordefinierte Funktionen vom PHP-Kernel definiert werden. Parameterübergabe: Benutzerdefinierte Funktionen empfangen Parameter, während vordefinierte Funktionen möglicherweise keine Parameter erfordern. Erweiterbarkeit: Benutzerdefinierte Funktionen können nach Bedarf erstellt werden, während vordefinierte Funktionen integriert sind und nicht geändert werden können.
Erweiterte C++-Funktionsausnahme: Angepasste Fehlerbehandlung
May 01, 2024 pm 06:39 PM
Die Ausnahmebehandlung in C++ kann durch benutzerdefinierte Ausnahmeklassen verbessert werden, die spezifische Fehlermeldungen und Kontextinformationen bereitstellen und benutzerdefinierte Aktionen basierend auf dem Fehlertyp ausführen. Definieren Sie eine von std::Exception geerbte Ausnahmeklasse, um spezifische Fehlerinformationen bereitzustellen. Verwenden Sie das Schlüsselwort throw, um eine benutzerdefinierte Ausnahme auszulösen. Verwenden Sie „dynamic_cast“ in einem Try-Catch-Block, um die abgefangene Ausnahme in einen benutzerdefinierten Ausnahmetyp zu konvertieren. Im tatsächlichen Fall löst die Funktion open_file eine FileNotFoundException-Ausnahme aus. Das Abfangen und Behandeln der Ausnahme kann eine spezifischere Fehlermeldung liefern.
