Dieses Mal bringe ich Ihnen eine Zusammenfassung der allgemeinen JS-Funktionen und welche Vorsichtsmaßnahmen bei der Verwendung allgemeiner JS-Funktionen gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.
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 ]Nach dem Login kopieren
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]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 Geben Sie die Funktion weiterhin 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)
}
}Nach dem Login kopieren
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>Nach dem Login kopieren
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)
}
}
}Nach dem Login kopieren
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)
}
}
}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
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) // falseNach dem Login kopieren
Für Basistypen direkt zurückkehren. Für Referenztypen die Klonmethode durchlaufen und rekursiv aufrufen.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Vue-Dokumentation fehleranfällige Punkte organisiert
Detaillierte Erläuterung der Schritte zum Generieren von Routing mit Angular CLI
Das obige ist der detaillierte Inhalt vonZusammenfassung gängiger JS-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
