Es gibt einige Probleme in JavaScript, die oft diskutiert werden. Wenn Sie diese Probleme verstehen möchten, gibt es nicht viel zu sagen. Sagen Sie: Kommen wir zur Sache. Dieser Artikel gibt Ihnen eine Zusammenfassung von fünf gängigen JavaScript-Funktionen. Ich hoffe, er kann Freunden in Not helfen.
Array-Reduzierung
Es gibt viele Möglichkeiten, Arrays zu reduzieren, aber letztendlich ist der beste Weg eine Rekursion, um eine Reduzierungsmethode mit einer bestimmten Tiefe zu implementieren ist die Grundroutine, die jeder verstehen wird.
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, das heißt, jedes Element wird durchlaufen, und wenn ein Element ein Array ist, lassen Sie das Element weiterhin aufgerufen werden, hier wird Depth als Abflachungstiefe angegeben. Da sich dieser Parameter auf jedes Element des Arrays auswirkt, wird er innerhalb der Schleife platziert.
Currying
Über das Currying von Funktionen wurde schlecht gesprochen. Die Erklärung in einem Satz lautet: Ausführen, wenn die Parameter ausreichen Wenn nicht genügend Parameter vorhanden sind, wird eine Funktion zurückgegeben und die vorherigen Parameter werden gespeichert, bis genügend 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 jedes Mal, wenn die Anzahl der Parameter beurteilt wird, sie mit der Anzahl der Curry-Funktionen verglichen wird Wenn es kleiner als ist, geben Sie die Funktion einfach weiter zurück, andernfalls führen Sie sie aus.
Anti-Shake
Nach meinem Verständnis ist Anti-Shake egal wie oft Sie es auslösen, es wird erst nach einem von Ihnen angegebenen Zeitraum nach dem letzten Mal ausgelöst auslösen. 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 am Anfang und beim letzten Mal ausgelöst werden soll, und es kann konfiguriert werden. Schreiben Sie zunächst einen Test Seite, um das Testen der Funktion zu erleichtern. Jedes Mal, wenn Sie die Leertaste drücken, erhöht sich die Zahl um 1, um die Anti-Shake- und Drosselungsfunktionen 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 führenden und nachgestellten Parameter ausgeführt werden. Wenn der Zeilenabstand wahr ist, wird er jedes Mal ausgeführt, wenn das Leerzeichen vorhanden ist gedrückt. Wenn das Trailing wahr ist, 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
解释一下，每次记录上次调用的时间，与现在的时间对比，小于间隔的话，第一次执行后之后就不会执行，大于间隔或在间隔时间后调用了，则重置 flag，可以与上面那个基本版的对比着看。
节流
节流就是，不管怎么触发，都是按照指定的间隔来执行，同样给个基本版。
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
同样和防抖函数一样加上两个参数，也可使用上面的例子来测试，其实两者的代码很类似。
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
对象拷贝
对象拷贝都知道分为深拷贝和浅拷贝，黑科技手段就是使用
JSON.parse(JSON.stringify(obj))
Nach dem Login kopieren
还有个方法就是使用递归了
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
对于基本类型直接返回，对于引用类型，遍历递归调用 clone 方法。
总结
其实对于上面这些方法，总的来说思路就是递归和高阶函数的使用，其中就有关于闭包的使用，前端就爱问这些问题，最好就是自己实现一遍，这样有助于理解。
Das obige ist der detaillierte Inhalt vonZusammenfassung von fünf gängigen JavaScript-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
