Dieses Mal werde ich Ihnen die Verwendung gängiger JS-Funktionen ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung gängiger JS-Funktionen?
Es gibt viele Möglichkeiten, Arrays zu reduzieren, aber am Ende ist die Rekursion die beste, 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 spielt eine Rolle und wird daher in die Schleife eingefügt.
Über das Currying von Funktionen wurde schlecht gesprochen. Jeder hat sein eigenes Verständnis und seine eigene Implementierungsmethode 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 jedes Mal mit der Anzahl der Curry-Funktionsparameter verglichen wird Geben Sie die Funktion weiterhin zurück, andernfalls wird sie ausgeführt.
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 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
}
}
}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 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:
Yuansheng Node .js-Registrierungs-E-Mail-Aktivierung Detaillierte Erklärung
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung allgemeiner Funktionen in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
